Stack Overflow
Stack Overflow

Questions tagged [browser-sync]

Related to the browser-sync Node.js module, used to synchronize URLs, interactions and code changes across multiple devices.

Browser-sync is a CLI application to watch files HTML/CSS/JS files for changes and push it to the Browser in real time, kind of like modern LiveReload.

Use npm install -g browser-sync to install it via NPM.

Usage Example:

browser-sync start --files "css/core.css, css/ie.css"
Watch css/core.css and css/ie.css files for changes and reloads the browsers with the changed files.

browser-sync reload --port 4000 --files="*.css"
Reload over http protocol with port.

For more information, see:

934 questions
546
votes
57 answers

Stylesheet not loaded because of MIME-type

I'm working on a website that uses gulp to compile and browser sync to keep the browser synchronised with my changes. The gulp task compiles everything properly, but on the website, I'm unable to see any style, and the console shows this error…
Nick
  • 10,791
  • 6
  • 40
  • 82
262
votes
3 answers

Node update a specific package

I want to update my Browser-sync without updating all my node packages. How can I achieve this? My current version of Browser-sync does not have the Browser-sync GUI :( ├─┬ browser-sync@1.9.2 │ ├── browser-sync-client@1.0.2
Samuel
  • 3,941
  • 5
  • 20
  • 33
46
votes
5 answers

Using the original URL, not proxy, with browser-sync

Recently switched from Grunt.js to Gulp.js as multiple people told me how much better and faster it wa (it's true!). I have added BrowserSync to my Gulpfile.js, making it easier to test on multiple devices. It works great and was simple to setup.…
Tom Oakley
  • 5,218
  • 7
  • 37
  • 64
44
votes
3 answers

npm install multiple package names

What does it do when I run this command: npm install --save-dev package1 package2 It is definitely not installing multiple packages, but it looks to be essential. (For example https://www.browsersync.io/docs/gulp) For me it throws following…
Lukáš Řádek
  • 1,014
  • 1
  • 9
  • 18
38
votes
9 answers

Webpack --watch and launching nodemon?

Thanks to an excellent answer by @McMath I now have webpack compiling both my client and my server. I'm now on to trying to make webpack --watch be useful. Ideally I'd like to have it spawn something like nodemon for my server process when that…
XeroxDucati
  • 4,880
  • 1
  • 28
  • 63
36
votes
4 answers

BrowserSync extremely slow

I would love to use BrowserSync for development. However, page loading (not only reloading after changes) is extremely slow. I use the proxy mode. Browsing the page without BrowserSync is fast as it should be. One reason may be the following error…
Rico Leuthold
  • 1,865
  • 4
  • 32
  • 47
35
votes
11 answers

BrowserSync Cannot GET /

I only have installed NodeJS and BrowserSync with this command: npm install -g browser-sync After I use this command to start the server: C:\xampp\htdocs\browser_sync λ browser-sync start --server [BS] Access URLs: …
Funny Frontend
  • 3,357
  • 11
  • 29
  • 53
32
votes
3 answers

How do I use vagrant and browsersync with local domain?

I use vagrant and I have it configured to update my etc/host file here's an example. 10.20.1.36 example.dev I can then access the VM's apache server with http://example.dev/ I want to use browsersync from the command line but I haven't been able…
KahunaCoder
  • 587
  • 6
  • 14
29
votes
5 answers

How to disable cross-device action mirroring functionality of BrowserSync? (GhostMode)

Our team used the gulp-angular generator with yeoman to scaffold out our web app. It uses browsersync to handle live reloads, which we want. However, we just deployed to our development server, and now when two developers are using the gulp serve…
turner
  • 1,558
  • 2
  • 12
  • 20
28
votes
1 answer

Webpack watch() with multiple entry points - emitting bundles for non-changed files?

In my webpack.config.js I have 3 separate entry points, one for the JS bundle, one for the main SCSS bundle, and one for a separate SCSS bundle that has no relationship with the main SCSS bundle. When I use the webpack.watch() API, for some reason…
Matthew
  • 898
  • 7
  • 17
28
votes
3 answers

Gulp browser-sync - redirect API request via proxy

I'm trying to redirect my API requests like this with gulp and browser-sync: gulp.task('browser-sync', function () { var files = [ '../index.html', '../views/**/*.html', '../assets/css/**/*.css', '../assets/js/**/*.js' …
alskaa
  • 359
  • 1
  • 3
  • 11
26
votes
8 answers

browser-sync does not refresh page after changes with Gulp

I'm new to Gulp and I wanted to make use of its automatic scss compiling and browser sync. But I can't get it to work. I stripped everything down to leave only the contents of the example on the Browsersync…
raichu
  • 638
  • 1
  • 8
  • 15
22
votes
0 answers

WebSocket connection to 'ws://localhost:4000/sockjs-node/612/2pdjfv15/websocket' failed: Connection closed before receiving a handshake response error

I'M using Browser Sync with webpack-dev-server, And facing the issue while using browser sync..!! only form fill up is working, click, scroll is not working in browser sync, and there is no any compile time error occurring, But above things are not…
Chintan Sukhadiya
  • 279
  • 3
  • 10
21
votes
2 answers

Browser Sync and watching multiple folders

I'm using browser sync that I installed with NPM to watch my projects as I work on them. Is there a way to get it to watch the root folder and the css folder at once?
Caleb Prenger
  • 309
  • 1
  • 4
  • 10
17
votes
1 answer

Browsersync within a Docker container

I've got a Wordpress/MySQL docker container, which I use for developing themes & plugins. I access this on localhost:8000. It uses a Gulp build process & I am trying to add browsersync to the mix. I'm having a hard time getting the browsersync to…
Chris J Allen
  • 18,148
  • 20
  • 71
  • 109
1
2 3
…
62 63