by Sai gowtham

How to change the port number in React app

In this tutorial, we are going to learn about how to change the default port number in a create-react-app.

If we create a new project using create-react-app (CLI), by default the react app runs on port 3000.

Changing the port number

To change the port number, first we need to install a new package called cross-env which helps to set environment variables across all platforms (like windows, mac, linux, etc).

npm install -D cross-env

Now, open your package.json file and add the following line inside the scripts object by specifying your port number.

"start": "cross-env PORT=4006 react-scripts start",

Here I set a PORT environment variable to 4006 using cross-env, so that my react app runs on port 4006.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course