ReactJS: Changing Default Port 3000 in create-react-app

If you are doing frontend development nowadays, you may have heard about ReactJS or may be actively using it in your projects. Introduced to the public five years ago, React has transformed into a library of choice for a lot of frontend developers that is easily certified by the enormous stars at its Github page (more than 100,000 stars). React was relicensed into MIT license almost a year ago, which only catapulted its popularity into a new high. The MIT license is a more commercial friendly license compared to the BSD + patents license that was previously used by React.

Creating a frontend project is easy with the help of scaffolding tools and boilerplates. Among the available choices is create-react-app, a React bootstrapping utility that takes care the laborious tasks of setting up a React project without much intervention about how the project should be structured. Given this nature, create-react-app is less assumed a boilerplate and more of a toolkit.

Creating a base React project with create-react-app is as simple as typing a one line command:
$ yarn create react-app my-awesome-app

And it comes with other variants, to satisfy different flavors preferred by the developers:
– use with npm
$ npm init react-app my-awesome-app

– use with npx
$ npx create-react-app my-awesome-app

After the project is created, we can run the app in development mode with the omnipresent command:
$ npm start

To see the app in action, we open the browser and navigate to http://localhost:3000. But here is where stuff can be somewhat tricky. Let’s say we build a RESTful service for the backend using NodeJS and Express. The default port used by Express is 3000, the same default port used by ReactJS development server. Consequently, we need to resolve this port conflict by changing one of the ports. Assume that we’re adamant to keep port 3000 for NodeJS backend, so the port change should be applied to React.

How can we do that? There are three approaches:
1. Setting environment variable
2. Modifying package.json
3. Creating .env file

1. Setting environment variable

To set the environment variable, we need to open the command line terminal and add a set a new environment variable for ReactJS port. Let’s say we want to change the port to 8000. After stopping the server (with Ctrl+C or Cmd+C), we then type.

$ export PORT=8000

We then restart the development server again with “npm start”.

This approach, however, is less preferred for an environment with several active projects. The environment variable PORT is arguably a generic, non-assuming variable name that can be used by other systems. Remember that by setting an environment variable via an export, that variable will be available for the all processes accessing or spawned by the shell. It will be better to localize the port assignment specific to React as shown in the remaining approaches.

2. Modifying package.json

Another approach is by modifying the command to start the development server in package.json. The default “scripts” key will contain the following object:

…
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
…

To change the development server port to port 8000, we need to modify the value of “start” key as follows:

…
  "scripts": {
    "start": “PORT=8000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
…

We validate the port change by restarting the server and accessing the app at http://localhost:8000

With this approach, the port variable is local to the React project. One little caveat is some purists may not like to embed the port configuration in the command. We can address this what-is-your-flavor issue in the next approach.

3. Creating .env file

A .env file contains the additional environment variables / configurations that are attached to the NodeJS process that’s running React development server. Remember that when setting an environment variable from the command line terminal, the variable will be available to all processes that interact with the shell. This way, using .env is a sound approach to localize the port configuration and make it available for read only by the React project.

ReactJS leverages dotenv to handle the process of loading the variables declared in .env into Node’s process.env.

The .env file should be created in the root directory of the React project. In other words, it resides in the same directory with package.json. If we change the React development server port to 8000, the content of .env file will be as follows.

.env

PORT=8000

To validate the port change, we restart the server again and then access the app at http://localhost:8000

Concluding Remark

Changing default React development server port can be inevitable if you’re building a system with several NodeJS-based components. You can choose which approach works best for you when it comes to setting the port configuration for the React project.

One thought on “ReactJS: Changing Default Port 3000 in create-react-app

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.