How to Render a React App Using an Express Server in Node.js | by Yogesh Chavan | Level Up Coding

Before diving into that, let’s first understand how to serve static files using Express.js

This is very useful if you are creating a full stack app using Express.js , React.js , Node.js and any database in Nodejs . So we can run our React.js and Node.js app on the same port, avoiding the need of running two separate commands to start Node.js and React.js app.

In this article, we will explore how to render a React app using Express.js server.

Learn how to serve your entire build folder created by create-react-app using Express.js

How to Render a React App Using an Express Server in Node.js

Serve static files using Express.js:

There are some requirements where we need to access some files in browser but If you are using Express.js in Node.js which runs on the server side, the files are not available automatically. To get that working we need to make some code changes. So let’s do that.

Create a new folder with the name express-static-serve and inside that folder, create another folder with the name server and run following command from the terminal from inside the server folder.

yarn init -y

This will create a package.json file inside the server folder

Install the express and nodemon packages by running following command

yarn add [email protected] [email protected]

nodemon is used to restart the app when we make any change in the code

Create a new file index.js and add the following content inside it

index.js

Add new script inside scripts section of package.json

"start": "nodemon index.js"

package.json

Now, start the application by running yarn start command from server folder

If you navigate to http://localhost:5000/. you will see the message displayed in the browser

This static hardcoded message is fine, but what If we want to render the contents of HTML file which has CSS and Javascript files included instead of text — how can we do that?

For that, create a new folder with the name public and create two folders with the name js and css inside it.

Add script.js inside public/js folder with the following content

scripts.js

Add styles.css inside public/css folder with the following content

styles.css

Add index.html inside public folder with following content

index.html

Now, inside index.js, add an import for path package and send the index.html file in response for the / route

const path = require("path");
app.get("/", (req, res) => {
 res.sendFile(path.join(__dirname, "public", "index.html"));
});

Updated index.js

Now, If you check the application, you will see that button from index.html is displayed but Javascript and CSS files are not loaded and error is displayed in the browser console

Application

So, Express.js is not able to render the static CSS and JavaScript file from public folder using sendFile method.

To fix this we need to add a middleware using express.static method provided by Express.js

So instead of

app.get("/", (req, res) => {
 res.sendFile(path.join(__dirname, "public", "index.html"));
});

add following code inside index.js

app.use(express.static("public"));

index.js

This will inform Express.js to serve all the files from public folder

Now, if you check the application at http://localhost:5000/, you will see that there is no error in console and CSS is correctly getting applied and clicking on button also displays the current date

Working App

If we have any other file inside the public folder like help.html or contact.html, we can access that also by direct URL like http://localhost:5000/help.html or http://localhost:5000/contact.html

Create a new users.json file inside public folder with following content

users.json

which you can access by visiting http://localhost:5000/users.json

So by just adding express.static method we can serve all JavaScript, CSS, HTML, and even images.

Note: We can have multiple express.static methods in a single file each for serving different folder content.

You can find source code until this point HERE

Render React app using Express.js:

Create a new React app using create-react-app by running following command from express-static-serve folder

create-react-app react-app

So now, you will have two folders inside express-static-serve folder, one with the name server and others with the name react-app

Navigate to react-app folder from the terminal / command prompt and run following command to install axios library

yarn add [email protected]

Once done, delete all files from react-app/src folder and create index.js, App.js and styles.css inside src folder

Open App.js and add the following content

App.js

Open styles.css and add the following content

styles.css

Open index.js and add the following content

index.js

Now, move the server folder from express-static-serve to react-app folder

So your folder structure will look like this

folder structure

Now, open package.json from react-app folder and change

"start": "react-scripts start",

"start-client": "react-scripts start",

and add new start script

"start": "yarn run build && (cd server && yarn start)"

Here, we will generate the build folder first and then serve that build folder using Express.js

So your package.json will look like this

package.json

Now, open server/index.js and add an import for path and another app.use to serve the build folder that will be created by create-react-app soon.

const path = require("path");
app.use(express.static(path.join(__dirname, "..", "build")));
app.use(express.static("public"));

Here, in the first app.use, as the build folder will be created inside react-app folder, we are creating a path for the build folder located outside the server folder.

Note: Order of app.use matters here. We want our React app to be displayed on page load, so the build folder should be loaded first as it will also contain index.html. If we add public folder first then index.html from server/public folder will be loaded as Express.js reads the file from top to bottom and it stops rendering when it finds the first matching file.

Updated index.js

Now, navigate to react-app folder from terminal and run yarn start command and you will see the React app is displayed and files like help.html, users.json are also accessible on the same port of 5000.

Final App

If your React App is using routing then it will not work because we’re starting server from Express.js so the request will always go to the Express.js server and there will not be any route for handling that.

So to fix this, add the following code after all the Express.js routes and middlewares in server/index.js file.

app.use((req, res, next) => {
  res.sendFile(path.join(__dirname, "..", "build", "index.html"));
});

So now, when the request comes to the server for any route and route you’re trying to access does not exist on the server-side, we will be sending the index.html file from the build folder so your client-side route (React App) will handle that and will display the client-side route page.

Your final server/index.js file will look like this:

You can find the complete source code for this article HERE and the live demo HERE

That’s it for today. I hope you learned something new.

Check out my recently published Mastering Redux course.

In this course, you will build 3 apps along with a food ordering app and you’ll learn:

Basic and advanced Redux
How to manage the complex state of array and objects
How to use multiple reducers to manage complex redux state
How to debug Redux application
How to use Redux in React using react-redux library to make your app reactive.
How to use redux-thunk library to handle async API calls and much more

and then finally we’ll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

Don’t forget to subscribe to get my weekly newsletter with amazing tips, tricks, and articles directly in your inbox here.