CODEWITHSUNDEEP
polymerpolymer-2.x
Jürgen Brandstetter
Jürgen Brandstetter

Reputation: 7354

How do I build a Polymer 2.x project with Polymer CLI?

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.

Upvotes: 3

Views: 3512

Answers (2)

tony19
tony19

Reputation: 138696

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:

  1. 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

  2. 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/.

  3. 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

Upvotes: 0

Phani
Phani

Reputation: 1901

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

Upvotes: 2

Related Questions