How to make the webpack dev server run on port 80 and on 0.0.0.0

ghz 7months ago ⋅ 140 views

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

I am new to the whole nodejs/reactjs world so apologies if my question sounds silly. I am currently playing around with reactabular.js.

Whenever I do a npm start it always runs on localhost:8080.

How do I change it to run on 0.0.0.0:8080 to make it publicly accessible? I have been trying to read the source code in the above repo but failed to find the file which sets this setting.

Also, to add to that - how do I make it run on port 80 if that is at all possible?

Answers

Changing the host from localhost to 0.0.0.0 would make your server accessible on all network interfaces of your machine. This is useful if you want to access your server from other devices on the same network. However, keep in mind that exposing your development server to the public internet via 0.0.0.0 may pose security risks, so it's not recommended for production use.

To change the host to 0.0.0.0 in your React application, you typically need to modify the configuration of the development server provided by the tool you're using for development (e.g., webpack-dev-server, webpack, create-react-app, etc.).

If you're using react-scripts (which is included with create-react-app), you can achieve this by modifying the start script in your package.json file:

"scripts": {
  "start": "react-scripts start --host 0.0.0.0"
}

By adding --host 0.0.0.0, you're instructing react-scripts to start the development server with 0.0.0.0 as the host.

To run your server on port 80, you'll need to run it with elevated privileges (i.e., as an administrator/root user), because ports below 1024 are considered privileged ports and require special permissions to be bound to. For example:

sudo npm start

However, running your development server on port 80 might conflict with other services already running on your machine, so it's generally not recommended for development purposes. In production, you would typically use a reverse proxy (e.g., Nginx or Apache) to route traffic from port 80 to your application's port (e.g., 8080).