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

Question

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

Wh

Answer 1

Configure webpack (in webpack.config.js) with:

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}

Answer 2

In package.json change the "start" value as follows

Note: Run $sudo npm start, You need to use sudo to run react scripts on port 80

Answer 3

Following worked for me in JSON config file:

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

Answer 4

This is how I did it and it seems to work pretty well.

In you webpack.config.js file add the following:

devServer: {
    inline:true,
    port: 8008
  },

Obviously you can use any port that is not conflicting with another. I mention the conflict issue only because I spent about 4 hrs. fighting an issue only to discover that my services were running on the same port.

Answer 5

Something like this worked for me. I am guessing this should work for you.

Run webpack-dev using this

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

And set this in webpack.config.js

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

Note If you are using hot loading, you will have to do this.

Run webpack-dev using this

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

And set this in webpack.config.js

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]

Answer 6

I am new to JavaScript development and ReactJS. I was unable to find an answer that works for me, until figuring it out by viewing the react-scripts code. Using ReactJS 15.4.1+ using react-scripts you can start with a custom host and/or port by using environment variables:

HOST='0.0.0.0' PORT=8080 npm start

Hopefully this helps newcomers like me.