polymerreloadwatchpolymer-cliserve

Watch and reaload for polymer serve / polyserve?

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.

Solution

  • 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)