React Tips: 1 – Starting React on a Different Port

#react #tips

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.