browser-sync?

[kosirm]

Is there a way to use browser-sync with npm start maybe (for faster development?)
I changed one line and added one line to package.json:

"start": "polymer serve & npm run watch",
"watch": "browser-sync start --port 8080 --ui-port 8080 --proxy 127.0.0.1:8000 --files 'src/*.html, src/*.js, images/*' ",

... since I'm developing on c9.io where only ports 8080 and 8081 are opened.
Browser sync is connected, but I still need to refresh the page to see changes in my files...

[Dabolus]

browser-sync supports proxy mode, so you can easily adapt the npm start script to make it work correctly.
For example, if you are using a shell like bash (the default shell on MacOS and on many Linux distributions) you can replace the npm start script with this command:

polymer serve -p 8081 & browser-sync start --proxy 'localhost:8081' --port 8080
# You might also need to specify the files/directories to watch using the '--files' arg

The single & tells your shell to run the commands in the background, so that they can run in parallel.

If your shell does not support &, then you should go with something like npm-run-all or concurrently.

[kosirm]

Thanks, Your command is working fine as well, but the page still doesn't get reloaded. I tried concurrently , same result. Watch doesn't work.

[OSUblake]

I've used npm-run-all like this.

"start": "npm-run-all -p serve watch",
"serve": "polymer serve",
"watch": "browser-sync start --proxy localhost:8081 --files \"src/**/*.*, index.html, images/*\"",

[kosirm]

Thanks @OSUblake, also your solution is working fine, but it doesn't solve my problem (I got browser-sync connected from the beginning. ) Problem is, that browser-sync doesn't reload the page on change (on save), so watch is not working properly. I think that the problem is somewhere in browser-sync and polymer serve communication, but this is just my unqualified assumption.

This is my terminal log after your commands:

infocube:~/workspace/my-app (master) $ npm start

> pwa-starter-kit@0.9.0 start /home/ubuntu/workspace/my-app
> npm-run-all -p serve watch


> pwa-starter-kit@0.9.0 watch /home/ubuntu/workspace/my-app
> browser-sync start --proxy 'localhost:8081' --port 8080 --ui-port 8082 --files 'src/*.html, src/*.js, images/*'


> pwa-starter-kit@0.9.0 serve /home/ubuntu/workspace/my-app
> polymer serve

[Browsersync] Proxying: http://localhost:8081
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:8080
    External: http://172.17.0.48:8080
 ------------------------------------
          UI: http://localhost:8082
 UI External: http://localhost:8082
 ------------------------------------
[Browsersync] Watching files...
info: [cli.command.serve]    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/pwa-starter-kit/

I tried many possible browser-sync command line options like --reload-delay, --cwd, etc., but none of them is solving my problem.
Thanks again for your help!

[OSUblake]

Hmm... I just tested it, and it's working fine for me. This is what my terminal is showing. It looks pretty much the same as yours except for the UI External url, but I don't know if that would cause a problem.

$ npm run start

> my-app@0.1.0 start c:\Users\Blake\Desktop\my-app
> npm-run-all -p serve watch

> my-app@0.1.0 serve c:\Users\Blake\Desktop\my-app
> polymer serve

> my-app@0.1.0 watch c:\Users\Blake\Desktop\my-app
> browser-sync start --proxy localhost:8081 --port 8080 --ui-port 8082 --files "src/*.html, src/*.js, images/*"

[Browsersync] Proxying: http://localhost:8081
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:8080
    External: http://192.168.1.146:8080
 --------------------------------------
          UI: http://localhost:8082
 UI External: http://192.168.1.146:8082
 --------------------------------------
[Browsersync] Watching files...
info: [cli.command.serve]    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/my-app/

[Browsersync] Reloading Browsers...

On my computer, it can take a minute or two for polymer serve to start working. And sometimes I have to go to the browser-sync UI page and click reload all before it will show up in the current connections.

[kosirm]

Thanks, @OSUblake
Yes, I can "SYNC ALL" via Browsersync UI page, and it is working fine, but that's more work than pressing F5 😃 ... and purpose of Browsersync is exactly that smooth DX with auto-reload. Well, I can't figure out, where is the problem. Maybe on my local box it would work fine, I haven't tried yet.

[OSUblake]

I was trying to say that sometimes on start up I have to go the UI page and click the reload all button before it starts auto-reloading, not every time.

But I'm all out of ideas.

[kosirm]

Yeah, thanks a lot! @OSUblake It's not a big deal, really, just annoying... thanks for your terminal output, so I can see that [Browsersync] Reloading Browsers... doesn't get fired on my box... but I don't know why.

[kosirm]

I figured out what was the problem with my command... I didn't described subfolders (actions, components, reducers) like this src/**/*.js so this command
"start": "polymer serve -p 8081 & browser-sync start --proxy 'localhost:8081' --port 8080 --ui-port 8082 --files 'index.html, src/**/*.js, images/*'", works like a charm 😄
So, if anyone will ever have the same problem...

[yveslange]

Hi,

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

Best regards