DEV Community

Paul Michaels
Paul Michaels

Posted on

1

React Tips: 1 – Starting React on a Different Port

I came up with an idea to start a series of posts on React that offers small tips on things you can do, errors that you might get, and anything else that future me might find useful.

I started by creating a new react app. The intention being that I would have a reference repository on GitHub.

The first part of this concerns starting react on a different port.

Why?

There are a couple of reasons that you may choose to do this, but one is to get around the issue when running:

npm start
Something is already running on port 3000

How

Have a look in your project for a file called package.json. In there, you should see something like this:

{ 
    "name": "react-demos",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

In the start section, you can add the port:

{ 
    "name": "react-demos",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
},
"scripts": {
    "start": "set PORT=3005 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

The default port is 3000, so if you don’t specify a port, it will always try to start on 3000.

What if I don’t want to change the port / Why won’t react die?

Well, you could try the following command in bash:

taskkill -F -IM node.exe

It should kill all of your React processes.

References

https://github.com/facebook/create-react-app/issues/1083

https://stackoverflow.com/questions/45544145/how-stop-after-running-react-scripts-start

This post was originally published here

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay