When I run polymer init, it only shows V2 templates, but I want V1. How do I install Polymer 1.x application/element templates?
There's a pending issue (polymer-cli Issue #804) to restore the 1.x templates. In the meantime, you can manually install them with:
npm i -g justinfagnani/generator-polymer-init-polymer-1-element \
justinfagnani/generator-polymer-init-polymer-1-application
This will allow the 1.x templates to be listed when running polymer init.
Related
Because the Polymer-2.0 is in preview stage, it is not in main branch. I am looking for installation procedure for Polymer-2.0 elements.
I would use bower install iron-pages to install the Polymer 1.x component. So what should I do with the 2.0 components?
You can install the 2.0-preview components:
bower install iron-pages#2.0-preview
Can anyone point me to a tutorial that uses Polymer 2 and polymer-build from Polymer CLI? When I use any example in the polymer-starter-kit and use polymer serve, it works fine; but when I use polymer build and serve the bundled or unbundled directory, I get 404 errors. I have even updated to the newest alpha version of polymer-cli.
Also, using https://github.com/tony19/generator-polymer-init-2-x-app generators have the same problem.
I also spent quit a bit of time to figure this one out. Please use the polymer-cli#next instead of polymer-cli
Plain polymer-cli doesn't seem to have the latest build and optimizations to support Polymer 2.0#Preview related functionality.
You can install polymer-cli#next. In Ubuntu, you can simply use npm install -g polymer-cli#next
Then on, the bundled and unbundled versions of the application generated through polymer build would just works fine.
Edit:
You can find my sample Polymer2.0#Preview version of the code at https://github.com/phani1kumar/phani1kumar.github.io branch is "devmaster".
the sw-precache-config.js is initial render-blocking. This will load all the resources that the main page needs to make the app available for offline use. src/lazy-resources.html loads resources for the next routes.
You would need to get a proper configuration based on your layout and main page in the following 3 files:
sw-precache-config.js, polymer.json, src/lazy-resources.html. This is a practice followed in the shop app from Polymer team, you may opt to a different mechanism for lazy loading. The bottom-line for lazy loading is to load the resources after Polymer.RenderStatus.afterNextRender.
You may also find the following article interesting: https://medium.com/#marcushellberg/how-i-sped-up-the-initial-render-of-my-polymer-app-by-86-eeff648a3dc0#.pi2iucwzi
I noticed a bug in the generator in that the starter-kit subgenerator was missing a dependency on webcomponentsjs, which would cause an error with polymer-build. And as you discovered, polymer.json was also missing dependencies for the polyfill support of webcomponentsjs, which caused 404s on polyfilled browsers (such as Linux Chrome). That's all fixed now in v0.0.6.
You'll also need a version of polymer-build that does not try to uglify the JavaScript, which would fail due to its inability to recognize ES6. The new-build-flags branch of the polymer-cli repo replaces uglify with babili for ES6 minification (added in PR#525). You could check out that branch and build it yourself, or you could install it from here:
npm i -g tony19-contrib/polymer-cli#dist-new-build-flags
For convenience, this branch is added as a devDependency when generating the 2.0 starter kit with generator-polymer-init-2-x-app.
To build and serve a Polymer 2.0 Starter Kit project:
Generate a 2.0 Starter Kit (using generator-polymer-init-2-x-app, v0.0.6 or newer) by selecting 2-x-app - starter application template:
$ polymer init
? Which starter template would you like to use?
...
2-x-app - (2.0 preview) blank application template
2-x-app - (2.0 preview) blank element template
❯ 2-x-app - (2.0 preview) starter application template
After the project generator finishes, build the project with yarn build:
$ yarn build
info: Deleting build/ directory...
info: Generating build/ directory...
info: Build complete!
Note that the output is only build/, and no longer build/bundled/ and build/unbundled/.
Serve up the contents of the build directory, and automatically open a browser to it:
$ polymer serve build -o
You could also serve it with a different tool to verify that the build output would work outside of the context of any Polymer tools. Start a Python server in build/, and manually open a browser to it:
$ cd build
$ python -m SimpleHTTPServer
I want to view this demo of Polymerfire in my browser.
I expect to see the demo run in my browser. Instead, I see a blank page and the following console error.
console.log.error.message
GET http://localhost:8080/ 404 (Not Found)
Navigated to http://localhost:8080/
I used the following procedure:
I installed the Polymer-CLI multi-tool per the instructions found here.
I created a project using the Polymer Starter Kit (PSK).
I named the project my-app.
I installed the Github repo found here using the CLI:bower install ---save firebase/polymerfire
I opened the terminal and navigated to the app's root directory.
cd path/to/my-app
I ran the following Polymer-CLI command (per the instructions found here).polymer serve
What can I do to try and solve this so I can see the demo run in my browser?
The best way to run an elements demo is to check it out...
git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
I have never tried to run the demos from a bower install'd folder but, the above method will work.
You also have to navigate to the correct localhost path:http://localhost:8080/components/polymerfire/demo/
So the complete procedure (from the command line) is:
First, install the polymer-cli per the instructions found here.
npm install -g bower
npm install -g polymer-cli
Then run the following.
shell.sh
git clone https://github.com/firebase/polymerfire.git
cd polymerfire
bower install
polymer serve
open http://localhost:8080/components/polymerfire/demo/
The Polymer Doc suggests to install polymer with:
bower install --save Polymer/polymer#^1.0.0
Why not just this:
bower install --save polymer
#^1.0.0 instructs Bower to install the latest 1.x.x version of Polymer that doesn't increment the first non-zero leftmost number, so anything between 1.0.0 but below 2.0.0 exclusive (thanks to zerodevx for correction). If you omit that and just run bower install --save Polymer/polymer it will install the latest and greatest version.
The Polymer/polymer command instructs Bower to go to GitHub and install from the source code repository. You could potentially use the shorthand polymer by itself, if the Polymer team has officially registered with Bower (I'm not sure). To be safe, just go directly to the source and install via Polymer/polymer.
I don't think there is a reason to install 1.0.0 specifically. You should install the latest and greatest. So it's just a documentation error. I'll create a pull request to change the documentation.
Just a difference in what gets downloaded. The former, adds an extra folder, "core-component-page". Try it yourself ;-)
The number next to the element is just a version...
If your app works with a specific version you can specified like that
I have cloned the git for polymer designer on my mac. Following the getting started instructions for Polymer designer works fine until I run bower install
-bash: bower: command not found
Also index.html cannot be loaded by the local httpserver.
I see this is a standard error but several solutions on stack. I need to setup this tool locally to add a custom library.
You nee to install bower: http://bower.io/#install-bower
npm install -g bower
Try this: bower install --save Polymer/polymer