Webpack Invalid Host header: cannot access webpack dev server from the LAN

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:

// .. 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 !