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:
- Install www.npmjs.com
- Install bower.io with:
sudo npm install -g bower
- 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