Deploying A Rails/React App with Heroku and Netlify
I finally got around to deploying one of my most recent apps, MusicTaste, and it wasn’t as bad as I originally thought. I created the app using Rails as an API for the backend and React for the frontend. I know you can deploy a Rails/React app with both being on Heroku, but I heard that it’s better if you separate the two. I used Heroku for the backend and Netlify for frontend. I didn’t have to change much of the code to fully deploy both, but it was still a process.
One of the first things that I had to do for Heroku and Netlify was to create an account on their website. They make access to your repos easy by allowing you to connect your Github account to their website and selecting the specific repo that you’re planning to deploy. Just like when I was developing MusicTaste, I started the deployment of my website with the backend first. There was an additional step after creating my account on Heroku that made the process of deploying my backend even easier: Heroku CLI. I downloaded Heroku Command Line Interface (CLI), which makes it easy to create and manage your Heroku apps directly from the terminal.
Since my Rails API was already fully functional, after downloading Heroku CLI, it became just a matter of typing what’s needed in the terminal to get to the next step of deployment: heroku login → heroku create → git push heroku main → heroku open. I admittedly did skip over a few steps, such as verification, but you’re essentially done after those five steps. For more detailed instructions, you can read the full Heroku docs here: https://devcenter.heroku.com/articles/getting-started-with-rails6. “Heroku login” requires you to login to your Heroku account in the terminal, while “heroku create” creates a name for the repo on Heroku, which can be changed to a unique name in the settings on their website. “Git push heroku main” is the most needed step to fully deploy the API because it puts everything on Heroku’s servers and “heroku open” will just open the api/website from the terminal.
I did all of that without having to change the code that much, but I did have to change the version of ruby that I was using before it would push to Heroku’s servers. The version of ruby that I was using was not compatible with Heroku, so I needed to update to ruby “2.7.2”. You can see the full list of compatible versions here: https://devcenter.heroku.com/articles/ruby-support#ruby-versions. The only other piece of code that I need to change was the cors file to allow the netlify app access to the API. I used ENV[‘FRONT_END_URL’], which is an environmental variable that would allow access from localhost url, assigned inside a .env file, and the netlify app depending on which is trying to gain access.
Netlify was just as simple to deploy my react app. Since I already connected my repo for the frontend of MusicTaste, I really only needed to just deploy it once I selected the right repo from Github. I did have to change the code in a similar way to what was done for the backend on heroku and create an environment variable under site settings → build and deploy → environment.
My variable was REACT_APP_BASE_API_URL, which I use to connect to the heroku API. I created variable: const baseURL = process.env.REACT_APP_BASE_API_URL in my file with the fetch request to ensure they used the right address. I also created a .env.develpment file to use my local host API address during development. I can use maintenance mode to modify the app if needed while keeping it the same on the web.
If you’ve been following along, you’ll notice just as I did, that it’s not the complicated to deploy an app with the frontend and backend on Netlify and Heroku respectively. I had to make minor adjustments to the code to get it to work in production and development, but otherwise it was less than 10 steps on each platform. You can check out music taste here: musictaste.netlify.app. It’s not mobile friendly YET, especially in portrait mode. You can get a relatively normal experience in landscape mode, but I have to work out some kinks.
