Learn how to solve the Invalid Host Header issue when accessing a dev server of webpack in the local area network.

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 !


Senior Software Engineer at Software Medico. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Sponsors