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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

I tried this to easily use another port   PORT 80 npm run dev

User · Answer

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  amp  amp  react-scripts start

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Following worked for me in JSON config file    scripts        start    webpack-dev-server --host 127 0 0 1 --port 80   js index js

User · Answer

Configure webpack  in webpack config js  with   devServer               host   0 0 0 0     port  80

User · Answer

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

User · Answer

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

[node.js] How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

Examples related to node.js

Examples related to reactjs

Examples related to npm

Examples related to webpack

Examples related to webpack-dev-server