How I Have Created an Eventbrite Clone with Ruby on Rails: Part VII

6 min readFeb 13, 2022

How to Deploy a Ruby on Rails Project to Heroku

Part I Part II Part III Part IV Part V Part VI

This is part 7, also the last part of my tutorial on how to complete a project of cloning Eventbrite with Ruby on Rails from scratch (full project description here), which is a part of the Ruby on Rails Full Stack Path (link here) from the Odin Project. I will be showing you how to deploy the whole project to Heroku. This part is not in the requirements from theOdinProject, but I have done it as a way of learning and improving my technical skills.

If you have never heard of or used Heroku before, it is a beginner-friendly deployment environment that supports many languages and provides free deployment plans. So it’s a popular platform for developers to deploy their applications and show their work to the whole world.

Before we start working on the deployment, we first need to switch our database from sqlite3 (which is the default database for Ruby on Rails projects) to Postgresql since Heroku only supports Postgresql.

I’ll be following the tutorial here for this task.

Step 1. Switch Database to Postgresql

A. Add gem ‘pg’ to your Gemfile and delete gem ‘sqlite3’

# remove the following line
gem 'sqlite3' # add the following line
gem 'pg'

B. Run bundle install

C. Update database.yml configuration

Edit config/database.yml to have the following and remove everything you had about sqlite3. You can change the database names into different ones that you prefer but be careful to use a different database name for each environment (development environment, test environment and production environment).

default: &default adapter: postgresql encoding: unicode pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> timeout: 5000development:<<: *defaultdatabase: private_event_3_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:  <<: *default  database: private_event_3_testproduction:  <<: *default  database: private_event_3_production

D. Run rails db:create

Then you’ll see two databases, one for the development environment, and another for the test environment created.

E. Run rails db:migrate

You’ll see all the database tables being migrated.

F. Run rails s

Start your rails server by running rails s in the terminal, and then log-in from either Google or Github, you should see something similar to Fig 3, if you click Your User Details Page.

Fig 3. Your User Details Page after login

Step 2. Deploy Project to Heroku

Following this guide to get a general idea of how to deploy a Ruby on Rails project (6.X version).

Before doing anything else, install Heroku cli if you haven’t. Then continue with the following steps.

A. Login with heroku login

Enter heroku login in your terminal, and then heroku will ask you to click any key to continue, or press q to exit, shown in Fig 4. If you choose to continue, a window will pop up in your browser, as in Fig 5.

Fig 4. The prompt from heroku

Fig 5. A webpage will pop up asking you to log in with Heroku cli

After you enter you email and password, then enter your verification code for your account, and click Verify in Fig 6.

Fig 6. Enter your verification code to verify your Heroku account

Then the webpage will show Logged In, as in Fig 7, and in your terminal, it should also verify that you are logged in for your Heroku Cli.

B. Deploy your app to Heroku

In your terminal, run heroku create to create your heroku app. Like in Fig 8, Heroku Cli will tell you your Heroku deployment’s URI.

Fig 8. Run heroku create to deploy your app

You can verify that your Heroku app address exists by running git remote -v.

Fig 9. Verify if my Heroku address exists

Deploy your code by running git push heroku main.

Fig 10. Deploy your code to heroku by running **git push heroku main**

C. Migrate your database

Run heroku run rake db:migrate in your terminal. A part of the displayed is shown in Fig 11.

Fig 11. migrate databse to your Heroku deployment

D. Configure your config variables in Heroku

After you log in to your Heroku account from heroku.com, open your dashboard and then click your app name or just open the link

https://dashboard.heroku.com/apps/your_app_name/settings, and then click Settings, like shown in Fig 12.

Fig 12. Click the Settings tab in the menu

Then click the button “Reveal Config Vars” in the section Config Vars, illustrated in Fig 13.

Fig 13. Click the **Reveal Config Vars** button

Then add the key value pairs in your config/application.yml file to the text boxes shown in Fig 14, and then click the Add button.

Fig 14. Add all the key value pairs from config/application.yml to here

E. Change the redirect URIs for Google and Github OAuth

For the OAuth logins to work properly for the Heroku deployment, we need to change the redirect (callback) URIs which were configured for our local development environment.

Open https://console.developers.google.com/apis/credentials/oauthclient and then select the proper app name (if applicable). Click “More Products” in the right-menu, and then click “APIs & Services”, as highlighted in Fig 15.

Fig 15. Click “**MORE PRODUCTS**” and then “**APIs & Services**” on “**Google Cloud Platform**”

Then click “Credentials” in the menu of “APIs & Services”, as shown in Fig 16.

Fig 16. Click “**Credentials**” in the menu “**APIs & Services**”

Then click the pencil button for your web application under the menu of OAuth 2.0 Client IDs, as highligted in Fig 17.

Fig 17. Click the pencil button (edit button) to edit your Authorized redirect URIs

In the URIs 1 under Authorized redirect URIs, change the first part of the URI (http://localhost:3000) to the URI of your application on Heroku (mine is https://brenda-private-events.herokuapp.com, and yours should also end with herokuapp.com), and keep everything afterward the same. Then click the SAVE button, as shown in Fig 18.

Fig 18. Change the first part of the URI and then click the SAVE button

To edit the Authorization callback URL of the OAuth login from Github, open Settings menu, which will be shown after you click your avatar on Github, as in Fig 19.

Then click Developer Settings at the buttom of the left menu, as in Fig 20.

Then click OAuth Apps, and click your app name.

At the bottom of the next page, under the menu of Authorization callback URL, change the first part of the URI from http://localhost:3000 to your Heroku deployment URI (mine is https://brenda-private-events.herokuapp.com) and leave everything else the same, and then click Update application button.. Refer to Fig 22.