Deploying your React Rails app to Heroku

This lesson is from The Complete React on Rails Course

Get the course
Now that we’ve got our events app running locally, let’s put it online on a server so that we can use it from anywhere and share it with other people.

Even if it’s just a course project, it’s fun to put our apps out in the wild.

We’re going to use Heroku. It’s a hosting service that I highly recommend, especially for small projects. It’s free to use and you can get started in minutes.

You don’t need to worry about managing any servers. You can just push your git repo to Heroku and it automatically gets deployed in seconds.

You’ll need to sign up and install the Heroku Command Line Interface (CLI) on your computer.

In order to deploy to Heroku, the main change we need to make in our app is to add the pg gem because Heroku uses PostgreSQL as its database. We can’t use sqlite on Heroku.

So let’s change our Gemfile. Let’s move sqlite to the development and test group, and add the pg gem to a production group:

Gemfile:
group :development, :test do
   gem 'sqlite3'
end

group :production do
   gem 'pg'
end

And then install the gem:

$ bundle install
You also need to make sure you have set up a git repo in your code directory and commit all the changes we made to the code.

Now let’s create a Heroku app. We just need to run:

$ heroku create my-events-app
where my-events-app is the name of the app on Heroku.

If the name is available, Heroku creates an app at my-events-app.herokuapp.com.

If we don’t pass a name to heroku create, Heroku automatically generates a random name for the app.

Then let’s push our code to the git repo on Heroku:

$ git push heroku master
That’ll take a couple of minutes to deploy. It can take a bit longer the first time because it needs to install all the gems and setup the app.

Once that’s done, we can open the app in a browser either by typing in the app url or by running:

$ heroku open
But it won’t work yet because we need to migrate the database first. So let’s run:

$ heroku run rake db:migrate
Let’s also seed the database with some events:

$ heroku run rake db:seed
Now let’s refresh and there’s our Eventlite app running on Heroku!


If you’ve been following along, deploy your app to Heroku and add a link in the course Discussions section.