Deploying a React/Rails app with Netlify and Heroku

Before I dive in, let me give you a bit of background on how “Pet Roulette!” was set up going into deployment. First, I had two separate repositories. Secondly, I had created my Rails API with a Postgres database from the get-go, which is highly advisable if you do plan to deploy your app. Lastly, I used create-react-app to start my React application.

A few notes on why I chose to use Netlify over Heroku. One — deploying a dual repo to Heroku was significantly more complicated. Two, Heroku is a great free hosting solution for a Rails app, but it does go to ‘sleep’ after 30 minutes of inactivity, and takes a full 30 seconds to reboot. A 30-second wait to load a web page can feel like decades.

Netlify can only be used for static sites and has no ‘sleep’ or downtime. Sites are loaded immediately — which is a much better user experience. If you are fetching data from your Rails API to display in your app, it’s good to have the fetch request in the componentDidMount lifecycle method, and place it in App.js. This way, the API will be woken from the idle state as soon as the page is visited. You can also utilize the loading state to display a grey box or some sort of message for the brief delay, while the rest of your SPA is already rendered.