How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

When developing a JavaScript application using webpack, it is common to use the webpack dev server for live reloading and other development features. By default, the webpack dev server runs on port 8080 and is only accessible locally. However, there may be situations where you want to make the dev server publicly accessible on port 80 and on the IP address 0.0.0.0. In this blog post, we will explore two solutions to achieve this.

Solution 1: Using the CLI

The simplest way to make the webpack dev server publicly accessible on port 80 and on 0.0.0.0 is by specifying the desired options through the command line interface (CLI) when starting the dev server.

To run the webpack dev server on port 80 and on 0.0.0.0, use the following command:

webpack-dev-server --port 80 --host 0.0.0.0

This command will start the dev server on port 80 and bind it to all available network interfaces, making it publicly accessible.

Solution 2: Configuring webpack.config.js

If you prefer to configure the webpack dev server options in your webpack configuration file (webpack.config.js), you can do so by adding the following code:

module.exports = {
  // Other webpack configuration options...
  devServer: {
    port: 80,
    host: '0.0.0.0',
    // Other dev server options...
  },
};

By adding the devServer object to your webpack configuration file, you can specify the desired port and host options. In this case, we set the port to 80 and the host to ‘0.0.0.0’, making the dev server publicly accessible.

Remember to replace // Other dev server options... with any other dev server options you may need, such as proxying or SSL configuration.

With these configurations in place, you can now start the webpack dev server and access it publicly on port 80 and on 0.0.0.0.

That’s it! You now know how to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible. Whether you choose to use the CLI or configure the webpack.config.js file, you can easily achieve your desired setup.

Happy coding!