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.
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.
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.
The webpack config file is where the magic happens, we’ll start with that.
- Make sure you’ve installed the webpack plugin
- 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
4. Finally, you need to define multiple instances of the
HtmlWebpackPlugin for every React app.
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
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.