Tools: [FEATURE REQUEST] Add browsersync?

[robdodson]

A very much loved feature of PSK is browsersync which is kind of like an improved version of live reload. We include this by default in the PSK gulpfile so running gulp serve will start up a local server running browsersync and users can just start playing with their app on different devices. Have you all given any thought toward including something like this in CLI?

[oneezy]

Not only loved...
I honestly CAN'T LIVE without it!

• 24,326 developers in the last day
• 161,678 developers in the last week
• 694,946 developers in the last month

Would agree.

---

@addyosmani

---

Alright... I made my argument. Lol

[FredKSchott]

This is definitely something we want to add support for, but recently we've had to prioritize other work (Windows support, etc). In the meantime, PRs are always welcome.

[justinfagnani]

This is one of those features where I wonder if it belongs as a built-in option, or if it should be easy to add via a Gulp integration. We desperately need to define and implement our extension points, so I'm tempted to say that we should wait on this and see if it can help as a use case for extensions.

[robdodson]

Yeah by all means, work on the extension points first :)

[JGSolutions]

Quick question! So if I started a project and I am half way through it. Then eventually this browsersync feature gets added to the polymer-cli will it be easy for me to update my current project?

By doing this: npm update -g polymer-cli will it do the job?

[oneezy]

@JGSolutions , have a look at issue #835

It goes into a bit more depth of how things are going to be handled.

[justinfagnani]

We're working on the hooks now, we'll see where this fits in after they're in.

[kpgarrod]

I just created my first project with polymer-cli and hit this limitation. It is quite straightforward to run browser-sync alongside polymer serve. In case it helps somebody, here's what I did:

1. npm init inside your project directory to create a package.json file
2. npm install browser-sync --save-dev in the same directory
3. add a start script to package.json:

,
  "scripts": {
    "test": "polymer test",
    "start": "browser-sync start --proxy localhost:8080 --files 'src/*.html, src/*.js, images/*' "
  },

Then you can just run npm start in a second terminal tab alongside polymer serve
It takes the pain away.

[JGSolutions]

@kpgarrod Thanks man! works great!

[kpgarrod]

A small improvement:

"scripts": {
    "dev": "polymer serve & npm run watch",
    "test": "polymer test",
    "watch": "browser-sync start --proxy localhost:8080 --files 'src/*.html, src/*.js, images/*' "
  },

Now just npm run dev starts both processes.

[pomber]

@kpgarrod's package.json was not working for me in Windows/VS Code (cmd).
I changed & to |:

"scripts": {
    "dev": "polymer serve | npm run watch",
    "test": "polymer test",
    "watch": "browser-sync start --proxy localhost:8080 --files '*/*.html, src/*.js' "
},

Now it works.

[oravecz]

Is the fact that this very expected feature is still not built-in a sign of?

1. extending polymer-cli is very hard, or
2. it is terrible to have to create a custom build just to add this feature, or
3. it is less horrible to add npm to a bower project just to get this capability

[robdodson]

@oravecz

1. we just haven't gotten to it yet

[oravecz]

:) thanks

On Mon, Nov 21, 2016 at 4:07 PM Rob Dodson [email protected] wrote:

@oravecz https://github.com/oravecz

1. we just haven't gotten to it yet

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Polymer/polymer-cli/issues/230#issuecomment-262067199,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AASK8AT2BVax4153XCoKtpq_axHsL5lMks5rAgf4gaJpZM4IqpFs
.

[TimvdLippe]

Note that polyserve can now proxy requests and therefore polymer serve can do so too. Use proxy-path and proxy-target to define the url to redirect from and the url to your proxy.

[maddyjolly2112]

@pomber ,hi ,i tried working with following :

"scripts": {
    "dev": "polymer serve | npm run watch",
    "test": "polymer test",
    "watch": "browser-sync start --proxy localhost:8080 --files '*/*.html, src/*.js' "
},

it ran and then watching files...but no file changes detected , i tried changing html, js files, can you please help.

[oneezy]

at @maddyjolly2112 , checkout this project
https://github.com/photoshelter/generator-polymer-init-element-scaffold

[kevin-smets]

@maddyjolly2112 for me, this works perfectly. Exactly your config, the only thing I changed is the paths of the html and js files.

[maddyjolly2112]

@kevin-smets ...can you let me know what i should write when i have files in src folder, i am trying with above but it is watching, but not able to get the files changed in the console too.
Can you share yours.

And also did you tried changing the files and live reload in browser?

[kevin-smets]

@maddyjolly2112 this is my package.json:

  "scripts": {
    "lint": "eslint . --ext js,html --ignore-path .gitignore",
    "test": "npm run lint && polymer test",
    "start": "polymer serve | npm run watch",
    "watch": "browser-sync start --proxy localhost:8080 --files 'src/**/*.*' 'index.html' '*.js'"
  }

Your glob statements are just missing the necessary /**/ to allow sub dirs in them I think. Just run npm start and after that, editing index.html or anything in src triggers an instant live reload in the browser.

[andrewspy]

@kevin-smets I can't get it to detect file changes with your package.json setting as well. May I know which version of polymer-cli are you on? I am currently on [email protected] running on Windows10.

Thanks!

[kevin-smets]

My config:

globally: [email protected]
local dev dependency: "browser-sync": "^2.18.6"

Only big difference is I am on OS X, but I would expect browser-sync to normalize between OS-es..

[andrewspy]

@kevin-smets Thanks for the info, just wanted to report that I still have no luck on detecting file changes.

[andrewspy]

@kevin-smets @maddyjolly2112 I finally managed to get it working on detecting file changes by modifying the following watch script:

"watch": "browser-sync start --proxy localhost:8080 --files \"src/**/*.*, index.html, *.js\""

[kpgarrod]

Ah, you had double quotes around your paths.
You could just change them to single quotes for the same effect.
On Wed, 25 Jan 2017, 17:31 andrewspy [e-mail] wrote:

@kevin-smets https://github.com/kevin-smets @maddyjolly2112
https://github.com/maddyjolly2112 I finally managed to get it working on
detecting file changes by modifying the following watch script:

"watch": "browser-sync start --proxy localhost:8080 --files
\"src/*/.*, index.html, *.js\""

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Polymer/polymer-cli/issues/230#issuecomment-275157335,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACDjkRaR1gIpQ3WtpdqV_NYBtNy5SRuvks5rV3jogaJpZM4IqpFs
.

--
Keith Garrod
Phone [phone]
Mobile [phone]

[andrewspy]

@kpgarrod I have tested it with single quotes, and for some reason, single quotes just simply doesn't work. Have to use escape double quotes for it to work.

[maddyjolly2112]

@andrewspy....it worked for me....thanks , i tried with double quotes.

[itsjustbrian]

This works for me but only for reloading on file changes. Other browser sync features like clicks, scroll pos, URL's, etc. aren't working. Just testing with the plain polymer starter kit. I assume it's something to do with the proxying.

[rchrdnsh]

Any update on this? It would indeed be lovely :-)

[Pablo-Aldana]

+1!!! It would be great... just take into account how many seconds a dev spends by clicking in the browser and refreshing, 2secs 3 secs? multiply it by millions of times while developing.. 👯‍♂️

[bforrester722]

"lint": "eslint . --ext js,html --ignore-path .gitignore",
"test": "npm run lint && polymer test",
"start": "polymer serve | npm run watch",
"watch": "browser-sync start --proxy localhost:8080 --files 'src/**/*.*' 'index.html' '*.js'"

Was working great. I messed up my project (PSK1) and started a new clone; now it doesn't work. Just says waiting for localhost. I have a laptop with project and it still works. Tried everything I could think. NPM versions: same, bower: same. Tried copying project from laptop to my computer nothing works. Anybody else having issues?

[stramel]

@bforrester722 is your localhost running on 8080?

[bforrester722]

C:\Users\mine\Documents\clonesandiamo>npm start

[email protected] start C:\Users\mine\Documents\clonesandiamo
polymer serve | npm run watch

[email protected] watch C:\Users\mine\Documents\clonesandiamo
browser-sync start --proxy localhost:8080 --files 'src/*/.' 'index.html' '.js'

[BS] Proxying: http://localhost:8080
[BS] Access URLs:

---

Local: http://localhost:3000

---

UI: http://localhost:3001

---

[BS] Watching files...

[stramel]

@bforrester722 I meant from your polymer serve command. You may try specifying the port to always use 8080 if you are proxying to it.

[danizord]

@bforrester722 this is probably because Polymer CLI used to serve at 8080, but now the last version serves at 8081 by default.

[stramel]

Should be able to use -p 8080 to achieve the same functionality

[bforrester722]

Cool, just changed proxy localhost:8080 to 8081, thanks guys

[robertosobachi]

Forked the polymer-starter-kit 2 and added BrowserSync, Sass, Image Optimisation, SCSSLint and more.. if you wanna use it or contribute to it.

It still runs polymer serve to run the local web server and polymer build for the production version.

To run the local web server use gulp.
To build use gulp build

All settings are in polymer.json.

https://github.com/robertosobachi/polymer-starter-kit

[isochronous]

@kpgarrod for some stupid reason, single quotes in npm scripts don't work in Windows

[muhajirdev]

does it works now?

[jukbot]

any progress? I got an issue
Failed to parse value from storage for notification
from app-localstorage-document.htm

[dman777]

:+1: The npm scripts workaround is great, but would like to see this implemented in the polymer cli also.

[arodic]

The npm workaround does not work with Polymer 3.0 workflow with yarn and flat:true

[jukbot]

any progress so far?? :/

[dman777]

I have found for development I do not need Polymer CLI at all. I can just use browsersync because there is no transpiling in development. For builds, es5 transpiling in build, and linting, then use Polymer CLI.

[masonlouchart]

It could have been a great Christmas gift. Dammit!

[yveslange]

Hi,

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

Best regards

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.