This guide covers a basic rails setup with javascript client side MVC framework.
After reading this guide you'll be able to:
This guide is designed for someone new to rails and javascript. You should have a good grasp of programming, but no experience with the web is needed. To be able to follow this guide you should have the following installed:
I wrote this guide on OSX, but it should be similar on Linux.
To demonstrate the framework, we are going to build a Foosball Ladder. It will consist of users, teams and matches. The ranking will be an ELO system, though it's not terribly important for the purpose of this guide.
The first thing you should do is see if Ruby is on your path, and install rails. If you already have this done, you can skip but make sure you have Rails 4.0.0 installed.
$ ruby -v
$ gem install rails
$ rails -v
I'm using ruby version 1.9.3 and rails 4.0.0rc2.
Now since we have the prequisite binaries installed, it's time to generate the project. Open your terminal again ( or use the same one ) and navigate to a place you would like your code to inhabit ( I like to use ~/devel, some people like ~/Code, it's up to you! )
Generate the rails project by:
$ rails new foosball-ladder
This will create a default rails 4 project into the directory "foosball-ladder". Go into that directory and open the Gemfile in your favourite text editor.
For this project my Gemfile looks like this:
source 'https://rubygems.org'
gem 'rails', '4.0.0.rc2'
gem 'sass-rails', '~> 4.0.0.rc2'
gem 'coffee-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-rails'
gem 'jbuilder', '~> 1.2'
gem 'unicorn'
gem 'turbolinks'
gem 'batman-rails'
gem 'devise'
gem 'sqlite3'
gem 'debugger', group: [:development, :test]
The important things being:
After you have saved the Gemfile, go into your terminal and type:
$ bundle install
This will install of the gems you indicated above.
Since we are using the default SQlite installation, we should only have to type:
$ rake db:create
And you should be good to go!
We'll be using the gem devise to handle user management. Don't worry, I've never used it either.
Now we'll run the generator:
$ rails generate devise:install
Follow the instructions on the screen, they're pretty important.
Next we'll generate a User
model
$ rails generate devise User
We can worry about the rest later.
Now to the meat, we'll be generating a default configuration for batman.js.
From your project root do the following:
$ rails generate batman:app
All of the batman.js files will be app/assets/batman
. For the context of these tutorials, make sure you look there first. There will be other javascripts in app/assets/javascripts
but those are the rails defaults.
Ok, now we have some javascript in there! We will be using coffee-script
, which many find easier than dealing with javascript
( myself included.)
It's a good idea to use source control, we will be using git and using Github as the server. The repo for the code used in this project will be availble on my github [http://github.com/ibawt/foosball-ladder].
First open your terminal and go into the root of your project ( in my case ~/Code/Ruby/foosball-ladder
)
Type the following:
$ git init
This will create an empty repository.
Then add all of your files:
$ git add .
$ git commit -m "initial commit"
If you don't want to host your code on Github you can skip this next step.
Go to Github, navigate to create a repository and make one called foosball-ladder
. You omit the .gitignore
, rails will generate one for you.
Now back to the terminal and type:
$ git add remote origin https://github.com/<username>/foosball
$ git pull --rebase
$ git push origin master
Now you have source control setup, with an easy way to share your code with others or show it to prospective employers.
Sort of, lets generate the default tables that devise
made by the following command:
$ rake db:migrate
Now you can start rails from the root of your project:
$ bundle exec rails s
And open a browser to http://localhost:3000 and you should see the batman.js starting page!
Now go drink some beer.