179

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!

hong4rc
  • 3,999
  • 4
  • 21
  • 40
malcoauri
  • 11,904
  • 28
  • 82
  • 137

8 Answers8

284

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

forresto
  • 12,078
  • 7
  • 45
  • 64
  • 10
    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? – moeses Dec 07 '17 at 00:27
  • 2
    Also works on Ubuntu 17.10. If `ifconfig` not installed, IP address can be found via `ip addr show` – TitanFighter Feb 26 '18 at 23:15
  • 1
    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? – SeriousLee Mar 10 '18 at 14:37
  • 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. – Vasily Hall Sep 12 '18 at 16:28
  • 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. – Roel Sep 13 '18 at 09:16
  • 1
    is `ipconfig` not `ifconfig` – Totty.js Sep 24 '18 at 04:50
  • 1
    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. – jared Dec 10 '18 at 06:37
  • Here is how you can add it to your `webpack.config.js` file: https://webpack.js.org/configuration/dev-server/#devserverhost – Tom O. Feb 15 '19 at 03:11
  • 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* – Thiago Oct 17 '19 at 21:14
  • 6
    if you want to avoid editing your webpack configuration you can pass devServer arguments like this: `npm run dev -- --host=0.0.0.0` – Aurimas May 12 '20 at 08:43
  • @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 – Roman86 Jun 15 '22 at 18:36
150

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

devServer: {
    host: '0.0.0.0',//your ip address
    port: 8080,
    disableHostCheck: true,
    ...
}
Riley Dutton
  • 7,615
  • 2
  • 24
  • 26
Igor Alemasow
  • 4,484
  • 2
  • 27
  • 24
  • 6
    This worked for me, the value is 0.0.0.0 which worked. – Vasily Hall Sep 12 '18 at 16:27
  • 5
    On windows it worked for me with wifi I wrote the host in `ipconfig > IPv4 Address` – URL87 Jan 08 '19 at 11:08
  • 4
    This, by far, is the best, dare I say, only answer. Why hasn't it been marked as such?! – Kamal Apr 09 '20 at 16:46
  • 3
    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. – Mark Jul 16 '20 at 23:36
  • 4
    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: https://github.com/funbox/webpack-dev-server-firewall – Igor Adamenko Aug 02 '20 at 21:05
  • 1
    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. – one-hand-octopus Oct 27 '20 at 15:26
  • @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... – mikey555 Jun 22 '21 at 03:55
22

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

ngrok output here

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.

WitVault
  • 23,445
  • 19
  • 103
  • 133
13

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.

Andrus Asumets
  • 539
  • 1
  • 6
  • 10
13

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",
    ...
  },
FooBar
  • 419
  • 5
  • 14
  • 2
    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? – ampersand83 May 29 '20 at 12:41
11

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',
}
sneas
  • 924
  • 6
  • 23
3

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
}
mmomtchev
  • 2,497
  • 1
  • 8
  • 23
0

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.

Almer
  • 1,139
  • 1
  • 12
  • 14