Editing Ruby and Rails Configuration

[[Category:Ruby]] [[Category:Web Development]]

== Overview ==

Notes on installing Ruby and Rails, and creating and configuring new Rails projects.

== Ruby and Rails installation ==

* [http://guides.rubyonrails.org/getting_started.html Getting Started with Rails] (RailsGuides)
* [http://rubyinstaller.org/ Ruby Intsaller for Windows]<br />Download the Windows Installer and run it. Make sure the option to update the environment path is selected.
* [http://www.sqlite.org/download.html SQLite Download Page]<br />The Rails tutorials use SQLite3.
* Install Rails:<syntaxhighlight lang="powershell">> gem install rails</syntaxhighlight>

== New project from the command line ==

''N.B. All of this can be accomplished from within the RubyMine IDE.''

'''Create a new app.'''

<syntaxhighlight lang="powershell">
> rails new project_name
</syntaxhighlight>

'''Generate a model within the app.'''

`Article` is the name of the new model. `title`, `teaser`, and `body` are fields on the model. `string` and `text` are the data types.

This doesn't create a table on the database, just creates definitions of the model within the app.

<syntaxhighlight lang="powershell">
> rails generate model Article title:string teaser:text body:text
</syntaxhighlight>


'''Run rake to apply the changes to the database.'''

[http://guides.rubyonrails.org/migrations.html Detailed documentation on migrations]

<syntaxhighlight lang="powershell">
> rake db:migrate
</syntaxhighlight>

'''Add some data in the `db/seeds.rb` file.'''

<syntaxhighlight lang="ruby">
# db/seeds.rb

Article.create!(title: 'first title', teaser: 'sample teaser', body: 'sample body text.')
Article.create!(title: 'second title', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')
Article.create!(title: 'third title', teaser: '3rd article teaser', body: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ')
</syntaxhighlight>

'''Commit the seeding.'''

<syntaxhighlight lang="powershell">
> rake db:seed
</syntaxhighlight>

'''Set up a simple route.'''

<syntaxhighlight lang="ruby">
# config/routes.db

Rails.application.routes.draw do
  resources :articles
  route 'articles#index'
</syntaxhighlight>

'''Run the server'''

<syntaxhighlight lang="powershell">
> rails s
</syntaxhighlight>

The address for the server is [http://localhost:3000 http://localhost:3000]

== IDE ==

* [https://www.jetbrains.com/ruby/ RubyMine] (JetBrains)

== Rails and Twitter Bootstrap ==

Bootstrap is written in LESS, but there is an official port to SASS that is maintained by the Bootstrap team. 

=== Integrating Bootstrap with Rails ===

Install the Ruby Gems for Boostrap

<syntaxhighlight lang="ruby">
# Gemfile

...

gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'

# NOTE: The sass-rails gem is included with new Rails applications by default.
#       Please make sure that it is not already in your Gemfile before uncommenting it.
# gem 'sass-rails'
</syntaxhighlight>

Autoprefixer (`autoprefixer-rails`) is optional, but recommended. It automatically adds the proper vendor prefixes to your CSS code when it is compiled.

To install the gems, run:

<syntaxhighlight lang="powershell">
> bundle install
</syntaxhighlight>

=== Import Bootstrap CSS assets ===

Rename `app/assets/stylesheets/application.css` to `app/assets/stylesheets/application.css.sass`.

Import the Bootstrap assets in the newly renamed `application.css.sass` file.

<syntaxhighlight lang="css">
// app/assets/stylesheets/application.css.sass

...

@import "bootstrap-sprockets"
@import "bootstrap"
</syntaxhighlight>

When you compile, imported assets render a compiled version of their contents where the `@import` statement was found.

=== Import Bootstrap JavaScript assets ===

Add directive to `app/assets/javascripts/application.js`.

<syntaxhighlight lang="javascript">
//= require bootstrap-sprockets
</syntaxhighlight>

This must come after 

<syntaxhighlight lang="javascript">
//= require jquery
</syntaxhighlight>

The file should look like this

<syntaxhighlight lang="javascript">
// app/assets/javascripts/application.js

...

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
</syntaxhighlight>

It's important this this is the last thing to be required:

<syntaxhighlight lang="javascript">
//= require_tree .
</syntaxhighlight>

`//= require_tree .` complies each of the other JavaScript files in the javascripts directory and any subdirectories. 

* [http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1 Boostrap Tutorial on Rails, Installation]