What is the purpose of having two running ports when we working with ReactJS and NodeJS?

Question

I just starting to learn MERN Stack development as a former .Net developer. I wanted to develop my skills in this area and after lots of researching I just can't figure it out why we need to have two different running port/app when we working with react js?

Firstly I have developed some simple application by using NodeJS, Express, EJS View Engine and already deploy it to Heroku. So far, this works fine for me. I can develop all my personel site with those technologies including MonoDb later. But to become complete MERN Stack developer I started to search React and realized that it only works with giving another port to seperate it like client application. Why we can't use react and all other things in under one port?

This confused me when I get two different web page under; http://localhost:5000/ (React App) http://localhost:3000/ (Server Side: opens different html given by me using EJS)

Apperantly if we give same port number with server (3000) in react's package.json file then it gives following warning;

Something is already running on port 3000. npm run client exited with code 0

Is it due to nature of ReactJS?

Answer 1

You totally can run React and Node on a single port - but it doesn't make for an efficient workflow.

The core answer to your question lies in separating front-end routing from back-end routing.
When using React Router your application manages the UI based on the URL parameters.

i.e
http://localhost:3000/some-ui-path

At the same time when using Node as a back-end to respond to HTTP requests - you send the requests to specific URL paths.

i.e
http://localhost:3000/some-api-path

Separating the ports easily lets you differentiate between which route should be handled by React Router on the front-end and which route should be directed to the Node on the back-end.

http://localhost:3000/some-ui-path = React Route
http://localhost:9000/some-api-path = Node HTTP Route

In your configuration files you can customize your front and back end setups so that any request to a certain path will be redirected to your node server.

An Example:

you can define that any path prefixed with /api/ should be proxied to port 9000:
http://localhost:3000/api/some-api-path ==> http://localhost:9000/some-api-path

You can use whichever ports you like but 3000 5000 and 9000 are common defaults used by starter kits and module bundlers like create-react-app and webpack

Hope this helps, let me know if I can explain further!