how to change default port in react app and define specific port to it

Question

React application got port 8080 which is not available to us at the moment.

How to change the default port number.

here is the error that is displayed when running the command npm start

**note: maybe this can be a different issue , bit new to react development

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES 127.0.0.1:8080
    at Object._errnoException (util.js:1022:11)
    at _exceptionWithHostPort (util.js:1044:20)
    at Server.setupListenHandle [as _listen2] (net.js:1350:19)
    at listenInCluster (net.js:1408:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1517:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:97:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\harsha94\AppData\Roaming\npm-cache\_logs\2019-05-25T16_59_11_280Z-debug.log ```

Answer 1

• Add below line in your package.json file

  "scripts": { "start": "PORT=5600 react-scripts start",

• npm install

• npm start

Answer 2

From the error, more specifically this line: npm ERR! [email protected] start: node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

It looks like you're not using create-react-app but (from a google search) this repo: https://github.com/StephenGrider/ReduxSimpleStarter

Considering the versions in package.json (for example, it's using "webpack": "^1.12.9" and the current version is 4.32.2) I would recommend that you use: https://facebook.github.io/create-react-app/ instead...

But if you insist on using it that repo then add the port to your webpack.config.js like so:

  devServer: {
    port: 9000 // add port here...
  }

Answer 3

Ok cool noted the problem 'It is a conflicted port in webpack.config.js.'

which we can easily change by using adding port to devServer with specific port { port: 8006 } like below.

    historyApiFallback: true,
    contentBase: './',
    port: 8006, // <--- Add this line and choose your own port number
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    } 

Answer 4

In package.json

"start": "npm run build && serve -s build -l 5000"

This shall work if you use serve