Skip to content

Instantly share code, notes, and snippets.

@MrOrz
Last active July 22, 2018 15:36
Show Gist options
  • Save MrOrz/4f3da17fd73dbb4c7668 to your computer and use it in GitHub Desktop.
Save MrOrz/4f3da17fd73dbb4c7668 to your computer and use it in GitHub Desktop.
Cross-device BrowserSync with webpack demo

BrowserSync with webpack

Tested under webpack-dev-server 1.7.0.

  1. Clone this gist
  2. npm install
  3. npm start
  4. Visit http://localhost:8080 (or http://192.168.x.x:8080) on multiple devices
  5. Edit entry.js and hit save
  6. Watch the page updates itself across multiple devices

This demo opens up a "backend" server that serves index.html, which can be any web application in the real-world scenario. We use --content-base-target option (which is never documented and will be deprecated soon) to proxy requests that it can't handle to our backend server.

It is worth noting that we use neither the --inline option nor the <script src="http://localhost:8080/webpack-dev-server.js" here, because in the both case the socket.io client in the webpack-dev-server runtime tries to connect to localhost, even on 'remote' devices that webpack-dev-server does not run on. Instead, we specify 'webpack-dev-server/client?/' to be the output entry in order to instruct the webpack-dev-server runtime to connect to "/", which is hostname-agnostic and works across multiple devices.

/* entry.js */
document.write("<h1>Hello World!</h1>");
<script src="./bundle.js"></script>
{
"name": "testhmr",
"version": "1.0.0",
"description": "",
"main": "entry.js",
"dependencies": {
"webpack": "^1.7.3"
},
"devDependencies": {
"webpack": "^1.7.3",
"webpack-dev-server": "^1.7.0"
},
"scripts": {
"start": "npm run start-backend & npm run start-dev-server",
"start-backend": "python -m SimpleHTTPServer 5000",
"start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' webpack/hot/dev-server ./entry --hot --host 0.0.0.0 --content-base-target 'http://127.0.0.1:5000'"
},
"author": "",
"license": "MIT"
}
@juangl
Copy link

juangl commented Sep 6, 2016

Is it deprecated already?

@sukrosono
Copy link

you may try Atom plugin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment