Two Methods for Building Your First MERN Stack App

The trend I’ve seen in web applications is a backend API written in a server-side technology like Node, with a front-end single-page application written in something like React. The problem with these stacks is that it can be hard to run and deploy them as a single unit. The API and UI will need to be started, stopped and deployed separately. That can be a bit of a pain when developing, and if you are writing the API to only be consumed by that single front end, the extra steps can be unnecessary. If this sounds like you, I’ll show you the two main paths I found for setting up a MERN (Mongo, Express, React, and Node) stack application to run and deploy as a single code base.
1. Roll Your Own
I found a great couple of articles on setting up React and Node to run together by Dave Ceddia who writes a lot about React. The first tutorial is fine for setting up the development environment, but it doesn’t talk much about how to get things ready to deploy. I deploy most of my personal stuff on Heroku, so the second article was just what the doctor ordered for me. The tl;dr is to start with create-react-app to generate the base React application, then add the Express application around it. The biggest trick is in the scripts section of the server’s package.json file. Here’s what I did by following David’s tutorial and then adding a little magic of my own.