Developing locally with webpack-dev-server on your devices

Working on a project last week, I really needed a quick way to test on devices other than the PC I was working on. In short, I wanted to make a change to some code and see it hot reload to my phone.

Checking out Webpack's documentation, I found some useful info around the devServer options.

Here's how to do it

Take your typical webpack config example:

module.exports = (env, options) =>
{
    //...
    return {
        mode: options.mode
        //...
    }
}

Add an optional devServer object which will now contain our host and port.

module.exports = (env, options) =>
{
    var devServer = {};

    if (options.port && options.host)
    {
        devServer = {
            host: options.host,
            port: options.port,
            // https: true
        };
    }

    return {
        mode: options.mode,
        devServer,
        //...
    }
}

Now run our dev command to fire up webpack (mines yarn Dev) in the terminal but with two additional parameters. --host and --port

The host value will be our local IP address (IPv4) and the port will be 8080.

yarn dev --host="your-ip-address" --port="8080"

You are now able to access your local project on your IP address (complete with hot reloading).

E.g http://my-ip-address:8080