Deploying a react-rails app to Heroku

Linked Projects:

Calreact
 
Lesson links:

Lesson code - https://github.com/learnetto/calreact/tree/lesson-3.8

Heroku - https://heroku.com

The calendar appointments app running on Heroku - https://calreact.herokuapp.com

Calendar appointments app git repo - https://github.com/learnetto/calreact

Now that we've got our calendar appointments 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 toolbelt 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.

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

And let's make a new group production where we'll install the postgres gem:

group :production do
   gem 'pg'
end


You also need to make sure you have set up a git repo in your code directory.

If you got the code from the course's github repo, then it should already be set up. 

Otherwise you can create a git repo by installing git and then running this inside your app's root directory:

git init

Let's commit the changes we made to the repo.

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

heroku create calreact

where calreact is the name of the app.

If the name's available, Heroku creates an app at calreact.herokuapp.com

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

And then let's push our code to the git repo on Heroku:

git push heroku master

And that'll take a couple of minutes to deploy.

The first time it can take a while because it needs to install all the gems and setup the app.

Once that's done, let's open the app in a browser 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

Now let's refresh and there's our calendar appointments app running on Heroku!

Calendar appointments app running on Heroku

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



Liked this tutorial? Get more like this in your inbox