Deploying to Heroku

This video was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Enroll now to view this video

In this lesson, we are going to look at deploying our React on Rails app to Heroku.

It is not much different than deploying a React-Rails gem app, which we saw it a previous lesson, but because we're using  Node as well in this app, we need to add couple of extra things to get this to work on Heroku.

I am going to assume that you already have a Heroku account and you've set up the Heroku toolbelt on your machine, and you've got Git setup and your repository. 

First thing to do is to create a new Heroku app for our local repository. I am going to do that on the command line by typing 

$ heroku create

Heroku automatically generates an app and gives it a name.  And it also adds it as a remote to Git.

Next, we need to add buildpack.

Heroku buildpacks are a way for transforming your deployed code into what Heroku calls a slug. Buildpacks are composed of a number of scripts, depending  on what languages you are using.

We're using Ruby and JavaScript so these scripts will  retrieve dependencies, create the assets, and compile code in order for Heroku to then finally run it on its dyno. 

So first I am going to add  the Heroku Ruby buildpack on the command line.

$ heroku buildpacks:set heroku/ruby

Then we need to add the NodeJS buildpack. Now we have two buildpacks on our Heroku app.

$ heroku buildpacks:add --index 1 heroku/nodejs

The next thing we need to make sure is to have the PostgreSQL gem installed. 

Now, we're already using PostgreSQL in this app, we already set it up in previous lesson so we don't need to change anything here. 

I can check that; if we look at our Gemfile, we're using the pg gem in production:

group :production do
  gem 'pg'

We're still using sqlite in development because we don't really need PostgreSQL, we're not using any of its special features. 

But Heroku requires PostgreSQL so we've added that gem already. We don't need to change any of that. 

And let's check the Git status. 

As there is nothing to commit, now we can actually push to Heroku. As I'm working on a different branch, not on master,  I will use the command git push heroku, and I will push it from this branch so you can do this, you can write the source branch, your local branch, colon, and finally the branch you want to push to. 

So I will write 

$ git push heroku calreact-ror:master. 

And wait for the operation to finish. It'll probably take a few seconds.

Ok, once that's done, we need to first migrate that database. 

So I am going to run: 

$ heroku run rake db migrate -a intense-wave-21643

and then the name of the app, because I have a few different Heroku apps running here. I need to make sure I specify the name of the app - that's intense-wave-21643 - and then I run that. It again should take a few seconds.

When the migration is done, then I can run: 

$ heroku open

and that'll open the app in a browser. 

Open the console then, make sure everything is good. No errors, no warnings.

To test the app, we make an appointment. For example, with appointment time 23 February, 9 AM and title 'Team standup meeting' and make sure it works.

So that's how we deploy our react_on_rails app on Heroku.

This lesson was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Get the full course

You're viewing a lesson from an old course. Click here to get access to the new version.