CODEWITHSUNDEEP
node.jsreactjs
Ardahan Kisbet
Ardahan Kisbet

Reputation: 659

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

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?

Upvotes: 11

Views: 6504

Answers (4)

Min Joon So
Min Joon So

Reputation: 35

Also a .Net developer here! I had the exact same question around myself and this article seems to clarify a little for me.

It seems like you need two servers (two ports) for development only. In production, you will only have an API server running, with some endpoints simply serving static files in /build directory like:

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'))
})

I think the reason why we run two servers (one react webpack server and one API server) ports in development is because 1) we don't want to run npm build every time you make a change and 2) because of not needing to build every time you make changes, it allows hot-reloading for fast development.

Upvotes: 0

Hubi
Hubi

Reputation: 104

Let's start from the port. Port is a logical construct that identifies a specific process or a type of network service. Port is a communication endpoint. And you have two different services, so it seems logical to use different ports generally. Your question is really good. I'm waiting for new answers.

Upvotes: 0

Michael Abeln
Michael Abeln

Reputation: 2587

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!

Upvotes: 6

Pranay Ankit
Pranay Ankit

Reputation: 227

You cannot run React and Node.js server in a single port.

Why?

React uses webpack to bundle all the component files into a single JS file. This JS file is then served by a webpack-dev-server which is a part of webpack.

This webpack-dev-server is needed only during development. In production, you use npm run build or yarn build to bundle everything into a directory called build which will be served as a static asset by your Node.js server.

So, during development, you need to use two different ports for:

  1. webpack-dev-server: This by default runs on 3000. If you try to run your Node.js server, you'll get an error.
  2. Node.js server: This should run on port other than 3000.

Note: webpack is used as a default module bundler when creating React app using create-react-app.

Upvotes: 4

Related Questions