My project isn't working when I name a folder 'components', if I named any other name('component', 'pasta', 'templates') it works. The route names are fine, this ONLY happens when the folder it's named 'components'.
I'm using lit-element in this project
It works
Doesn't work
Steps to reproduce
npm i lit-element
touch index.html // Create a HTML file in the root folder
mkdir components // Create a folder where JS components will be
touch main.js // Create a component file
cd ..; polymer serve // Go back one directory and run the project
import { LitElement, html } from 'lit-element';
class MyElement extends LitElement {
render() {
return html`<p>template content</p>`;
}
}
customElements.define('my-element', MyElement);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="module" src="./components/main.js"></script>
<title>lit-element code sample</title>
</head>
<body>
<my-element></my-element>
</body>
</html>
NOTE this snippet code doesn't run in StackOverflow, create the project and reproduce it.
Change the name of the 'components' folder to any name you want, then change the route in the index.html file.
As you can see from the log, polymer serve reserves a namespace starting with components/ for serving reusable components (a legacy of Polymer's old bower_components dependency management). This prevents your components folder from being served correctly. The namespace should be configurable through the --component-url option, although it doesn't seem to work.
You can either
use polyserve directly and change the component url:
$ npm i -g polyserve
$ polyserve --component-url mycustomcomponenturl
use another dev server: open-wc's es-dev-server is a great alternative, also cited by the lit-html docs.
Related
i'm building my first gatsby site and i've run into a few css issues during deployment.
first off, when i load the site, none of the css loads - but when i click on latest promotions/hktaxi (completed pages) and then epayment services (links back to index.js - same as homepage), the css loads. i initially thought this was a netlify issue, which is why i decided to deploy it to github pages too - but the page looks exactly the same on both platforms.
the page is responsive on web, but not on mobile. i've read solutions online that the meta tag for the viewport should be put in my html file - however, i don't have one. should i be creating a html.js file and inserting the meta tag there?
put the repo here for reproducibility: github.com/claudiahleung/gatsby-learnings
thanks!
There's a lack of implementation but a few cents and a bunch of plausible causes:
It seems, according to the described behavior that you have some hydration issues. At the initial render point, none of your styles are being loaded or applied but when you move back and forwards (where rehydration occurs) it loads. This issue normally appears when you block that hydration by pointing directly to the DOM instead of React's virtual DOM (vDOM), for instance, when asking for window or document outside React's scope (without hooks).
That said, this is an implementation issue, not a Netlify's or GitHub issue. This should (and must) happen when building your project locally, since, in the end, what Netlify's does is to build your project on their server and you should be able to reproduce it locally by gatsby build && gatsby serve. If locally things work as expected, you may start thinking in a Netlify issue (normally related with mismatching Node versions between environments).
In your case, I'm pretty sure that your issue comes because you are using styled-components but you haven't read the implementation details in Gatsby's docs because you are missing the required plugins and details in your gatsby-config.js such as:
module.exports = {
plugins: [`gatsby-plugin-styled-components`],
}
That's not true at all, you can customize the HTML output (because Gatsby allows you to do it) and manipulate it as you wish, adding the needed meta tags (which is not the solution to your issues). Simply run:
cp .cache/default-html.js src/html.js
Or manually copy the default-html.js from .cache folder to /src and rename it to html.js. If Gatsby, when compiling your project, finds that file under /src folder, will use it as a "template" for your compiled code. It will look like:
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
Outside the scope of the question. I would recommend ignoring the .cache and the public folders by adding them in the .gitignore file. They are autogenerated in each project compilation and it may lead you to some Git conflicts (unless you are the only contributor) but it's a good practice to don't push it to avoid noise in the repository.
I've cloned the PerfectTemplate project and am using it to serve up html as follows…
import PerfectHTTP
import PerfectHTTPServer
var routes = Routes()
routes.add(method: .get, uri: "/test") { request, response in
response.addHeader(.contentType, value: "text/html")
response.setBody(string: """
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Welcome">Hello</div>
</body>
</html>
""")
response.completed()
}
routes.add(method: .get,
uri: "/**",
handler: StaticFileHandler(documentRoot: "./webroot", allowResponseFilters: true).handleRequest)
try HTTPServer.launch(name: "localhost",
port: 8181,
routes: routes,
responseFilters: [(PerfectHTTPServer.HTTPFilter.contentCompression(data: [:]), HTTPFilterPriority.high)])
I'm compiling and running with Xcode, and http://localhost:8181/test is returning the html as expected.
The problem is the location of the external css file. As far as I can tell this should be in a folder called webroot, but where should that folder be when running locally?
For reference, I'm coming at this as an iOS dev, so my knowledge of web development and server config is limited.
Update
Per a suggestion on the Perfect Slack group, I added the css file to the project folder (the same folder as Package.swift), and set the Working Directory of the scheme $(PROJECT_DIR) - but I’m getting a 404 trying to load http://localhost:8181/style.css
With help from the Perfect Slack group, I found a solution. The missing piece for me was the webroot folder. I'd assumed this was some kind of alias, but it turns out that you do need to create an actual folder called webroot. So…
Set the Working Directory of the scheme to $(PROJECT_DIR)
In the project folder, create a folder named webroot and add the css file to that folder. It should look like this…
I'm sure all the seasoned web devs are laughing at me right now!
I just started trying ES6 and i already got stuck with ES6 modules. I use babeljs for translating ES6 into ES5. My understanding is, that babel uses requirejs module loader behind the scenes to make the import happen.
So i am trying to set up a very basic sample of module loading but i cannot get it working.
I want to import a module from bar.js into index.html. Those files have same parent directory.
index.html code:
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/babel-standalone#6.22.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
</head>
<body>
<script type="text/babel">
console.log("Here we go.");
import {foo} from 'bar';
console.log(typeof foo);
</script>
</body>
</html>
bar.js code:
export function foo() {
console.log("Foo it!");
}
I get following error:
Uncaught Error: Module name "bar" has not been loaded yet for context:
_. Use require([])
Even more interesting thing happens when i change order of require.min.js and babel.min.js in the <head>. This time the text/babel script is not executed at all (no errors in console).
Could somebody, please, explain what is wrong? Or is this completely bad approach?
Please, do not suggest using bundlers like webpack. I dont want to use them yet.
I followed The Bower installation method to install the Polymer library as recommended on the Polymer Project website. Specifically, I ran these commands from the root of my project's live web folder. The OS is Amazon Linux:
bower init
bower install --save Polymer/polymer#^1.2.0
bower update
This generated the following files/folders:
/bower.json
/bower_components/*
/bower_components/polymer/*
/bower_components/webcomponentsjs/*
To test whether the libraries were successfully installed, I went ahead and grabbed one of the examples from the tutorial and tried it out. Only the first line of this code comes into question, but I'm including all of it to dispel concerns that the code here is at fault:
elements/proto-element.html
// THIS is the line that doesn't work. The file exists, it was
// installed in the correct location. However, the polymer.html file
// itself appears to be broken
<link rel="import" href="../bower_components/polymer/polymer.html">
// HOWEVER, if I change it to link the library in from the web, everything
// works perfectly. As in this example:
<!--<link rel="import" href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">-->
<polymer-element name="proto-element">
<template>
<span>Hello World.</span>
</template>
<script>
Polymer({
ready: function() {
}
});
</script>
</polymer-element>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>
I examined the polymer.html file in question. The file that bower installed is completely different from the one available on the web. I guess my question is - is the bower install of Polymer just broken? Why is Bower installing a version other than the active stable release? Am I missing something?
If you open the web version's code, it is clearly marked as version 0.5.5, even though it is being pulled from the /1.0/ pool.
The bower version has no version markers in the code so I'm not sure which one it is, though I have to assume it is the latest 1.2.x stable release because that was specified in the install command. I'll note that I did try it without specifying any version as well (supposed to just install the very latest then) but that still didn't work.
Conclusion
The libraries Bower installed were working files after all. The problem was that the examples I had pulled from the "Getting Started" tutorial on the Polymer-Project.org website were outdated. Be very careful to select v. 1.0 from the top right hand corner.
It's not going to work as you're using the old way of declaring elements (pre v0.8).
Here's how you declare new elements:
<dom-module id="my-element"> <!-- ID must be the same as that of the name of the element you declared. -->
<template> <!-- Styles used to be declared outside the template v0.8 to v1.0. At v1.1 it is now declared inside the template (the outside declaration still works, it's just slow and discouraged). -->
<style>
:host {
display: block;
}
</style>
<div>Hello {{name}}.</div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element', // you must declare the name of your element
properties: { // declare your element's properties here
name: {
type: String,
value: 'Neil'
}
}
});
</script>
Also, the official hub/CDN for the library is at http://polygit.org, not at the official website.
What is the right way to copy bower resources using gulp.
I want a task "build" (for dev) that will:
Transforme /src/index.jade to /build/index.html
Copy bower resources to /build/vendor/*
Copy my resources to /build/css, js, assets
Inject this resources (my and bower's) in index.html
I'm having trouble with "font awesome", because they resources (.ttf, .otf...) are referenced in font-awesome.css as: "../font/fontawesome-webfont.ttf"
I tried with wiredep, that copied js and css to /vendor (no folder structure) and did not copied the fonts.
I also tried with main-bower-files, that also copied all resources (and fonts) to /vendor folder but also with no inner structure
And tried with bowerNormalizer, that create a folder structure like "/vendor/font-awesome//" (invalid too)
And, finally, tried with gulp-bower-files, that copied all bower files (min, dist, src), that is not right also
PS: I don't want min/uglify/concat right now. This things will be done later, at "dist" task
Another approachment:
suposing you have installed:
gulp
run-sequence
main-bower-files
gulp-inject
if you dont, you can install with npm like:
npm install gulp run-sequence main-bower-files gulp-inject --save-dev
Saving your dependencies into html file
Once you have it we start to configure the gulp tasks
//Here we only copy files to folder inside source code.
//In this case ./src/lib/
gulp.task("bower:copyfiles", function(cb){
return gulp.src(mainBowerFiles())
.pipe(gulp.dest('./src/lib'))
cb();
});
//This task is the one wich insert the script tag into
// HTML file. In this case is index.html and is in root
gulp.task('bower:insertfiles', function(cb){
return gulp.src('./src/index.html') //file with tags for injection
.pipe(inject(gulp.src(['./src/lib/*.js', './src/lib/*.css'], {read: false}), {
starttag: '<!-- bower:{{ext}} -->',
endtag: '<!-- endbower -->',
relative:true
}
))
.pipe(gulp.dest('./src')); //where index.html will be saved. Same dir for overwrite old one
})
//And this task will launch the process of copy and include into index.html
gulp.task('bower:buildlib', function(cb) {
runSequence('bower:copyfiles', 'bower:insertfiles',cb);
})
Now we have half process, we need to insert the tags into index.html to let gulp know where has to include the content
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- bower:css -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- HERE WILL BE INSERTED THE CODE. -->
<!-- endbower -->
</body>
</html>
and the last step is run our task in command line
gulp bower:buildlib
Notes:
Is known some libraries installed with bower has different file configuration. f.e.: when you install bootstrap, css files are not included because inside bower.json (in the library folder on bower_components or whatever you have) is set in that way. You can fix this overwriting these options in the bower.json on your project root directory adding it like this (same bootstrap example):
"overrides":{
"bootstrap":{
"main":[
"dist/js/bootstrap.js",
"dist/css/bootstrap.min.css",
"less/bootstrap.less"
]
}
}
this way you set wich files are going to be include and wich ones not.
I solved this problem like this:
gulp.task('move', ['yourDependencies'], function(){
gulp.src(['bower_components/*.js', 'bower_components/somefile'], {
base:'.bower_components/somepath'
})
.pipe(gulp.dest(build/vendor/);
}
the base options defines the base dir of the file (that means it will not create the same dirs in the build folder). For more explanations visit: Why does gulp.src not like being passed an array of complete paths to files?
I do not know how to transform .jade - files into .html files (i'm sorry).
The inject thing can be solved with the gulp-inject plugin:
https://www.npmjs.com/package/gulp-inject
Sorry for my bad english :-)