Your Mission

This guide will show you how to setup your computer to follow along with all the CWDG sessions. Everything we use here will be used again countless times during the course of your web development career.

The goal for tonight is to run a simple web server and publish the code to the internet.

1. Setup the Ruby Version Manager

First we will install RVM. This is a program which does some basic path manipulation to ensure you are using the correct version of ruby.

It is recommended that you simply follow the Installation Instructions on the main RVM website. The project is quite well documented in both how to use RVM and also why.

Apple Users take note! Make sure you look into the Special Instructions for your computers.

If you are a audio/video person, you can check out the RVM Screencast, but your milage may vary.

I also recommend you run rvm requirements and make sure all the required libraries are installed correctly. This will prevent problems down the road and add a few optional, but wonderful features to ruby.

Once RVM is installed, I recommend you close all your terminal windows. Reopening your terminal, you can check to make sure that rvm is working.

rvm list

If the command works, you may see something similar to

rvm rubies

=* ruby-1.9.3-p194 [ i686 ]

# => - current
# =* - current && default
#  * - default

You may not have any “rubies installed”. I recommend that you then run:

rvm install ruby-1.9.3

While this is doing it’s thing (it will take a while), you can move onto steps 2 through 4.

2. Install Git

We also want to make sure we can save our work permanently. We will use the version control system Git.

Linux Users: Your favorite package manager will have a package for git. You have my word as the anonymous narrator of this guide.

For example, Ubuntu Users will use the command sudo apt-get install git.

Apple Users: You have a couple of options. If you are using Homebrew, use brew install git. If you have no idea what Homebrew is, you can simply Download Git from their website.

If you get lost, Github provides detailed instructions that are much better than mine.

3. Signup for a Github Account

We want somewhere to put our code. As we are learning, we will be making our code open source. This is fantastic because we can learn from each other.

We can also use Github for free!

Go Sign Up now.

Github has fantastic documentation detailing how to use Git and take advantage of their services. You can explore this yourself now. We will also begin covering git in more detail later this semester. Very useful tool to know how to use. +1 Marketable Skill.

4. Setup SSH Keys

In order to use git from your terminal, you will need to setup some authentication keys. Github uses SSH keys to authenticate users attempting to push code to a repository (save code).

They have a awesome guide for this. It is even tailored to your favorite operating system!

When generating your keyfiles, any options in brackets are default options. I recommend you leave the filename of the keys to be their default (id_rsa).

You know you’ve got it working correctly if you are able to run the command

ssh -T git@github.com

and see the output

Hi *USERNAME*! You've successfully authenticated, but GitHub does not provide shell access.

When you get this working, you know you’re doing great.

5. Install Sinatra

Now that you have RVM with ruby-1.9.3 installed, we can start using ruby. You are going to run the command

gem install sinatra

This will install the Sinatra Web Framework. It will be our tool of choice for the next few weeks as we explore web development.

6. Create Your First Website

Now we get to CREATE! Create your first website!

The plan: We are going to create a project directory, a server file, a documentation file. We’ll then see our creation run in our browser. Finally we’ll push the results to Github.

Open your terminal and open a text editor. Run:

mkdir -p ~/cwdg_projects/hello_sinatra
cd ~/cwdg_projects/hello_sinatra

Copy the following text into your text editor and save the file as hi.rb:

require 'sinatra'

get '/hi' do
  "Hello World!"
end

This is going to create a page that just says “Hello World”.

Now you will start the server by running:

ruby hi.rb

It should output something similar to Listening on 0.0.0.0:4567.

You can look at this page by pointing your browser at http://localhost:4567. You should get an error page from Sinatra (“Sinatra doesn’t know this ditty”).

Now go to http://localhost:4567/hi. You should see “Hello World!” in your browser.

VICTORY!

7. Push to Github

Now we need to save this success for posterity. Create a New Repo on Github. Name it hello_sinatra or whatever you like. Check “public” and hit “create repository”. Now we’ll follow the directions on the next page.

With your text editor, save a file called README.md in this directory with the text:

A basic Sinatra app.

In your terminal, run:

git init
git add hi.rb
git add README.md
git commit -m "Basic Sinatra App"
git remote add origin git@github.com:YOUR_USERNAME/hello_sinatra.git
git push -u origin master

Make sure you used your own Github username. YOUR_USERNAME is a placeholder. Replace it with whatever your real username is. You can check the example I created if you like.

Check the Github page again. You should see your code saved to Github now!

MISSION ACCOMPLISHED!

Everything is setup. Next week we will build on the work you did here. You can read up on Ruby, Git, Github, Sinatra, or Web Development in the meantime.

FAQ

  • What do you mean by “run this command”? - In your terminal application, type or paste the code snippet and hit enter.

  • I’m typing my password, but nothing shows up. - Don’t worry! It is still working, it is just hiding your password from anyone who might be standing behind you. When you are finished, just hit enter.

  • Zlib isn’t installed? - We noticed that some people using Ubuntu had issues installing Sinatra because of a missing dependency. Follow these instructions in order to get your gem installs to work.

  • I was installing XYZ, it says it failed. What should I do? - Try thinking of your problem in its general terms, then typing them into Google. If you have a specific error message, try that. Stack Overflow is a pretty good resource for common problems.

  • Which text editor should I use? - It doesn’t really matter. If someone tells you to use Emacs or Vim, they mean well, but are likely just going to confuse you. You might want to try Gedit or Sublime Text 2.

  • I’m stuck. - Step 1: Don’t Give Up! - You probably ran into a problem someone else is having. Please feel free to send an email out with a detailed description of your problem. Someone will likely be able to help. You should include what operating system you are using, and which steps have been completed successfully.

  • I found an error/typo/omission in this guide. - Please email cwdgosu@gmail.com with your keen observation. If you feel really adventurous, you can submit a pull request with a fix or improvement.

But why are we installing XYZ program?

There are many options for how to create web applications. We have chosen a few technologies to use so everyone is using similar software. We think the benefits of this will become apparent as people begin creating their own projects. Our club members will become experts in these tools capable of actually helping each other.

If you have questions about specific technology choices, please feel free to email the mailing list or cwdgosu@gmail.com.