How to make the webpack dev server run on port 80

问题:

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.

回答1:

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

回答2:

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.

回答3:

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

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

回答4:

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.

回答5:

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.

回答6:

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"

回答7:

Following worked for me in JSON config file:

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

回答8:

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.

回答9:

I struggled with some of the other answers. (My setup is: I'm running npm run dev, with webpack 3.12.0, after creating my project using vue init webpack on an Ubuntu 18.04 virtualbox under Windows. I have vagrant configured to forward port 3000 to the host.)

• Unfortunately putting npm run dev --host 0.0.0.0 --port 3000 didn't work---it still ran on localhost:8080.
• Furthermore, the file webpack.config.js didn't exist and creating it didn't help either.
• Then I found the configuration files are now located in build/webpack.dev.conf.js (and build/webpack.base.conf.js and build/webpack.prod.conf.js). However, it didn't look like a good idea to modify these files, because they actually read the HOST and PORT from process.env.

So I searched about how to set process.env variables and achieved success by running the command:

HOST=0.0.0.0 PORT=3000 npm run dev

After doing this, I finally get "Your application is running here: http://0.0.0.0:3000" and I'm finally able to see it by browsing to localhost:3000 from the host machine.

EDIT: Found another way to do it is by editing the dev host and port in config/index.js.