Deploy Rails API Backend to Heroku and React Frontend to Netlify

Congratulations, you have created an awesome application by using Rails API for backend and React for frontend. Now, it’s time to show your application to the world.

In this article, I am going to show you how to deploy your Rails API to Heroku and React to Netlify. The following topics will be covered:

• Convert your SQLite database to PostgreSQL
• Check your Ruby version
• Deploy backend Rails API to Heroku
• Deploy frontend React to Netlify

Convert your SQLite database to PostgreSQL

If you are using the SQLite database, you need to convert it to PostgreSQL. If you don’t have PostgreSQL, you can download it here.

1. You have to delete your Gemfile.lock in your directory folder if you are going to convert your database.

2. In the Gemfile, change gem ‘sqlite3’ to gem ‘pg’

to

3. Run bundle install.

bundle install

4. Go to your database.yml file inside your config folder, remove all the SQLite code. Copy and paste the code below into your database.yml file. Make sure change the info to your info inside this code.

# PostgreSQL
default: &default
adapter: postgresql
encoding: unicode
pool: <%= ENV.fetch(“RAILS_MAX_THREADS”) { 5 } %>
development:
<<: *default
# Your app name(e.g. my app directory folder name is fotoset-backend)
database: fotoset_backend_development
# you need to put your username and password here
username: Your PostgreSQL server name
password: The password you are using to login into your computer
test:
<<: *default
# Your app name(e.g. my app directory folder name is fotoset-backend)
database: fotoset_backend_test
production:
<<: *default
# Your app name(e.g. my app directory folder name is fotoset-backend)
# you don’t need username and password here below
database: fotoset_backend_production
username: fotoset_backend
password: <%= ENV[‘FOTOSET_BACKEND_DATABASE_PASSWORD’] %>

5. Make sure your PostgreSQL is running

6. Run rails db:setup, rails db:migrate, and rails db:seed.

7. Run rails s, go to your server localhost:3000 to check if everything is good.

Check your Ruby version

In order to deploy your application successfully, you might have to update your Ruby version. It’s because Heroku doesn’t support the old Ruby version. Skip this part if you already have the latest version(3.0.1).

1. Open you backend directory folder.

2. Check your Ruby version by typing ruby -v in your terminal.

ruby -v

3. Update Ruby version in your terminal rvm install 3.0.1 if you don’t have the latest version. It takes a few minutes to install.

rvm install 3.0.1

4. Once done, run rvm use 3.0.1 in your app directory folder terminal. Check Ruby version again ruby -v to make sure you have the latest version now.

rvm use 3.0.1

5. Go to your Gemfile, change the Ruby version to what you have now ruby 3.0.1.

6. Go to your .ruby-version file in your directory folder, change the ruby version to ruby-3.0.1.

7. Run bundle install.

bundle install

8. Go to your Gemfile.lock, copy and paste following to your Gemfile.lock if you don’t have them in your file. Heroku doesn’t let me deploy my app if I don’t have the following.

nokogiri (1.11.3-x86_64-linux)
  racc (~> 1.4)
nokogiri (1.11.4-x86_64-darwin)
  racc (~> 1.4)
PLATFORMS
  x86_64-darwin-20
  x86_64-linux

Deploy backend Rails API to Heroku

1. Create a Heroku account.
2. Install the Heroku CLI in your terminal. You can find instructions here. I use this command: brew tap heroku/brew && brew install heroku.

brew tap heroku/brew && brew install heroku

3. Make sure you login into Heroku website, then run heroku login in the terminal.

heroku login

4. Run heroku create, it will show you Heroku information in the terminal. Heroku will give you a random Heroku app name. You can change the name here after you finish all the steps.

heroku create

5. Run git push heroku main to push your app files to heroku.

git push heroku main

6. Run heroku run rake db:migrate and heroku run rake db:seed to host all your data in Heroku server. You can checkout my data here: https://fotoset.herokuapp.com/users

heroku run rake db:migrate
heroku run rake db:seed

7. Go to your Heroku website, I recommend connect your app GitHub repo with Heroku(image below).

8. You can also run heroku open in the terminal to run the Heroku server, the url will be like this https://fotoset.herokuapp.com/ after you run the command.

heroku open

Now, you don’t have to run rails s to get your data anymore. Hope this is helpful to you all. Please let me know if you have any questions or feedback! I am happy to help you out.

Deploy frontend React to Netlify

1. Create a _redirects file inside the public folder and copy and paste this code /* /index.html 200. Only if you are using react-router-dom. To prevent getting the error message after refresh your website page.

2. Create a Netlify account.

3. Go to New site from Git.

4. Connect Netlify to GitHub.

5. Search you GitHub repo, then press enter.

6. Choose the frontend repo you want to deploy.

7. Build command: CI= npm run build, then click Deploy site.

8. You can change you site name in the site setting.

9. Change all your frontend fetch url to heroku url (e.g. image below)

http://localhost:3000/photos => https://fotoset.herokuapp.com/photos

Bonus:

You will need to put your API key in Heroku Config Vars if you are using any API key in the backend. Same as Frontend, put your API key in Netlify Environment Variables if you are using any API key in the frontend.

Heroku

1. Choose the app that you are using a API key

2. Go to the app setting, then click the Reveal Config Vars

3. Copy and paste your API key variable name and key

Netlify

1. Choose the app that you are using a API key

2. Go to Domain setting

3. Go to Environment, click the Edit variables and add your API key

Thank you so much for following all the steps in this article. I hope this article helps everyone to deploy the website. If you think I explained something wrong or unclear, please leave a message in the comment. I am happy to help you out.