MERN Heroku Deployment

Today I worked on deploying our Chingu project to Heroku.

One Step At A Time

The first attempt to just deploy our master branch didn’t work. So I broke it down and went step-by-step. The project structure is a bit different to previous apps I’ve deployed—in addition to the main package.json in the root folder, we also have our backend and frontend servers each running their own scripts and dependencies in Server/package.json and Client/package.json. Heroku runs apps with an npm start script, so I needed to make this script run both servers.

First I removed the Client server from the run script just to try and get our Node server running. I was able to do this by making the start script change into the Server directory, install all of the dependencies, and then run start:

"start": "cd Server && npm install && node app.js"

Adding Client Server

In the dev environment we use a package called concurrently to run the backend and front end servers with one script yarn dev. But on Heroku it’s a production environment and we don’t use concurrently, so need to break this up. I found two articles that mention how to add a second script to run after the initial npm start:

The solution is to add a heroku-postbuild script:

"heroku-postbuild": "cd Client && npm install --production=false && npm start"

This successfully moved to the Client directory, installed all of the dependencies, and ran the app. I could see from the server logs that it ran the app in the exact same way it did on my local machine: it creates a development server with webpack-dev-server and makes the app run on localhost:3010. But this is not what we want! We want the app to build and use the already-running Node server to run the app on Heroku instead of this newly-created dev server.

This is where my knowledge came to a startling stop: we used create-react-app to build the application, and it has many many dependencies to get it to run, including webpack-dev-server. I needed to figure out how to get it off of the default dev server and run build instead. This is normal for React apps apparently. But I don’t know React!

Moving React App Off Of Dev Server

In the blog posts mentioned above, one of the essentially just created a dev environment for the production server. I don’t really think this is ideal. The other blog post had a different file structure, with the Express and React servers in one root directory. Our setup is different, so this didn’t work exactly. A third example also had the two servers together.

I worked on this for a few hours but didn’t come to a solution yet, so will have to post more on that next time!

Other Stuff

Today’s coding session was with a Meetup group I used to join before I moved away…nice to be back again! I also got to work with one of my Chingu teammates in person which was really cool.

Up Next

Goal is to get the app successfully deployed tomorrow latest!