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

Question

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!

Solution 1

(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.

Solution 2

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

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

Solution 3

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.

Solution 4

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",
    ...
  },

Solution 5

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.

View more solutions

Comments

[Felix Kling]

Seems like that should already work, given that the host is set to 0.0.0.0 .

[malcoauri]

@FelixKling but what ip address should I use in Safari of my iPhone for it?

[Felix Kling]

The IP of the machine where the server runs.

[Nickofthyme]

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

[moeses]

For me it's working too but i'm getting a blank page. I can scroll and have an site title when i browse through the tabs. Do you maybe have an idea how to fix this?

[TitanFighter]

Also works on Ubuntu 17.10. If ifconfig not installed, IP address can be found via ip addr show

[SeriousLee]

In order to run the dev server with --host 0.0.0.0, should we still update some config file or can I just run npm run dev --host 0.0.0.0? Because currently when I run the command without changing anything it throws an error. If we do have to update some config file, could you pls tel us the file name/directory?

[Vasily Hall]

This worked for me, the value is 0.0.0.0 which worked.

[Vasily Hall]

npm run dev --host 0.0.0.0 throws the error that indicates the program is looking for the "0.0.0.0" as a module name. When I changed the value inside the index.js file of my project to "0.0.0.0" from "localhost", then it worked.

[Roel]

npm run dev is a script that is configured in packages.json, so you should edit it there. Problably it runs "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" or something like that.

[Totty.js]

is ipconfig not ifconfig

[jared]

still working in Dec '18 for me. FYI rather than look for the IP Address in terminal I do the following: cmd + [space] > Network Utility, my IP Address is the second item down. That seems to work every time I try it.

[URL87]

On windows it worked for me with wifi I wrote the host in ipconfig > IPv4 Address

[Tom O.]

Here is how you can add it to your webpack.config.js file: webpack.js.org/configuration/dev-server/#devserverhost

[Thiago]

After 2 years I found the perfect solution. THANK YOU DUDE. --host 0.0.0.0 — this lets the server listen for requests from the network, not just localhost

[Kamal]

This, by far, is the best, dare I say, only answer. Why hasn't it been marked as such?!

[Aurimas]

if you want to avoid editing your webpack configuration you can pass devServer arguments like this: npm run dev -- --host=0.0.0.0

[ampersand83]

Unfortunately that didn't work for me. I'm on windows 10 and just can't access my dev webapp with my mobilephone. The mobile browser just gives me a timeout error. When I start a web app on the same windows 10 laptop, but serve it via a tomcat I'm able to access that local web app by typing the ip adress of my windows laptop followed by the port number. I really don't know why that is possible but I can't open a local webapp that is running on a webpack devserver. Does anyone have any ideas on what else I could try to make my local webapp access for my mobilephone?

[Mark]

If you also want to use the open: true flag, then you can also set openPage: 'http://localhost:8080' and your browser will properly launch again, instead of trying to automatically load 0.0.0.0:8080 and failing.

[Igor Adamenko]

It works, but be aware of binding 0.0.0.0 in public places where someone else may connect to your device. It may lead to your data being stolen. You may need a firewall for the dev server, like this one: github.com/funbox/webpack-dev-server-firewall

[one-hand-octopus]

For me I wasn't able to visit 0.0.0.0:8080 on my iPhone (clicked go and nothing happened), so I replaced host: '0.0.0.0' with host: '192.168.0.16', and was able to visit 192.168.0.16:8080.

[mikey555]

@thinkvantagedu answer above essentially worked for my setup with a django server. I launched webpack server with flags --host 0.0.0.0 --port 3000, and launched django on 0.0.0.0:8000. Then, I changed two publicPath values in my webpack.config.js from localhost to my computer's network IP (e.g., 192.168.X.X). Now, moving on to solve the CORS errors...

[Roman86]

@moeses if you see a blank page - make sure you don't use the the output.publicPath. You may also see any errors in desktop Safari when iPhone is connected via a lightning cable