One Express Server, Unlimited React Apps

React and Express, are notably the best players in terms of web development technologies. They make up a part of the MEAN (Mongo, Express…

React and Express are notably the best players in terms of web development technology. They’re a part of the MEAN (Mongo, Express, Angular, Node), or MERN (Mongo, Express, React, Node) stack, which are widely used by developers.

There are lots of resources for learning how to build full stack React apps and a lot of them use similar patterns to achieve this goal.

Routing One Express Server to Multiple React Apps

One issue I’ve been encountering for a while is routing one Express server to multiple React apps to simplify the production process. It would make things easily maintainable, scalable, and deployable to cloud services.

My situation consisted of a website containing three different parts: the administrator panel, the seller panel, and the front end which was basically what the world (users) would have access to.

I initially went about solving this by splitting each part into its own React app, with its own npm folder.

When it came to deployment, I would run my API on its own, on the server on a port, and build each of these apps in order to deploy them onto the public_html folder on my AWS server.

The React apps obviously point to the AWS EC2 instance link with the port I have opened for my API.

The architecture I used to use is better shown in the diagram below.

So basically, the API runs using the forever npm module. The React apps are built separately and put in the public folder of whichever server (NGINX or Apache) you‘re using.

The base index.html and static folder are the front end React build’s output and the others are in folders, as you would access them by going to the link and adding a trailing slash to your resource.

For example:

This is one solution that works to have multiple React apps connected to one API, without having the Express server serve the apps.

It works, but it is not the most efficient solution, especially when it comes to development and deployment. You would have to constantly build all three apps.

Also, it would not scale well if you decide to add more and more outlets for different types of users to access.

How to Make This Work

After researching and going back to the initial way of how full stack React apps should be developed, I came to the decision that I wanted to make this whole thing work with one Express server serving the apps and having it serve the correct one based on the path accessed by the user.

I found a couple of tutorials on the web on how to serve multiple React apps using an Express server, but they either did not seem to be working properly, or they weren’t very straightforward.

In order to follow my solution, you will need to clone my GitHub repo. The README gives you a lot of the information you need, but I will discuss the crucial parts below.

In this repo, I referenced crsanddeep’s repo for a typical full stack React app, extended the webpack configuration, and changed how the server serves the different files.

The crucial part is webpack; webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.

The webpack config file is where the magic happens, we’ll start with that.

  1. Make sure you’ve installed the webpack plugin HtmlWebpackPlugin.
  2. After that, we start by importing it into the file.

3. Define multiple entry paths and change the output name to a dynamic name using the [] syntax. This will generate a bundle for every path and store it under the distribution folder dist/static/js/x.bundle.js.

4. Finally, you need to define multiple instances of the HtmlWebpackPlugin for every React app.

The HtmlWebpackPlugin above tells webpack to generate an index.html for every entry in the paths and store it in a subfolder.

The main front end is stored in the root as you can see; filename index.html and the others have filenames that go into their respective directories.

After defining the webpack configuration file, which should be straightforward, you can then go into your server file, located in src/server/index.js and you will see the server pointing to your build folder (which is dist/ in our case).

If you are experienced with server-side development, you should be able to extend and make your Express server do crazier things here based on the route accessed.

The code snippet above showcases how you can tailor Express to serve your different directories that are stored in your dist folder, based on the link the user visits.

You can tell that this way of doing things is very scalable.

Adding more and more React apps (or pages, whatever you want to call them), with their own separate modules, is very easy to do. You will need to add an entry and a new instance of the HtmlWebpackPlugin.

Conclusion

Thanks for reading. I’ve been wanting to find a solution to this problem for a while and I’m happy to share it with you.