How to make the webpack dev server run on port 80

Question

I am new to the whole nodejs/reactjs world so apologies if my qs sounds silly. So I am playing around with this reactjs app here: https://github.com/bebraw/reactabular

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 does this setting.

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

Thanks.

Answer 1

If you're in a React Application created with 'create-react-app' go to your package.json and change

"start": "react-scripts start",

to ... (unix)

"start": "PORT=80 react-scripts start",

or to ... (win)

"start": "set PORT=3005 && react-scripts start"

Answer 2

Following worked for me in JSON config file:

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

Answer 3

I tried the solutions above, but had no luck. I noticed this line in my project's package.json:

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

},

I looked at bin/webpack-dev-server.js and found this line:

.describe("port", "The port").default("port", 8080)

I changed the port to 3000. A bit of a brute force approach, but it worked for me.

Answer 4

Following worked for me -

1) In Package.json add this:

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2) In webpack.config.js add this under config object that you export:

devServer: {
    host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3) Now on terminal type: npm run dev

4) After #3 compiles and ready just head over to your browser and key in address as http://GACDTL001SS369k:8080/

Your app should hopefully be working now with an external URL which others can access on the same network.

PS: GACDTL001SS369k was my Computer Name so do replace with whatever is yours on your machine.

Answer 5

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.

Answer 6

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()]