How to change port number in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to change port number in react js with code example.

To change port number, put the "start": "set PORT=5000 && react-scripts start" class to change port number.

There is one method to change the default port of the react app. In this tutorial, we will go through the method.

Note: The code for the root file i.e. App.js and output is the following common to all methods.

In this method, we have to edit a single line of code inside the package.json file. Here, The user will find the code like start: “react-scripts start” inside the “scripts” object. In the below image, you can see the default view of the “scripts” object.

React, Port, Number

Users need to edit the first line of the “scripts” object and they have to add the below code there.

"start": "set PORT=<specify_port_of_your_choice> && react-scripts start"

Example:

"start": "set PORT=5000 && react-scripts start"

After editing the package.json file, your “scripts”object should look like the below image.

React, Port, Number

Let’s look at the following example to understand how it basically works:

APP.js

import React, { useState } from 'react';
import "./App.css"
const App = () => {

  return (
    <div>
      <h1>aGuidehub</h1>
      <h1 style={{ fontSize: 50 }}>aGuidehub</h1>
      
    </div>
  )
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:5000/, you will see the following output:

Check the output of the above code example.

React, Port, Number

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts