Deploying any React app on Heroku

There’s no doubt Heroku is popular infrastructure platform. Times of running your own dedicated server are not gone but for development and low volume purposes using services like Heroku does make a lot of sense.

Recently I worked on React frontend for cool gaming startup, and yes, they used Heroku for servers. It was interesting to explore Heroku since my experience is mostly with Amazon AWS and dedicated servers.

Deploying static app should be easy there right? At least they make it sound like that.

Here is the article https://blog.heroku.com/deploying-react-with-zero-configuration I did not use create-react-app so it looked like I cannot use ZERO CONFIGURATION deployment option :)

But yea, being a dev, I dug under the hood and here’s what I’ve found.

There’s JSON for everything

First of all, Heroku uses something called Buildpacks to build your app on the server.

Create react app buildpack is configured to build static node server that serves React app. It is based on Static Buildpack which gave me a hint how we can configure our own repository to support Create React App buildpack.

Static buildpack uses static.json JSON config file to instruct server how to serve your application.

So basically, all you have to do to run your React app on Heroku server is…

1. Configure Heroku to use Create React App buildpack

2. Add static.json file to the root of my project repository

That’s it. Next time you push your repo that is connected to Heroku, app will build using Create React App buildpack, and it will start based on static.json file.

In this basic example we set a root of our server, dist/ in my case, and configure all routes to point to index.html.

For more configuration options please refer to Static buildpack docs on configuration.

If it’s broken on build…

On your Activity window you can track progress of builds.

Builds can break… like this :(

You can view build log and see what is it. I only had issues after installing some new dependencies, possibly if you use Yarn, which I do.

To remedy this issue delete yarn.lock from your repo and push again. Heroku will then proceed to build a project from scratch and it will succeed.

Hope it helps and follow me Alex Gvozden for more React and webdev stuff.

I am also available for React and ReactNative work on hourly or full time. Feel free to contact me at [email protected] if you want to discuss.