Watch and reaload for polymer serve / polyserve?

Question

I'm trying to figure out a way to make polyserve / polymer-cli to reload my browser each time a "watched" file changes but I haven't found anything apart of adding Livereload to the HTMLs files that I think is going to be a mess due that when developing web components I load separate HTML files.

Answer 1

For auto reloading using Polymer CLI as a server in your project you should have node / yarn installed. Then you need to install browser-sync locally.

npm install -D browser-sync

or

yarn add browser-sync --dev

Your package.json file will need to look something like:

{
  "name": "MY-ELEMENT",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "npm run serve | npm run watch",
    "serve": "polymer serve --port 8080",
    "test": "polymer test",
    "watch": "browser-sync start --proxy localhost:8080 --open --startPath \"components/MY-ELEMENT\" --files \"**/*.html\""
  },
  "devDependencies": {
    "browser-sync": "^2.18.13"
  }
}

(If its a regular Polymer app you should remove the --startPath argument as that is for Polymer component development)

Answer 2

I'm using polyserve-watch which watches, serves and reloads webcomponents using polyserve and browser-sync``.

Best regards