Developing locally with webpack-dev-server on your devices

August 26, 2019

1 minute read

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

My project was using Webpack, so I had a read of their documentation around the devServer options it provides.

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 in the terminal but with two additional parameters. (--host and --port)
yarn dev --host=your-ip Address --port=8080

The host is now my local IP address (IPv4) and the port I want it to be.

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


Grant Bartlett

Front end JavaScript lover, more specifically TypeScript and React. Give us a follow - @grant_bartlett