How To Deploy Your React + Rails Application

Photo by Christina @ wocintechchat.com on Unsplash

Prep for Deployment

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

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.

  1. Download Postgres.app and follow installation instructions for your operating system
  2. Once installed, delete your Gemfile.lock and make these changes to your Gemfile: Replace gem 'sqlite3' with gem 'pg'
  3. Run bundle install
  4. 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

Deployment Outline

  1. Setup backend to host on Heroku.
  2. 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.

  1. If you don’t already have one, create an account with Heroku.
  2. Install the Heroku CLI either through direct installation on their site or through the command line: brew tap heroku/brew && brew install heroku .
  3. cd into your application and sign into your Heroku account via terminal with the command: heroku login .
  4. Then to create a project on Heroku, use the command heroku create you-app-name .
  5. 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.
  6. 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).
  7. Migrate your database with rails db:migrate and rails db:seed .
  8. Migrate your database to Heroku with heroku run rake db:migrate heroku run rake db:seed .
  9. To open your application now hosting on Heroku in your terminal use heroku open .

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.

  1. If you don’t already have one, create an account with Netlify.
  2. Next select the option “New site from Git”.
  3. Select your Git Provider (in this case we will select GitHub).
  4. Authorize Netlify to have access to the repository in which your application exists.
  5. You will then be asked to select the repository and choose accordingly.
  6. After selection, default settings will populate and you will click on “Deploy site” at the bottom of the page.
  7. 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.
  8. 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”.
  9. 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!
  10. 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 .
  11. 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.
  12. 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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store