How to Set up a Node.js Express Server for React

React is a JavaScript library used to build user interfaces and develop single-page applications using reusable UI components. React is used for building frontend apps that can communicate with the backend server.

1. Introduction

This guide will develop a simple React App and connect it to the server build using Node.js server. We will bootstrap the React App using the create-react-app command then connect it to Node.js by setting up a proxy.

2. Prerequisites

To follow this article along it will be helpful to have the following:

3. Setting up the folder structure

Folder Structure

The first step would be to create a root folder for our case, demoreactapp, to hold all of our App’s files. Then we will have the client directory that will hold all the React App files.

The node_modules folder will contain all NPM packages for our server.js file. The node_modules folder will be auto-generated when we install NPM packages.

Next will need to create a server.js file. The file will contain an Express server that will act as our backend. The package.json file is auto-generated when the npm init -y command is run in the terminal.

4. Creating the React app

From the terminal, browse to the root directory using the cd command and run the below commands:

$cd demoreactapp
$npx create-react-app client

The above commands will create a react app with the name client inside the root directory.

5. Setting up the Express server

The next step involves creating an Express server in the file server.js.

Browse to the root directory from the terminal and run the command mentioned below:

$npm init -y

The command will auto-generate the package.json file. Next will will need to run the command below to install Express and it will be saved as a dependency inside the package.json.

$npm install express --save

Now edit the file server.js as shown below:

const express = require('express'); //Line 1
const app = express(); //Line 2
const port = process.env.PORT || 5000; //Line 3

// This displays message that the server running and listening to specified port
app.listen(port, () => console.log(`Listening on port ${port}`)); //Line 6

// create a GET route
app.get('/express_backend', (req, res) => { //Line 9
  res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' }); //Line 10
}); //Line 11

Line 1 and 2 – requires Express and allows us to use it inside our server.js file.

Line 3 – It will set the Express server on which port it will run on.

Line 6 – will display a message on the console that the server is working as expected.

Line 9 to 11 – It will set a GET route that we will, later on, fetch from our client-side React App.

6. Setting up the proxy

In this step, the Webpack development server was auto-generated when we ran the create-react-app command. Our react App is running on the Webpack development server on the frontend.

We can proxy the API requests from the client-side to the API on the server-side. The API on the server-side (Express server) will be running on port 5000.

Webpack Development Server (WDS) is a tool that helps the developers make changes to the web app’s frontend and renders them to the browser with no need to refresh the browser.

It’s unique compared to other tools that do the same in the way that the bundle contents are not written out as files on the disk but are stored in the memory. This advantage is vital when one is trying to debug the code and styles.

First, set up the proxy to navigate the client directory and locate its package.json file. Add the line below to it.

“proxy”: “http://localhost:5000”

The modified package.json file will look as shown below:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

The modified package.json file will let the webpack proxy the API requests to the Express backend server running on port 5000.

7. Calling Express backend server from React

First is to browse into client/src and edit the file App.js to appear as below:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
state = {
    data: null
  };

  componentDidMount() {
    this.callBackendAPI()
      .then(res => this.setState({ data: res.express }))
      .catch(err => console.log(err));
  }
    // fetching the GET route from the Express server which matches the GET route from server.js
  callBackendAPI = async () => {
    const response = await fetch('/express_backend');
    const body = await response.json();

    if (response.status !== 200) {
      throw Error(body.message) 
    }
    return body;
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">{this.state.data}</p>
      </div>
    );
  }
}

export default App;

Inside of componentDidMount(), the function callBackendAPI() is called. This function will fetch the route previously created in the Express server and then set{data: null} to the fetch request-response.

On the line that contains this.state.data inside the render function, it renders new data to the DOM

8. Running the app

We navigate to the root directory demoreactapp and run the command below:

$cd demoreactapp
$node server.js

After running the file server.js, next we will go to our browser, “http://localhost:5000/express_backend”, and the message below will be displayed:

Get Route success

The above shows that our Express server is working as expected and that the GET route we created is working, and it is possible to fetch the route from the client-side.

Also, note the URL path is the same as the path we set in our GET route in the server.js file.

Next, browse to the client directory in the terminal, and run the below commands:

$cd client
$npm start

The commands above will run the React Dev server, which runs on port 3000, and automatically open in the web browser.

The screen below with a message will be displayed:

React app running

Finally, we have rendered the data fetched from the GET route in server.js to our frontend React App, as demonstrated above.

If the Express server is disconnected, the React server will continue running. However, the connectivity to the backend will be lost, and nothing will be displayed.

9. Conclusion

A lot can be done with Express backend, like make calls to the database, but on this guide, we have concentrated on how to quickly connect to the backend Express server from client-side React App.

The code snippets and files used in this guide can be accessed at the GitHub repository here.

Happy coding!

Related posts:

Email Authentication and Verification using Node.js and Firebase
Environment Variables in Node.js
How to Integrate B2C M-Pesa API using Node.js
Converting a Static Site to a Static Site Generator
How to build a GraphQL Server Using Node.js
Writing A Multiplayer Text Adventure Engine In Node.js: Adding Chat Into Our Game (Part 4)
Better Error Handling In NodeJS With Error Classes
Getting Started with Fastify Node.js Framework and Faunadb
How to Build an Authentication API with JWT Token in Node.js
How To Build and Test a Node.js REST API with Express on Ubuntu 18.04
Rendering HTML Pages as an HTTP Server Response Using Node.js
Node.js vs Nuxt - The Key Differences
Introduction to Sequelize ORM for Node.js
Node.js Firebase
Why Static Typing & Why is TypeScript so popular?
The Guide To Ethical Scraping Of Dynamic Websites With Node.js And Puppeteer
Why Node.js is Great for Backend Development?
Sharing Code Between Projects: Lessons Learned In The Trenches
Getting Started with billboard.js charts
React Server Side Rendering With Node And Express
How To Harness The Machines: Being Productive With Task Runners
Converting A Static Site to A Dynamic Node.js Web App
Debugging a Node.js app running in Docker using Nodemon and the Docker extension
Getting Started with EJS Templating Engine
Handling Continuous Integration And Delivery With GitHub Actions
Node.js Network Requests using Axios
Uploading Images to Cloudinary using Node.js
How To Develop A Chat Bot With Node.js
How to Create a Simple REST API using TypeScript and Node.js
How To Secure Your Web App With HTTP Headers
Implementing Lipa na Mpesa Online using Node.js
Why is Node.js wildly popular among developers?