Asset Pipeline

assets_pipeline

Rails allows you to manage your CSS, JavaScript and images through the assets pipeline. Why would you want to manage your files this way? The assets pipeline lets you organize your CSS and JavaScript files with a file called the “manifest” file. For CSS the file is called, “application.css” and for JavaScript it is called, “application.js”. These two files are where you would link all of your CSS and JS files for your entire application. For example instead of linking your CSS in the head of your HTML document you can put all your CSS in the “application.css” file and those files will linked to your HTML documents. If you had many HMTL documents that required the same CSS file you would only have to write it once in the “application.css” file. If you require all of your CSS and JavaScript files through the manifest file they will compressed into one file. (The CSS will be compressed into one file and the same would go for your JavaScript.) This is great, because if you are only rendering one CSS file and one JavaScript file when your application gets loaded in the browser your application is going to load much faster. Basically one large CSS file and JavaScript file is better than ten small files.

Here are some basics about the “application.css” file: Screen Shot 2014-08-03 at 2.32.22 PM

  • When you first create your Rails application your “application.css” file is already in your app! It can be found in the app/assets/stylesheets directory.
  • When you open up this file you should see the following: Screen Shot 2014-08-03 at 2.35.01 PM
  • Most of what is here are comments about the file and can be delete. (All the comments are from line 2 – line 11).
  • Line 13 has: “*= require_tree .” This means require all CSS files that are in this directory.
    • When you use “*= require_tree .” your CSS files are going to be loaded in the order that they are currently in. This means that if your CSS files are being listed alphabetically that they will be required in that same order. If you want your CSS files loaded in a certain order then you would have to list them here manually.
    • To list your CSS files manually you would have to write them the following way. Screen Shot 2014-08-03 at 2.51.38 PM
    • Above I took out “require_tree .” and instead wrote out the names of my CSS files in the order that I would like them to be loaded in. If I didn’t do this and kept “require_tree .” then the file would have been loaded as “example_1” then “example_2”.
    • Note: you do not need to include the file extensions when you require your files in the manifest file.
  • Line 14 has: “*= require_self” This means that the file is going to require itself!

Here the “application.js” file: Screen Shot 2014-08-03 at 2.56.08 PM

  • The “application.js” file can be found in the app/assets/javascripts directory.
  • Here is how the “application.js” file will look when you first open it: Screen Shot 2014-08-03 at 2.57.43 PM
  • It is pretty similar to our “application.css” file. This file also contains a “require_tree .” which will do the same thing as in our “application.css” file.
  • This file also has comments which you can remove if you would like. (Comments are from line 1 – line 11)
  • Inside your “application.js” file there are some default JavaScript files that are going to be loaded into your application.
  • What if you wanted to load your JavaScript files in a specific order? You can require them individually and remover the “require_tree .”.Screen Shot 2014-08-03 at 3.02.58 PM

How do we tell if our files are being required?

  • Make sure that you have your Rails server running. Type in “rails s” in the root directory of your application in your terminal.
  • Go to view your application in the browser. Usually the default port number is “3000”, but you can always double check what port you are on by looking at your terminal when you run the rails server. Screen Shot 2014-08-03 at 3.14.40 PM
  • Above I typed in “localhost:3000” which is where my application is running on my local server. Then I typed in “/?debug_assets=1”
  • After you type that in and press enter you will want to view the source code for your application.
  • To view the source code you go to the menu bar for your browser, go to “view”, then “developer” and click “view source”. (This is for Chrome)
  • After you click “view source” a new window should appear with all the source code for the page you are viewing. Here is my source code: Screen Shot 2014-08-03 at 3.18.26 PM
  • Notice that all my CSS and JavaScript are included in the “head” section of my html.erb file. The only place that I had these files listed in my application was in my manifest files.
  • Also notice that all the files are listed in the order that I have specified them in. “example_2.css” being listed before “example_1.css” and the same is happening for my JavaScript files.

Image if I had a ton of CSS and JavaScript files that I wanted to include on multiple pages and wanted them in a certain order when they were loaded. By using the asset pipeline it is very easy to make sure all my files are included and in the correct order.

Devise Gem

username_password

Gems are a great way to extend the functionality of your program. One gem that we are going to look at today is the “Devise” gem. If you have an application that will have users that will be able to log into your application there has to be a way to authenticate that user. You need to make sure that the username and the password match.

Here is how you use Devise in your Rails application.

  1.  Go to your Gemfile and write: gem ‘Devise’
  2. Then in your command line type in: bundle install
  3. Then type in the terminal: rails generate devise:install
  4. In your terminal there should have appeared a list of steps that you will now have to do in your applications files: Screen Shot 2014-07-02 at 7.21.27 AM
    1. In your “environment” folder there is a “development.rb” file you have will have to paste the following line to the bottom of your file, but before the keyword “end”:
      config.action_mailer.default_url_options = { :host => 'localhost:3000' }
      
      

      Also notice that in your “environment” folder there are two other files. These files are for different stages of your app. One will be for development, one for production and one for testing.

    2. At the bottom of you “production.rb” file you will have to paste in the following:
      config.action_mailer.default_url_options = { :host => 'yourappsname.com' }
    3. Next you are going to have to define the root URL. Go to your “config” folder then in the “routes.rb” file. At the top of the file type the following:
      root "pages#home"
    4. Now we are going to have to set up our flash messages which will appear on the screen when our users either login successful or login incorrectly. In your “views” folder then in your “application.html.erb” file type the following:
      <% flash.each do |name, msg| %>
      <%= content_tag(:div, msg, class: "alert alert-info") %>
      <% end %>
    5. Go to your “application.rb” file and inside your mode as the very last line type in the following:
      config.assets.initialize_on_precompile = false

      This is going to be required later on when we push to Heroku.

    6. In the terminal enter in the following line: rails generate devise:views
      1. The above is going to create a lot of different folders and files for you which you will be able to see when you open the application in your text editor.

In the next post I will show you how to start setting up users using Devise!

Screen Shot 2014-07-02 at 8.59.25 AM

Resources:

1. Treehouse Blog: 10 Must Have Gems

2. Ruby for Newbies: Working with Gems

3. GitHub: Devise

file structure of Sinatra

files Sinatra is a library that makes web application and we are going to look at how the folders/files are assembled.

Screen Shot 2014-06-26 at 8.56.41 AM

  • All of our files for our application are in the ‘movies’ folder
  • ‘assets’ holds all of our files that work with visual aspects from our ‘views’ folder. CSS and JavaScript are here each in their own folder.
  • ‘config’ holds the ‘environment.rb’ file. This file sets up our connection to our database. In this example we are going to be working with ActiveRecord.
  • ‘db’ holds our ‘migration’ folder which will hold all our migration files. Migrations are how we edit our database. This is going to be where we create our table that will hold data.
  • ‘lib’ will hold all our the helper files for our application.
  • ‘models’ folder is where we have a ‘movie.rb’ file. This name for this file should be singular and should represent the data that you are working with. I choose the name ‘movie’ because that is the information we are going to be working with.
  • ‘views’ this is where all the files are going to go that the user will be able to see. In this folder we see an ‘index.erb’ file which stands for ’embedded Ruby’. This is going to be an HTML5 document with Ruby code to make our pages dynamic.
  • ‘app.rb’ file is where you are going to have all the routes for the application. All the GET and POST requests will be placed in here. This file determines what the user will see when they go to a URL.
  • ‘Gemfile’ is a file that we are going to require all our gems for the entire application. This is going to let us require all the gems in one file rather than having to require all the gems in multiple files.

Now that we have the file structure for our application how do these files communicate with each other? Before the app gets run, we have to do is set up our database. This is done through migrations, which we have in the ‘db/migrate’ directory. Inside this directory is our ‘001_create_movies_table.rb’ file. (Note: it is important that you label your migration files numerically because they will be run in numeric order.)


class CreateMoviesTable < ActiveRecord::Migration

def change
     create_table :movies do |t|
          t.string :name
          t.string :date
          t.text :description
     end
end

end

Now we are going to look at the ‘lib’ directory, which holds files that will be helpful to your application. Inside our ‘lib’ directory we are going to run our scraper file. This is going to gather all the data for our application and store it in the database. When the user goes to view our application the data that we gathered and stored in the database is now going to be able to view.

After the ‘scraper.rb’ file is run we will look at the ‘app.rb’ file, found in the main directory. In this file we will see all of the routes for the application.

Here is what our ‘app.rb’ file looks like:


require '.config/environment'

class MovieApplication < Sinatra::Base
register Sinatra::Reloader
register Sinatra::ActiveRecordExtension

set :public_folder, "#{__dir__}/assests"

get '/' do
@movies = Movie.all
erb :index
end

get '/movies.json' do
content_type "text/json"
Movie.all.to_json
end

get '/movie/:id.json' do
content_type "text/json"
Movie.find(params["id"]).to_json
end

run!

end

We also see at the top of the ‘app.rb’ file that it is requiring ‘.config/environment’. We can find the ‘environment.rb’ in the ‘config’ directory. Here we are requiring ‘bundler’ which will give us the correct version of the gems that we are using in the application. In this file we are also establishing our connection to the server. For this app we are using SQLite and we are calling our database ‘scraped_movies’. At the bottom of this file we are requiring all of our ‘models’ and everything in our ‘lib’ directory. This file is going to require our ‘bundler’ and establish the connection to the database for our app. Below is an example of the ‘environment.rb’ file:


require 'bundler'

Bundler.require :default

ActiveRecord::Base.establish_connection(
adapter: "sqlite3",
database: "db/scraped_movies")

require_all "models"
require_all "lib"

At the bottom of our ‘environment.rb’ file we can see that it is requiring all of our ‘models’ and everything in our ‘lib’ directory. The models directory is where we create classes for the data that we are working with. The classes will inherit from ‘ActiveRecord::Base’. It is here that we are able to validate if data is being passed into the database as the correct datatype. We can also specify relationships between models. For example if we wanted to have a relationship between movies and actors we could write the following:


class Movie < ActiveRecord::Base

has_many :actors

end

Now if the user were to go to the route we have created in our ‘app.rb’ they will be able to see our page! If the first URL they visit is with our route ‘/’ the user is going to see our ‘index.erb’ file. This file is found in our ‘views’ folder. Once this file is loaded it is also going to load the CSS and the JavaScript files that are linked to that page. The CSS and JavaScript files can be found in the ‘assests/ccs’ and ‘assests/js’ directories. Here is an illustration I drew that illustrates what is happening above:

client_server_blog