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. 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?

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

Answer 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.

Answer 3

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

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

Answer 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.

Answer 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.

Answer 6

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.

Answer 7

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 8

I feel dirty for telling you this b/c of the security implications of what you're trying to do, but here you go.

npm run dev -- -h 0.0.0.0 -p 80

Answer 9

Following worked for me in JSON config file:

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

Answer 10

For me: changing the listen host worked:

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

was changed to :

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

and the server started listening on 0.0.0.0

Answer 11

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 12

For me, this code worked. Just add it on your package.json file :

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

And run the script "build" by running npm run build

Answer 13

For windows create file runMobile.bat

set PORT=8081
set HOST=192.168.3.20
npm run dev

Answer 14

I tried this to easily use another port:

PORT=80 npm run dev