Willing to test your web project from other devices as a mobile in your local area network with Webpack? You may have already faced the Invalid Host Header
error on your webpage that won't allow you to check what does your project looks on this device.
In this article, we'll show you 2 workarounds to access your dev server from your LAN easily.
A. Specify your host
You can specify the IP that can be publicly access your dev server by setting the public flag and the IP and Port as argument in the start command of your dev server (package.json
) or directly in the command if you are running it from the command line e.g --public 192.xx.xx.xx:8080
:
{
"scripts": {
"start": "webpack-dev-server [the rest of your config] --public xxx.xxx.xxx.xx:port"
}
}
Don't forget to stop any running dev server and start it again.
B. Disable Host Check
The other alternative, is to disable the host check process by setting the disableHostCheck flag to true in the devServer property of your webpack dev server configuration (webpack-dev-server.config.js
). This feature is available since the release of webpack 2.4.3.
You need to set the host to 0.0.0.0
too, otherwise if you try to access it the server with the IP from another device, it will load and load but nothing will happen:
Note
This approach is meant to be used behind a Proxy or similar setups to disable this check. Only use it when you know what you do, it isn't so recommended though.
// .. rest of webpack dev server
const config = {
// .. rest of config object
// Server Configuration options
devServer: {
// .. rest of devserver options
host: '0.0.0.0',
disableHostCheck: true
},
// .. rest of config object
};
// .. rest of webpack dev server
As mentioned in the previous step, don't forget to stop any running dev server and start it again. Any of the previous workarounds should let you to explore your project from the LAN in just a couple of seconds.
Happy coding !