Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE REQUEST] Add browsersync? #2134

Open
robdodson opened this Issue May 31, 2016 · 46 comments

Comments

Projects
None yet
@robdodson
Copy link
Contributor

robdodson commented May 31, 2016

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

This comment has been minimized.

Copy link

oneezy commented May 31, 2016

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
image


Alright... I made my argument. Lol

@FredKSchott

This comment has been minimized.

Copy link
Contributor

FredKSchott commented May 31, 2016

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.

@FredKSchott FredKSchott self-assigned this May 31, 2016

@justinfagnani

This comment has been minimized.

Copy link
Contributor

justinfagnani commented Jun 1, 2016

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

This comment has been minimized.

Copy link
Contributor Author

robdodson commented Jun 1, 2016

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

@JGSolutions

This comment has been minimized.

Copy link

JGSolutions commented Jun 5, 2016

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

This comment has been minimized.

Copy link

oneezy commented Jun 5, 2016

@JGSolutions , have a look at issue #835

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

@justinfagnani

This comment has been minimized.

Copy link
Contributor

justinfagnani commented Jun 7, 2016

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

@kpgarrod

This comment has been minimized.

Copy link

kpgarrod commented Jul 18, 2016

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

This comment has been minimized.

Copy link

JGSolutions commented Jul 20, 2016

@kpgarrod Thanks man! works great!

@kpgarrod

This comment has been minimized.

Copy link

kpgarrod commented Jul 20, 2016

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.

@FredKSchott FredKSchott changed the title Add browsersync? [FEATURE REQUEST] Add browsersync? Aug 2, 2016

@pomber

This comment has been minimized.

Copy link

pomber commented Oct 8, 2016

@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

This comment has been minimized.

Copy link

oravecz commented Nov 20, 2016

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

This comment has been minimized.

Copy link
Contributor Author

robdodson commented Nov 21, 2016

@oravecz

  1. we just haven't gotten to it yet
@oravecz

This comment has been minimized.

Copy link

oravecz commented Nov 22, 2016

:) thanks

On Mon, Nov 21, 2016 at 4:07 PM Rob Dodson notifications@github.com 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

This comment has been minimized.

Copy link
Contributor

TimvdLippe commented Dec 2, 2016

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

This comment has been minimized.

Copy link

maddyjolly2112 commented Jan 15, 2017

@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

This comment has been minimized.

@kevin-smets

This comment has been minimized.

Copy link

kevin-smets commented Jan 23, 2017

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

@maddyjolly2112

This comment has been minimized.

Copy link

maddyjolly2112 commented Jan 24, 2017

@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

This comment has been minimized.

Copy link

kevin-smets commented Jan 24, 2017

@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

This comment has been minimized.

Copy link

andrewspy commented Jan 25, 2017

@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 polymer-cli@0.17 running on Windows10.

Thanks!

@kevin-smets

This comment has been minimized.

Copy link

kevin-smets commented Jan 25, 2017

My config:

globally: polymer-cli@0.17
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

This comment has been minimized.

Copy link

andrewspy commented Jan 25, 2017

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

@andrewspy

This comment has been minimized.

Copy link

andrewspy commented Jan 25, 2017

@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

This comment has been minimized.

Copy link

kpgarrod commented Jan 25, 2017

@andrewspy

This comment has been minimized.

Copy link

andrewspy commented Jan 25, 2017

@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

This comment has been minimized.

Copy link

maddyjolly2112 commented Jan 25, 2017

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

@fafcrumb

This comment has been minimized.

Copy link

fafcrumb commented Jan 29, 2017

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

This comment has been minimized.

Copy link

rchrdnsh commented May 2, 2017

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

@Pablo-Aldana

This comment has been minimized.

Copy link

Pablo-Aldana commented May 27, 2017

+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

This comment has been minimized.

Copy link

bforrester722 commented May 27, 2017

"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

This comment has been minimized.

Copy link
Contributor

stramel commented May 27, 2017

@bforrester722 is your localhost running on 8080?

@bforrester722

This comment has been minimized.

Copy link

bforrester722 commented May 27, 2017

C:\Users\mine\Documents\clones\andiamo>npm start

polymer-starter-kit@1.0.0 start C:\Users\mine\Documents\clones\andiamo
polymer serve | npm run watch

polymer-starter-kit@1.0.0 watch C:\Users\mine\Documents\clones\andiamo
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

This comment has been minimized.

Copy link
Contributor

stramel commented May 27, 2017

@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

This comment has been minimized.

Copy link

danizord commented May 27, 2017

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

@stramel

This comment has been minimized.

Copy link
Contributor

stramel commented May 27, 2017

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

@bforrester722

This comment has been minimized.

Copy link

bforrester722 commented May 28, 2017

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

@robertosobachi

This comment has been minimized.

Copy link

robertosobachi commented Jun 16, 2017

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

This comment has been minimized.

Copy link

isochronous commented Jul 17, 2017

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

@muhajirdev

This comment has been minimized.

Copy link

muhajirdev commented Aug 27, 2017

does it works now?

@jukbot

This comment has been minimized.

Copy link

jukbot commented Oct 28, 2017

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

@dman777

This comment has been minimized.

Copy link

dman777 commented Jan 14, 2018

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

@arodic

This comment has been minimized.

Copy link

arodic commented Jan 14, 2018

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

@jukbot

This comment has been minimized.

Copy link

jukbot commented Aug 15, 2018

any progress so far?? :/

@dman777

This comment has been minimized.

Copy link

dman777 commented Aug 15, 2018

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.

@aomarks aomarks transferred this issue from Polymer/polymer-cli Jan 3, 2019

@masonlouchart

This comment has been minimized.

Copy link

masonlouchart commented Jan 14, 2019

It could have been a great Christmas gift. Dammit!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.