How to serve an existing React application with Express

Express is a lightweight and adaptable Node.js web application framework that offers a complete range of functionality for both web and mobile applications. You may easily construct an API for the server using Express. Significant features in Express allow you to dynamically design a backend API.

Why should we serve our React Application with Express?

There are no frameworks or plugins included, and it doesn't depend on any other resources. Additionally, React makes it simple to build simple applications because its components are easy to test.

Installing Express

To use Express, you must install it. Run the following command in your terminal to install Express.

Kindly note that a react application should have been installed as well as other dependencies needed to run your application. Here is a link on how to.

npm install express --save

This above snippet installs Express and lists it as a dependency in the package.json file.

Setting up Express server

Create a folder titled server, then create an index.js file inside the folder. Add the contents below into the index.js file.

server/index.js

const express = require("express");
const path = require("path");
const port = process.env.REACT_APP_PORT || 3000;
const app = express();

// the __dirname is the current directory from where the script is running
app.use(express.static(path.join(__dirname, "../build")));

app.get("/ping", function (req, res) {
  return res.send("pong");
});

// this declares an absolute path for all routes in the application.
app.get("/*", function (req, res) {
  res.sendFile(path.join(__dirname, "../build", "index.html"));
});

// this tells you the port that your application is running on.
app.listen(port, () => console.log(`app is running on port ${port}`));

• Line 1 and 4 declare the express package and tell the app to make use of the express package in the index.js file.
• Line 2 provides a working directory and path.
• Line 3 declares a port value that the express server will run on.

The process.env.REACT_APP_PORT points to an environment variable that would be declared in a .env file in the app. For example:

.env

REACT_APP_PORT=3000

Note that in React, environmental variables are declared with the prefix 'REACT_APP'

If none is declared it defaults to port 3000 or whichever port is declared as an alternative.

express.static() expects the first parameter to be a path of a directory, not a filename.

__dirname as already stated in the comment of the screenshot above serves as the current directory from where the script is running.

/ping is a dummy path you can use to test that the server is working.

Update your package.json

In your package.json file, update your scripts to start your app using the index.js file created. This is done to serve your app using node.

package.json

"scripts": {
    "start": "node server/index.js",
    "build": "react-scripts build",
     ......
  },

After doing this, run the command npm run build to build the application.

Then run npm start to start your app.

You should see the below in your console:

> node server/index.js

app is running on port 3000

Your app is ready and served with Express!