Intro to the Asset Pipeline

Intro to the Asset Pipeline


Warmup

  • What do you already know about the asset pipeline?
  • What have you heard?

Learning Goals

  • Explain the purpose of the asset pipeline
  • Explore Heroku
  • Run your app in the production environment locally

What Are Assets

  • Javascripts
  • CSS files
  • Images

Where Do Assets Live?

  • app/assets: assets owned by the application; includes custom CSS, JS files, and images
  • lib/assets: assets you created, but aren’t necessarily specific to your application
  • vendor/assets: assets created by third-parties.

note: the files in app/assets are never served directly in production. note: assets in lib/assets and vendor/assets will not automatically be included in the precompile process


The Asset Pipeline

  • Sprockets gem, enabled by default
  • Asset loading is expensive
  • Faster asset loading = faster performance
  • Framework to concatenate, minify, and preprocess JS, and CSS files
  • Depends on gems: sass-rails, uglifier, coffee-rails

Asset Pipeline Scavenger Hunt


What Does Minified CSS Look Like?

inline


What Does Minified JS Look Like?

inline


Duties of the Asset Pipeline

  • Precompiling higher-level languages - Sass for CSS, CoffeeScript for JavaScript
  • Concatenating assets - one master .js file and one master .css file which reduces the number of requests a browser makes in order to render our web page
  • Minifying files - removes whitespace, comments, and shortens variable names

Manifest Files

  • app/assets/javascripts/application.js
  • app/assets/stylesheets/application.css

Directives in Manifest Files

  • Processed top-to-bottom
  • require_tree . recursively requires all files within app/assets
  • Files required in the manifest can live in app/assets, lib/assets, or vendor/assets

Directives in Manifest Files

inline


How Does Your App Know About the Master JS and CSS File?

In app/views/layouts/application.html.erb:

<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>

Heroku

  • When should you push to heroku?
  • Who should push to heroku?
  • Adding a collaborator: don’t clone the app from Heroku!
  • Add the Heroku remote instead (heroku git:remote -a app_name)

Do you need to keep the strange name that is automatically created for you?

https://enigmatic-lowlands-98091.herokuapp.com/


Master

  • Heroku likes your master branch
  • If you don’t want to push master, you need to do git push heroku your-branch-name:master

Databases

  • Will need to migrate/seed on heroku
  • Unable to create/drop on heroku
  • Instead, you can heroku pg:reset DATABASE if you need
  • Don’t get too comfortable dropping your production database!

What about your assets?!?

  • Heroku precompiles your assets automatically
  • Precompiled assets receive a ‘fingerprint’ to override caching strategies when they change
  • In order to access your some assets you’ll need to use helpers to access the fingerprinted version of the asset that’s being served

Debugging

  • heroku logs
  • heroku logs --tail
  • rails_12factor - in production for earlier versions of rails. Does not need for newer rails apps. Works with heroku.

Running Your App in Production Locally


Set SECRET_KEY_BASE

  • rake secret
  • export "SECRET_KEY_BASE"="long_string"

Adjust production.rb

In config/environments/production.rb

  • config.consider_all_requests_local = true
  • Comment out the following:
  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
  • Copy and paste that line and set that variable to true, e.g.:
  config.public_file_server.enabled = true

Load DB

  • create_user -s -r app_name
  • RAILS_ENV=production rake db:create db:migrate db:seed

Precompile Assets

  • rake assets:precompile

Run Server

  • rails s -e production

Clobber

  • rake assets:clobber
  • Undo changes to config/environments/production.rb

Running Production Challenge

Lesson Search Results

Showing top 10 results