How to integrate NodeJs with ReactJs

The visual feature of the website which can be experienced by the users is the frontend and all the functionalities run in the background in the backend.

Frontend:

Frontend is the part of the website which users can interact with . This is also known as Client-Side. ReactJs is the Javascript library which uses for building user interfaces.

Backend:

Backend is the part of the website which consists of the server and the database. Server provides the data on request and the Database is used to organize the data.This is also known as Server-Side. NodeJs is a platform built on Chrome’s JavaScript runtime for easily building fast and scalable network applications.

So in this article, we are going to learn how to connect Frontend(ReactJs) with Backend(NodeJs).

Let’s Dive In

Step1: Folder Structure

First, create the base folder (Application) which consists of the backend which contains the backend-related files. and frontend which contains the frontend-related files(the frontend folder will be created using the below command).

npx create-react-app frontend

Folder Structure

Step2: The Backend

First, initialize the backend app by running the command in the terminal.

$ npm init -y

Now install the required libraries.

$ npm i express nodemon

1. Express: This library is used for a web application framework.
2. Nodemon: This library is used to automatically restart the server when changes are detected.

Now let’s set up the server

const express = require("express");
const app = express();
const PORT = 4000 || process.env.PORT;
app.listen(PORT, () => {
console.log(`Server is up ${PORT}`)
})

The above code is to bind and listen for connections on the specified host and port. We are serving backend at 4000 port.

Now create test API.

...
app.use('/test-api',(req, res) => {
   res.send("YOUR BACKEND IS CONNECTED TO FRONTEND")
});
...

Step3: The Frontend

Now come into the frontend folder and start the react-app using command.

$ npm start

Now your web page looks like this.

Webpage

So we need to change the app.js folder for customizing the webpage.

import axios from 'axios';
import './App.css';
function App() {
 return (
   <div className="App">
     <h1>Hello World!</h1>
   </div>
 );
}
export default App;

Now Our webpage looks like this.

Let’s call the API in react-app.

import { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';
function App() {
  const [response, setResponse] = useState("");
  useEffect(() => {
    apiCall() // API call on first time when website loads
  },[])

//This function is used to call the API
const apiCall = () => {
  axios.get("http://localhost:4000/test-api").then((response) => {
    console.log("response", response);
    setResponse(response)
  })
 }
 return (
   <div className="App">
     <h1>Hello World!</h1>
     <h2>{response? response: ""}</h2>
   </div>
  );
}
export default App;

But now we will face CORS Errors because we are calling API of the different PORT.

CORS Errors.

To solve this issue we need to use library cors in the backend.

First, install cors.

$ npm install cors

Now we need to do a small part of the code

...
const cors = require("cors");
...
app.use(cors);
...

Using this code we can resolve the cors issue and we are successfully called API. So Now our webpage looks like as below.

Webpage

Conclusion

In this blog, we have seen how to integrate the NodeJs with ReactJs, so we can save out website in database and connect to the server. We have learned how to handle the CORS errors so we can run our backend server with the frontend.

Hopefully, this helps you with using APIs in REACTJS.