Mr Hyde

A programming blog written in Jekyll

Making a web app with Ruby on Rails (vol. 1)

| Comments

Jewels, trains and web apps

I’m learning how to build web apps using the Ruby on Rails framework. Rails is a framework based on the Ruby language that famously predicates convention over configuration, to help ease the making of web-apps. Share with me in the excitement, adventure and experience points. Hmmm… on second thought, not the experience points.

When I’m not doing science or programming. I dance Argentine Tango and DJ. I also translate tango lyrics. My translation and DJing website is one of several websites doing this. Too bad that it’s difficult to aggregate all these translations into one place and find who has translated what.

Maybe someone could create a database where all these lyrics are organised. Maybe that someone is me. Let’s find out.

Getting our gear together

I’m going to gloss over how to install Rails on your operating system, as there are many a resource on how to do this. If you are on Linux or a Mac, the Rail’s Guides first guide should sort you out. Otherwise, if you are like me and have a Mac, you might need soemthing a bit more involved. If you are on Windows… sorry mate, you’re (almost) on your own! ;–)

Since I’m going to be hosting my app in Heroku, I will also need to have PostgreSQL installed. On the Mac, this is as simple as ‘brew install postgresql’ if you use the Homebrew package manager or with the Postgres.app. Procedures for this will vary across Linux distros, and if you are using Linux you are probably savvy enough to use your package manager.

You will also need to get a Heroku account, and set up some SSH keys on your system, and a detailed walkthrough for setting up a Rails project.

Let it be no secret that I have borrowed heavily from these resources.

The quest begins!

Let’s ask rails to create a new project that we will call ‘tangoLyricsDB’

$ rails new tangoLyricsDB --database=postgresql

Let’s cd inside and see what is there

$ cd tangoLyricsDB
$ ls

We should see a set of files and directories, which make up the application. The most important ones for us initially will be the app folder, which contains our MVC (Model View Controller) files.

Before we can put our app on Heroku, we need to set up some version control with git. If you don’t know git, I’d suggest you do this tutorial.

$ git init
$ git add .
$ git commit -m 'Raw Rails app'

Now we’re ready to put our app on Heroku

$ heroku create

You should see something along these lines:

Creating frozen-samurai-9999... done, stack is cedar
http://frozen-samurai-9999.herokuapp.com/ | git@heroku.com:frozen-samurai-9999.git
Git remote heroku added

Now we can push it all to the cloud:

$ git push heroku master

If it asks you about RSA fingerprints, type ‘yes’.

However, if we go to our app address (i.e. http://frozen-samurai-9999.herokuapp.com/), we see but a warning message and not even a welcome screen.

The reasons for these are manifold. Let’s solve them in turn!

1. rails_12factor

We saw this warning when we first pushed to heroku:

-----> WARNINGS:
       Include 'rails_12factor' gem to enable all platform features

Let’s add this _gem) it to project by opening the Gemfile in a text editor and adding at the end:

# Required by Heroku
gem 'rails_12factor', group: :production

…then we need to install it:

% bundle install

2. welcome page

We don’t have any page on which to land, so let’s harness the power of MVC and create one. First we make a controller:

$ rails generate controller welcome

The let us make a view by creating an index page under app/views/welcome/index.html.erb containing:

<h2>Tango Translation Database</h2>
<p>
  The database is not working yet, but it can tell you the time: <%= Time.now %>
</p>

Then we need to route the user to the right place when we open the app by editing the routes in config/routes.rb and adding a line so it looks like:

Rails.application.routes.draw do
  root 'welcome#index'
  [... Some comments ...]
end

3. migrate the database

You will probably also need to create and migrate your rails database by running:

$ rake db:create db:migrate

Making it all work

Check that it all works locally by running the rails server:

$ rails server

…and visiting the local webpage http://localhost:3000.

If it all works, let’s add the files to the staging area, commit them and push it to the heroku git repository:

% git add .
% git commit -m 'Added rails_12factor and routes'
% git push heroku master

If you now go to your app address you should see your beautiful webpage:

% heroku open

So we have a basic website, in the next installment we will start to flesh it out.

Comments