How To Deploy Your React + Rails Application

5 min readNov 10, 2021

Using Heroku and Netlify.

Photo by Christina @ wocintechchat.com on Unsplash

You did! You’ve successfully built out a couple of web applications that look amazing in your local web browser! Now if you’re like me in the job hunt, you may be looking into deploying your web application so that you can show your future employer the potential you have. Deploying my projects always seemed like a daunting task and I will say, I’ve put it off for quite some time, however, I felt like it was finally time. I also wanted to understand the process of deployment and potential issues since I knew this is something I would want to/will be doing in the future. So let’s get into it!

Prep for Deployment

Frontend and backend are separate repositories.
Change database to use PostgreSQL instead of sqlite3.

We want to make sure that our frontend and backend are separate repositories since we are utilizing two different hosts. This is important because we will be linking our repository to each host in order for our deployed application to continually update when changes are made and pushed to GitHub.

Change Database To PostgreSQL

Most likely, if you’ve used the default setup for your Rails application, then you are using a sqlite3 database. We need to change our database to PostgreSQL so that we can utilize the Heroku host.

Download Postgres.app and follow installation instructions for your operating system
Once installed, delete your Gemfile.lock and make these changes to your Gemfile: Replace gem 'sqlite3' with gem 'pg'
Run bundle install
Find your database.yaml file in the config folder. Comment out existing code and replace it with this:

default: &defaultadapter: postgresqlpool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>timeout: 5000development:<<: *defaultdatabase: your-app-name_development# Warning: The database defined as "test" will be erased and# re-generated from your development database when you run "rake".# Do not set this db to the same as development or production.test:<<: *defaultdatabase: your-app-name_test 
production:<<: *defaultdatabase: your-app-name_production

5. Then run the following in your terminal rails db:setup, rails db:migrate, rails db:seed, and rails s.

6. Then navigate to localhost:3000 in your local browser to confirm the postgresql configuration is correct.

Deployment Outline

Setup backend to host on Heroku.
Setup frontend to host on Netlify.

Heroku Setup For Backend (Rails)

Heroku is a well-known development platform for Rails applications. This hosting platform is beginner and user friendly, budget friendly, and deployment is typically quick.

If you don’t already have one, create an account with Heroku.
Install the Heroku CLI either through direct installation on their site or through the command line: brew tap heroku/brew && brew install heroku .
cd into your application and sign into your Heroku account via terminal with the command: heroku login .
Then to create a project on Heroku, use the command heroku create you-app-name .
To add your existing repository to the Heroku project you created, initialize Heroku git remote: git remote add heroku git@heroku.com:you-app-name.git.
Then you need to add, commit, and push this respository to your Heorku project with git add ., git commit -m"first heroku commit", git push heroku main (Please note that if your main branch is called ‘master’ use git push heroku master instead).
Migrate your database with rails db:migrate and rails db:seed .
Migrate your database to Heroku with heroku run rake db:migrate heroku run rake db:seed .
To open your application now hosting on Heroku in your terminal use heroku open .

Make sure to always push changes to GitHub and use git push heroku main in order to have those changes reflected to the user.

Netlify Setup For Frontend (React)

Netlify is another well-known software development platform geared towards frontend applications. Netlify is also user friendly, budget friendly, and is great for frontend developers because of its speed and its feature of continuous deployment. Any time that you push changes to GitHub, deployment will restart so that the user will always have the most up to date version of the application.

If you don’t already have one, create an account with Netlify.
Next select the option “New site from Git”.
Select your Git Provider (in this case we will select GitHub).
Authorize Netlify to have access to the repository in which your application exists.
You will then be asked to select the repository and choose accordingly.
After selection, default settings will populate and you will click on “Deploy site” at the bottom of the page.
Next, you’ll be redirected to the dashboard and under “Production deploys” is where you will be able to see if your application was deployed properly.
If deployed properly you’ll see “Published” if not you’ll see “Failed” and if it is still building out your application it will say “Building”.
Depending on the result of the build, you will need to take action accordingly. So just look out for the logs to point you in the right direction!
You will then want to update your fetch URLs to match the URL coming from your backend. In this case we use https://your-app-name.herokuapp.com/users .
Then make sure that your packages are installed and updated accordingly. Make sure to run npm run build to trigger deployment in Netlify and you’ll see another “Building” in progress.
Test out your application by making requests to your backend!

Conclusion

Going into this, I really did not expect deploying one of my applications would take all that long but I was definitely wrong. It took me about a day to correctly deploy both my backend and my frontend due to some dependency and version issues but once everything was up to date, the rest of the deployment process came easy! Make sure you do your research on each hosting platform before you make your decision and spend a lot of time on deployment so that you don’t waste time or money! As always, feel free to reach out to me with any questions and happy coding everyone!