5

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.

AlbertoFdzM
  • 1,023
  • 11
  • 24
  • 1
    There's a [PR](https://github.com/PolymerLabs/polyserve/pull/135) in progress for this feature. You could wait for that to land, or update your build to use `gulp` and add a live reload plugin (such as [`browsersync`](https://browsersync.io/docs/gulp)). You could also peek at [Polymer Starter Kit 1.3.0](https://github.com/PolymerElements/polymer-starter-kit/releases/tag/v1.3.0) (old) to learn from their `browsersync` usage. – tony19 Dec 28 '16 at 09:43

2 Answers2

9

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)

AlbertoFdzM
  • 1,023
  • 11
  • 24
David Douglas
  • 10,377
  • 2
  • 55
  • 53
  • Thanks a lot! It worked. If anybody run the server under https like me remember to pass `--https` to `browser-sync` to work properly. – AlbertoFdzM Nov 29 '17 at 13:52
  • 1
    If someone is using polymer-cli and request for live-reload, I think that means he/she already has `npm` or `yarn` installed. – vdegenne Apr 02 '18 at 01:19
1

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

Best regards

Yves Lange
  • 3,914
  • 3
  • 21
  • 33
  • polymer-watch Unpublished On Sat Aug 15 2020 15:53:36 GMT+0800 (China Standard Time) https://developer.aliyun.com/mirror/npm/package/polyserve-watch. – brian burnett Sep 30 '20 at 23:11
  • Yes you don't need it anymore. I have unpublished it because you have a lot of better tools like es-dev-server – Yves Lange Oct 02 '20 at 06:40