polymer 2.0 with browsersync: a minimal installation / hot reloading

For a minimal polymer (2.0) with browsersync (hot reloading) installation perform the following steps:

  1. Install www.npmjs.com
  2. Install bower.io with: sudo npm install -g bower
  3. Install browsersync.io with: sudo npm install -g browser-sync

Create bower.json with minimal dependencies:


{
  "name": "(...)",
  "main": "(...).html",
  "dependencies": {
    "polymer": "Polymer/polymer#^2.0.0-rc.2"
  },
  "devDependencies": {
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.5"
  },
  "resolutions": {
    "polymer": "^2.0.0-rc.2"
  }
}
    

Execute: bower install

Maintain your code in src folder

Launch browsersync with with: browser-sync start --server src -f "**/*" --serveStatic ./bower_components -b "google chrome" --no-notify

Browsersync will open chrome, serve static files (polymer libs) from bower_components folder and watch src folder. Any changes are going to be automatically pushed to the browser without reloading. Skip the bower_components folder in all imports:

	
<link rel="import" href="polymer/polymer-element.html">
(...)
<script src="webcomponentsjs/webcomponents-lite.js"></script>
	
    

Also see sample project: github.com/AdamBien/polymer-essential

Interested in lean apps? See you at Java EE Workshops at Munich Airport, Terminal 2 and particularly at Building HTML 5 Applications with WebStandards only


NEW online workshop: WebStandards Igniter (online)

Airport MUC workshops: Java EE 7: Bootstrap, Effective, Architectures, Web, React and Angular, Testing and Microservices

Podcast: airhacks.fm and newsletter: airhacks.news

A book about rethinking Java EE Patterns

Comments:

Polymer looks awesome, among other frameworks is most natural and the simplest one. Together with MVC it can be very good stack

Posted by 79.184.255.93 on March 24, 2017 at 02:30 PM CET #

Hi Adam,

I have found polymer as a webcomponent library very useful. However, when using it, I found it hard.

And it is mostly a question to the polymer developers, not you:
Let's say, I just want a simple webpage for my microservices. I don't want to use bower (why the hell would I want to install npm and bower and whatever I don't know toolset).

So is there any way to just download a simple release version of polymer, add it to my webproject, and simply use it?

Thanks

Posted by Csaba on April 03, 2017 at 01:45 PM CEST #

Hi Csaba

Everything of Polymer is on GitHub. Just download what you need and add it to your project manually. But I strongly recommend using a dependency management tool like bower, it does make your life easier!

McPringle

Posted by Marcus on August 27, 2017 at 12:21 AM CEST #

Post a Comment:
  • HTML Syntax: NOT allowed
realworldpatterns.com
Online Workshops
...the last 150 posts
...the last 10 comments
License