javascript - How to get access to webpack-dev-server from devices in local network? - Stack Overflow

admin管理员组

文章数量:1131440

There is some webpack dev server config (it's part of the whole config):

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

I execute webpack with the following command:

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

I can get access to dev server using http://localhost:8080 on my local machine, but I also want to get access to my server from my mobile, tablet (they are in the same Wi-Fi network).

How can I enable it? Thanks!

There is some webpack dev server config (it's part of the whole config):

config.devServer = {
  contentBase: './' + (options.publicFolder ? options.publicFolder : 'public'),
  stats: {
    modules: false,
    cached: false,
    colors: true,
    chunk: false
  },
  proxy: [{
    path: /^\/api\/(.*)/,
    target: options.proxyApiTarget,
    rewrite: rewriteUrl('/$1'),
    changeOrigin: true
  }]
};

function rewriteUrl(replacePath) {
  return function (req, opt) {  // gets called with request and proxy object
    var queryIndex = req.url.indexOf('?');
    var query = queryIndex >= 0 ? req.url.substr(queryIndex) : "";
    req.url = req.path.replace(opt.path, replacePath) + query;
    console.log("rewriting ", req.originalUrl, req.url);
  };
}

I execute webpack with the following command:

node node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --history-api-fallback --debug --inline --progress --config config/webpack.app.dev.js

I can get access to dev server using http://localhost:8080 on my local machine, but I also want to get access to my server from my mobile, tablet (they are in the same Wi-Fi network).

How can I enable it? Thanks!

• javascript
• node.js
• network-programming
• webpack
• web-development-server

Share Improve this question Follow edited Oct 18, 2018 at 17:08 hong4rc 4,08344 gold badges2323 silver badges4242 bronze badges asked Feb 15, 2016 at 14:39 malcoaurimalcoauri 12.2k2828 gold badges8888 silver badges139139 bronze badges 4

• Seems like that should already work, given that the host is set to 0.0.0.0 . – Felix Kling Commented Feb 15, 2016 at 15:03
• @FelixKling but what ip address should I use in Safari of my iPhone for it? – malcoauri Commented Feb 15, 2016 at 18:17
• The IP of the machine where the server runs. – Felix Kling Commented Feb 15, 2016 at 18:23
• 5 I could only get it to work with webpack-dev-server --host=0.0.0.0 --disable-host-check --useLocalIp see github.com/webpack/webpack-dev-server/issues/882 – Nickofthyme Commented Aug 20, 2019 at 1:30

Add a comment  | 

9 Answers 9

Sorted by: Reset to default 293

(If you're on a Mac and network like mine.)

Run webpack-dev-server with --host 0.0.0.0 — this lets the server listen for requests from the network, not just localhost.

Find your computer's address on the network. In terminal, type ifconfig and look for the en1 section or the one with something like inet 192.168.1.111

In your mobile device on the same network, visit http://192.168.1.111:8080 and enjoy hot reloading dev bliss.

You can set your ip address directly in webpack config file:

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}

It may not be the perfect solution but I think you can use ngrok for this. Ngrok can help you expose a local web server to the internet. You can point ngrok at your local dev server and then configure your app to use the ngrok URL.

e.g Suppose your server is running on port 8080. You can use ngrok to expose that to outer world via running

./ngrok http 8080

Good thing about ngrok is that it provides a more secure https version of exposed url which you give to any other person in the world to test or show your work.

Also it has lots of customization available in the command such as set a user friendly hostname instead of random string in the exposed url and lots of other thing.

If you just want to open your website to check mobile responsiveness you should go for browersync.

I could not comment in order to add additional information to forresto's answer, but here in the future (2019) you'll need to add a --public flag due to a security vulnerability with --host 0.0.0.0 alone. Check out this comment for more details.

In order to avoid "responding to other answers" as an answer here's forresto's advice plus the additional details you'll need to make this work:

Add both:

--host 0.0.0.0

and

--public <your-host>:<port>

where your-host is the hostname (for me it is (name)s-macbook-pro.local)) and port is whatever port you're trying to access (again, for me it's 8081).

So here's what my package.json looks like:

  "scripts": {
    ...
    "start:webpack": "node_modules/.bin/webpack-dev-server --host 0.0.0.0 --public <name>s-macbook-pro.local:8081",
    ...
  },

I found this thread while searching for a solution that would satisfy the following requirements:

• automatically open URL using the public IP. For example, http://192.168.86.173:8080. So it could be copied from the browser and sent to another device in the network.
• dev server is available in the local network.

Webpack 4

devServer: {
  host: '0.0.0.0',
  useLocalIp: true,
}

Webpack 5

devServer: {
  host: 'local-ip',
}

For me, what helped eventually was adding this to the webpack-dev-server config:

new webpackDev(webpack(config), {
    public: require('os').hostname().toLowerCase() + ':3000'
    ...
})

and then also changing babel's webpack.config.js file:

module.exports = {
    entry: [
        'webpack-dev-server/client?http://' + require('os').hostname().toLowerCase() + ':3000',
        ...
    ]
    ...
}

Now just get your computer hostname (hostname on OSX's terminal), add the port you defined, and you're good to go on mobile.

Compared to ngrok.io, this solution will also let you use react's hot reloading module on mobile.

With webpack-dev-server v4.0.0+ you need

devServer: {
  host: '0.0.0.0',
  port: 8030,
  allowedHosts: ['all'] // or use 'auto' for slight more security
}

If you tried everything stated in the other answers here, without success... also make sure there's no firewall running on you machine(s) or open the needed ports on it.

I setup webpack so it shows an ASCII qr code on the console. This is rough first try:

1. In webpack.config add a custom plugin:

plugins: [new MyWebpackPlugin_shows_URL_as_qrcode({ options: true })],

2. The plugin file: MyWebpackPlugin_shows_URL_as_qrcode.js

/**
 * This is a webpack plugin. It is specified in the webpack.config*.js file.
 * It is not necessary, it just shows a qr code in console for the url.
 * It is a way to run custom javascript code as part of a webpack build.
 * Followed https://webpack.js.org/contribute/writing-a-plugin/ I dont really know what's going on but it works.
 */

// var qrThing = require('./commandLine-get-QRcode')
const {abc, doAllQR} = require('./commandLine-get-QRcode')

// import { doAllQR } from './commandLine-get-QRcode'

class MyWebpackPlugin_shows_URL_as_qrcode {
  apply(compiler) {
    compiler.hooks.done.tap(
      'This is MyWebpackPlugin_shows_URL_as_qrcode 1',
      (
        stats /* stats is passed as an argument when done hook is tapped.  */
      ) => {
        console.log('This is MyWebpackPlugin_shows_URL_as_qrcode 2!');
        // var zz = new qrThing() // this causes the doAllQR() function to run ??
        doAllQR()
      }
    );
  }
}

module.exports = MyWebpackPlugin_shows_URL_as_qrcode;

3. File commandLine-get-QRcode.js:

const si = require('systeminformation');
var jp = require('jsonpath');
var QRCode = require('qrcode')

/** this is commandLine-get-QRcode.js
 *  Run as: "node commandLine-get-QRcode.js"
 *  Edit around line 49 to change the url path.
 *  It also gets called by a webpack plugin in this folder. 
 *  It shows the current url as a qrcode. The address is the IP address, not localhost
 *  so a phone can read and go to the url.
 *  It uses the 'systeminformation' package to get the current IP
 *  It uses the 'jsonpath' package to parse above output
 *  It uses the 'qrcode' package to generate a qr on the console using ascii
*/ 
// add these libaries to local development system
// BUT NOT TO THE PACKAGE LIBRARY TO BE PUBLISHED
// npm i systeminformation
// npm i jsonpath

// uses npm package systeminformation to get system info like processor, network info etc.
// Its used here to get the network interface handling Wi-Fi and get its IP address

// decide if I'm called as a command line utility or by webpack plugin:
var argsExceptNodeAndThisFile = process.argv.slice(2)
// when called from a webpack plugin, arg[0] is 'serve'; it calls doAllQR() itself to dont do here.
if (argsExceptNodeAndThisFile[0] !== 'serve') doAllQR(); // I'm a command line utility..
// console.log('cccccccccc ' + argsExceptNodeAndThisFile[0])

function doAllQR() {
  //promises style - new since version 3
  // si.cpu()
  //   .then(data => console.log(data))
  //   .catch(error => console.error(error));

  // si.wifiConnections()
  //   .then(data => { 
  //       console.log(data) 
  //       console.log(data[0].iface)
  //   })
  //   .catch(error => console.error(error));

  var activeIpAddr
  // get my ip address. May be ethernet connection or Wi-Fi
  si.networkInterfaces().then(data => {  
    activeIpAddr = jp.query(data, "$..[?(@.iface=='Ethernet')]");
    if (!activeIpAddr) {
      // I'm not on ethernet, now try wifi
      activeIpAddr = jp.query(data, "$..[?(@.iface=='Wi-Fi')]");
    }
    activeIpAddr= activeIpAddr[0].ip4
    //                             ^^^ NO VEE NOT IPV4 JUST IP4 !!!!
    // now compose a url and show in console as a qr code
    theURL="http://" + activeIpAddr + ":3000/cars/chevrolet/corvair"
    console.log(theURL)
    QRCode.toString(theURL, {type:'terminal', small:true }, function (err, message) {
        console.log(message)
    })
  })
  .catch(error => console.error(error));

  /* jsonPathQuery = "$..*[?(@.thekey=='corvair')]"
                      ^ $ is root of tree
                      ^^ 2 dots is "Recursive descent" drill-down operator
                      ^ wildcard "anything within the tree having next thing" */
}

function abc() {
   console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
}
 
//export { doAllQR }

// these get exported to the webpack plugin
module.exports = { abc, doAllQR };

本文标签： javascriptHow to get access to webpackdevserver from devices in local networkStack Overflow