Serve the React application by Node Server|Add Node Server in React app

We will serve our newly created React app by our node server. We will create a node server and a React app, and this node server will serve the React application on the browser.

Serve the React application by Node Server

This article will be very interesting because we will not run our app though the React command, we will create a Node server and this node server will be responsible to run our react app using the command “node server.js”

In this, we will create a React demo app by using command “create-react-app” and then we will create a Node server in this app, and later this server will run our react app. So let’s start.

Let’s create a React App:

To start this, we need to create a demo app using below command, let’s run the below command and create a demo app:

npx create-react-app react-with-node

After successful completion of the above command :

cd react-with-node
npm start

Open localhost:3000 in the browser:

Check your current port ( here default port is 3000 ) and confirm its working as:

Serve the React application by Node Server

Now, we have created a React app successfully and it's working properly, Now its time to add a node server.

Create the builds of your React app:

We need to create our build of this app so that the node server will serve this build. To create build run the following command:

npm run build

snapshot of command “npm run build”

The above command will create the build of our app. It will create a directory “build” in the root directory. You can see in the file directory below:

npm run build

Create a Node Server:

Let’s create a file “server.js” in the “root” directory and write the below code:

const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'))
});
app.listen(3000, () => {
   console.log("server is r  unnig on port 3000");
   console.log("Open your browser and hit url 'localhost:3000'");
});

In the above code, we created a node server and create an endpoint “/”. This endpoint will serve you our build of the React app. It will serve you “index.html” of your React app’s build. Our node server will run on port “3000”, you can change the port as well.

Run the server:

We’ve created our server, Its time to run our node server and see the result. To run our node server, we need to run below command:

node server.js

After the successful command run, you can see the below message on console:

server is runnig on port 3000
Open your browser and hit url 'localhost:3000'

It means, your node server is running and ready to serve your react app.

Now open browser and hit URL “localhost:3000” and you can see the app running through node server as:

Serve the React application by Node Server|Add Node Server in React app

The URL “localhost:3000” is calling an API (default “/” API ) of node server, and according to the code of server, it is serving the react app using react build.
When you do any change in your react app, you need to create your updated build using the command “npm run build”.

Conclusion:

In this article, we learned how we can create a react app and how we can create a node server, and how we can serve to react app using a node server.

Read this article for the basics of React and this article will help to understand more about hooks. If you’re interested in Node.js or JavaScript, then this link will help.

Thank you for taking the time to read this article. If you like and learned something from this article, click the 👏🏻 icon so other people will see this here on Medium.