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
Discussion (1)
Damn that looks too easy :) need to give it a go 👌 Thanks Grant!