from zero to deploy


Ashley Williams, NYCDA

Tuesday, 26 March 2013

Review


By now you should be able to:
  • Abstractly explain how websites work
  • Write semantic HTML markup, using HTML5 tags
  • Write CSS, and be able to refactor using DRY styles
  • Be able to float DOM objects and use Clearfix
  • Understand positioning, display types, and the box model
  • Apply Twitter Bootstrap boilerplate styles
  • Use Google web fonts

Websites


  • A website is (usually) hosted on a remote computer called a _______________
  • The ___________ retrieves and sends data via the __________ using _____________________
  • There are many types of browsers, the most popular are:
_____________, ________________, and _______________

HTML


  • HTML is a _______________ language
  • The main unit of HTML are _______________ which look like _________________
  • HTML is used for __________________

CSS


  • CSS stands for _____________________________ and is used for _________________
  • The main units of CSS are called _______________ and ___________ and they look like ___________________
  • CSS can be added to a site 3 ways: ____________, __________, and __________ but they best way is _________________ because ___________________

selectors

  • There are 3 primary types of selectors: __________, _________, and ______________
  • The priority of a selector is based first on its ____________ and then on it's _______________

Inheritance

  • when DOM elements are nested it creates a _________/______ relationship
  • _________ elements ___________ from their __________ elements

Positioning


  • There are 4 types of positioning: __________, ___________, _________, and _________
  • _____________ is default

Title

environment


  • Install a text editor (sublime text 2)
  • Install github
  • Install RVM
  • Install ruby
  • Install homebrew
  • Install rubygems
  • Install Rails

Install RVM

RVM is a program that allows you to install and manage multiple versions of Ruby on a single computer. 
R uby   V ersion   M anager

  • go to https://rvm.io
  • open Terminal
  • cut and paste the line in the white box:
\curl -L https://get.rvm.io | bash -s stable --rails --autolibs=enabled
  • wait until complete

Install Homebrew

Homebrew helps your operating system manage packages. This helps you install and manage languages, language versions, gems, frameworks, etc. with significantly fewer problems. (NB: Homebrew is written in Ruby)

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
  • Wait til done
  • In terminal type
brew install automake

Install Ruby

Ruby is the language that the Rails framework is written in. Most of the code you will write while making a Rails app will be Ruby, ERB (embedded ruby), or a preprocessor that requires a Ruby driver (HAML, SASS/SCSS, Coffeescript)

  • Check your current version of Ruby by going to terminal and typing
ruby -v
  • If it is not 1.9.3, install version 1.9.3 by typing
rvm install 1.9.3

Create a gemset

In order to have Rails applications run, sometimes you need other software. These software are called 'gems'. Gems are self-contained packages of  Ruby code.

  • Go to terminal and type
rvm use 1.9.3@rails3tutorial2ndEd --create --default

Ruby Gems

RubyGems is a package manager (a bit like Homebrew) and comes included in RVM. 

  • Test to be sure you have RubyGems
which gem
  • Make sure it is up-to-date
gem update --system 1.8.24

Install Rails


  • Go to terminal and type
gem install rails -v 3.2.11
  • Check which version by typing
rails -v

your first rails app


  • Create a directory in your user root folder called "rails projects"

In terminal, navigate to inside the rails projects folder,
then type:

rails new first_app

smell the roses


  • Take a look at the output in the Terminal
  • "rails new" create a directory structure and several files
  • It also runs something called "bundle install" which relates to your gems and we'll touch upon later

Explore the directory structure for a minute. Consider:
  • Where would you put your HTML pages?
  • Your CSS?
  • Your images?
  • What is new here? What do you think it does?

Gemfile

  • The GemFile contains all the gems for your Rails app
  • It can be separated out by environments
gem 'rails', '3.2.13'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

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

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails', '3.2.5'
  gem 'coffee-rails', '3.2.2'
  gem 'uglifier', '1.2.3'
end

gem 'jquery-rails', '2.0.2'

Gemfile


  • bundle update
  • bundle install

These commands will update, fetch, and install all the gemfiles you need to get your app up and running.

**YOU MIGHT GET AN ERROR HERE WHICH REQUIRES YOU TO INSTALL XCODE

Server


  • rails server, or rails s
  • 127.0.0.1 = localhost, port: 3000
  • Open localhost:3000 in your browser to see your app


Functionally, rails s starts a local server on your machine that you then access via your browser as the client. You act as both client AND server.

GET IT ON GIT


  • Create a new repo
  • git init
  • git add .
  • git commit -m "initial commit"
  • git remote add origin <repo addy>
  • git push -u origin master

DEploy to Heroku


Heroku is a cloud application platform that allows you to host apps that require server side processing and a database. You don't need to worry about any of that because Heroku does it for you.

  • http://www.heroku.com
  • Go and create a user

Gemfile


We need to update our production database because Heroku uses POSTGRES and we are using SQLITE

Add to your gem file

group :production do
  gem 'pg', '0.12.2'
end


Then run 'bundle install --without-production'

Login, create, deploy


  • In Terminal, type 'heroku login'
  • Then navigate to the directory of your rails app and type:
heroku create

  • Then push to heroku!
git push heroku master
heroku open
Made with Slides.com