3

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
Jürgen Brandstetter
  • 7,066
  • 3
  • 35
  • 30

2 Answers2

2

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

Phani
  • 1,851
  • 2
  • 15
  • 28
  • No that doesn't help. I still have the same problems. But compared to @tony19 's `new-build-flags` solution, your solution compiles at least the webworker file. Can you publish a your polymer.json file. Maybe I didn't add some dependencies. – Jürgen Brandstetter Jan 24 '17 at 13:27
  • Updated the answer with additional details. You can find the bundled code generated from `polymer build` in the `master` branch. – Phani Jan 24 '17 at 15:00
  • thank you for adding the publishing our version. The problem were the extraDependencies. For some reason, the `polymer-starter-kit` or the `generator-polymer-init-2-x-app` don't have them included. And therefore it does not work. – Jürgen Brandstetter Jan 24 '17 at 18:07
  • @Phani I noticed your project doesn't use the new ES6 syntax for Polymer 2.0 element definitions. `polymer-cli@next` (`0.18.0-alpha.8`) doesn't yet support ES6 minification, so you'll get Uglify errors if you tried to ran `polymer build` with ES6 code. – tony19 Jan 24 '17 at 21:54
  • Thank you @tony19 for pointing that out. Yes, my current implementation is banking on the hybrid mode that polymer 2.0 supports. And moreover this is a testing application I am building to learn Polymer. I'll have the ES6 syntax classes soon the final version is rolled out by Polymer team. – Phani Jan 25 '17 at 05:01
0

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
tony19
  • 125,647
  • 18
  • 229
  • 307
  • Thank you for the great instructions. After following your instruction I don't get any build error. But it seems that the right documents are still not all copied into the bower folder. Have a look at this gist with the errors https://gist.github.com/BrandiATMuhkuh/d10557ee7bba9dccc06e31b99b4fb5c4 – Jürgen Brandstetter Jan 23 '17 at 17:10
  • @JürgenBrandstetter Odd. I don't see that behavior. I'm on macOS, Chrome 55. What's your environment? Are those files actually missing from your `build/` directory? Did you make any modifications to the steps above? – tony19 Jan 24 '17 at 00:14
  • No I didn't make any modifications on the steps above. Yes the files are missing. When I copy my whole bower directory into the build directory it works. It's seems that everything except webcomponents related things, that means everything that is not specified in the bower file, is not copied over. – Jürgen Brandstetter Jan 24 '17 at 08:41
  • Interesting. What is your OS? – tony19 Jan 24 '17 at 08:44
  • Indeed. The latest Ubuntu version, with the latest node version. – Jürgen Brandstetter Jan 24 '17 at 08:45
  • 1
    It turns out that the `polymer.json` file of `generator-polymer-init-2-x-app` does not include all needed dependencies. Only `bower_components/webcomponentsjs/webcomponents-lite.js`. this file from @Phani seems to do the trick: https://github.com/phani1kumar/phani1kumar.github.io/blob/devmaster/polymer.json – Jürgen Brandstetter Jan 24 '17 at 18:21
  • Thanks for the tip! It's indeed a bug. It seems the other files you listed are required to polyfill Web Components, which is why I didn't see the issue (I was only testing in Chrome, but then saw the symptoms in Firefox after you mentioned the missing file listing in `package.json`). Apparently, Linux Chrome requires the polyfills. I'll fix the generator's `package.json` and test in other browsers besides Chrome. – tony19 Jan 24 '17 at 21:16
  • In the current release of PSK (pre 2.0-preview), the only Web Components file that needed to be listed in `package.json` was `webcomponents-lite.min.js`. Looks like the other files must be listed as well in 2.0-preview. – tony19 Jan 24 '17 at 21:45
  • I reported the [issue](https://github.com/PolymerElements/polymer-starter-kit/issues/961) on the PSK repo, but they just removed the PSK `2.0-preview` branch to avoid chasing a moving target while Polymer `2.0-preview` is still in flux. – tony19 Jan 24 '17 at 23:43
  • All generator issues are fixed in [`v0.0.6`](https://github.com/tony19/generator-polymer-init-2-x-app/releases/tag/v0.0.6). I've updated my answer to help others who might come across this problem. – tony19 Jan 25 '17 at 01:54
  • I have just tried your new v0.0.6 version. A couple things are unexpected: 1) you use `yarn` instead on `npm` 2) service workers file is not created and put into the build folder 3) No minification and bundling is happening otherwise. Get job. – Jürgen Brandstetter Feb 06 '17 at 09:59