Last update: January 15, 2022
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-appAnd 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-appAfter the project is created, we can run the app in development mode with the omnipresent command:
$ npm startTo 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=8000We 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.
Note for Windows user:
The export command does not exist on Windows. Alternatively, you can set the environment variable using the set command (case insensitive).
C:\MYPROJECT> SET PORT=8000Please note that the variable is not persistent and is only recognized in the current session. If you for example close the Windows command prompt, you will need to set the variable again.
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.
Note for Windows user:
Similar with the first approach, we need to use set command in order to set the environment variable for port number. The package.json for development on Windows will become as follows:
...
"scripts": {
"start": “set PORT=8000 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
...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=8000To validate the port change, we restart the server again and then access the app at http://localhost:8000
Note for Windows user:
Unlike the previous two approaches, there is no difference in the content of .env file on Windows.
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.
The table below compares how we specify the port for ReactJS / create-react-app dev server in different operating systems. Let’s say we want to change the port to 8000 from the default number 3000.
| Approach | Ubuntu | CentOS / RHEL | Windows | MacOS |
|---|---|---|---|---|
| Environment variable | export PORT=8000 | export PORT=8000 | set PORT=8000 | export PORT=8000 |
| package.json modification | ... | ... | ... | ... |
| .env file | PORT=8000 | PORT=8000 | PORT=8000 | PORT=8000 |
Appendix
It is not uncommon to find projects that use react-app-rewired or craco (Create React App Configuration Override) package to override create-react-app webpack configs. For such case, react-scripts binary will be replaced with that of react-app-rewired or craco. The package.json that configures the dev server to run on user defined port, for e.g. port 8000, will look like as follows.
Ubuntu / CentOS / RHEL / MacOS environment:
– react-app-rewired
...
"scripts": {
"start": "PORT=8000 react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
...– craco
...
"scripts": {
"start": "PORT=8000 craco start",
"build": "craco build",
"test": "craco test --env=jsdom",
"eject": "react-scripts eject"
}
...Windows environment:
– react-app-rewired
...
"scripts": {
"start": "set PORT=8000 && react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
...– craco
...
"scripts": {
"start": "set PORT=8000 && craco start",
"build": "craco build",
"test": "craco test --env=jsdom",
"eject": "react-scripts eject"
}
...Note that for the eject command, we do not replace the executable and opt to use the default react-scripts binary. This is since no configuration override will take place when project is being ejected.
Great!
Pingback: ??create-react-app???? | Afox
Thanks!!!!
in the file package.json (Windows)
“scripts”: {
“start”: “set PORT=4000 && react-scripts start”
}
in the file package.json (Ubuntu)
“scripts”: {
“start”: “export PORT=4000 && react-scripts start”
}
Thanks Lionel..
Thanks Lionel. To add some explanation to this, the “export” command is not native to Windows. When working in a Windows environment, the command “set” shall be used to set the environment variable.
Good stuff.
Thank you so much!
Pingback: Resolved: React.js : How to start a react application on a different port - Daily Developer Blog
Pingback: How to specify a port to run a create-react-app based project?
I agree with your point of view, your article has given me a lot of help and benefited me a lot. Thanks. Hope you continue to write such excellent articles.