Harbin R

Harbin R

React: Change my port!

React: Change my port!

Hello! On this article, I want to share what I have found on changing ports in React. In Express, its easy to declare any port number by assigning it to a constant variable:

In ExpressJS:

import express from 'express';

const app = express();
const PORT = <any number>;

In React:

  • Go to package.json file.

image.png

  • Under scripts line, modify the command on start and save (Ctrl+S).
"scripts": {
    "start": "set PORT=8000 && react-scripts start",
    "build": "react-scripts build"
}
  • After modifying start, go to Terminal (Ctrl+~) --> npm start --> hit Enter (if your app is in another folder, type in cd <folder name>, hit Enter then type in npm start --> hit Enter).

image.png

  • When viewed in browser, it will now look like this:

image.png

Aaaaaand that's it! 😄

 
Share this