Render React App with Express

So I set out with a very simple task, I have a Node JS Express app that serves some endpoints that my React application uses. Each project, the Express app, and the React app are in different repos.

I wanted to be able to run one process (The API) and make that automatically serve the React application.

So my thoughts were to find an example of an Express App doing this, and it's pretty simple. Express can definitely work as a simple dev server if all you need to serve up is one file, like a React application.

So I created an Ubuntu server at my favorite VPS hosting provider and created a user, SSH, blocked root access and allowed my apps to run on port 80, those instructions are out there.

So now I have a server prepared for the most part and I want to start playing with building and new API and React project side by side, but in different repos.

As for the React application, just ensure that it runs on your machine locally.

Now for the Express app, we are going to modify the index.js to serve our React project in the directory adjacent to it where I have installed my React application.

I tested the same setup on my local machine, each repo installed right next to each other.

Here is the code for the index.js I just need to get one directory up and then drill down into my react project and serve that file.

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname,'../react-js-client/dist')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, '../react-js-client/dist', 'index.html'));
});

app.listen(process.env.PORT || 80);

Also I run my apps on a process using pm2 which you can also install using:

sudo apt-get pm2 -g

I can switch into my API project directory and run the following to start both the API and my React application:

pm2 start index.js --name my-api-and-client

This is cool, I can now take this further if I wanted to and tell my Express app which react client or repo to load by passing it a variable. This way it doesn't have to know what app it is serving. Above we have hard-coded the sibling directory, but most react apps have the same structure and that dist could be retrieved from any adjacent repo, this gives me some cool ideas about switching to a different react application I am developing that uses the same API.

This is kind of a hack in my mind, I'd love to know what you think the pros and cons are of doing something like this, but I have a very simple site that is just for my own development purposes and this was the easiest way to get it online and both apps talking together.

My next step would be to hook the express app to a MongoDB to get some data, build out my endpoints and slowly adapt my React application to use the new and updated endpoints as I build it out.

If you like this article and similar content about React, please check out my other articles on the Telerik Blog and here on Dev.to!

Comments

[Eric Bishard]

Would love to hear if you think there are major drawbacks to running my React application this way.

This is definitely something I don't see being useful outside of just trying to get something up quick as the react app should be able to run on it's own.

[Jamal Al]

If it works then it works :)
But i wouldn't recommend doing this in mid to largeer project. I would do it properly with serve rendering

[Eric Bishard]

This is an interesting comment, and I agree kind of. But I'm really looking for someone that is really great at working with Express to find out, can Express be used in this manner with success. Right now, it feels like a hack to me, it does work, but what are the specific drawbacks. What can't I do if I decide to serve my React application with Express as the server.