Assets Pipeline - ruby-on-rails

I've got an issue with assets pipeline in production mode. I ranbundle exec rake assets:precompilein development and it works fine. However when I ran it in production server(after deployment), the css and js files can not be loaded properly. When I access css or js files through url /assets/[file_name], I get 500 error. I thought it's a permission issue but all files under /public/assets can be accessible. Production.rb and development.rb files are all intact(from scaffolding). I can see all the files listing in the html though. Any hint would be much appreciated. Thanks
production.rb:
# Code is not reloaded between requests
config.cache_classes = true
# Full error reports are disabled and caching is turned on
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = false
# Compress JavaScripts and CSS
config.assets.compress = true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation can not be found)
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners
config.active_support.deprecation = :notify
Gemfile(snapshot):
gem 'rails', '3.2.11'
gem 'pg'
gem 'json'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer'
gem 'uglifier', '>= 1.0.3'
end
gem 'compass-rails'
# Deployment related
gem 'capistrano'
gem 'capistrano-ext'
gem 'jquery-rails', '~> 2.0.0'
gem 'jquery-datatables-rails'
group :development do
gem 'guard'
end
Application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require dataTables/jquery.dataTables
*= require bootstrap.scss
*= require bootstrap-responsive.scss
*= require_tree .
*/
I have another application.css.scss for sass related:
#import "compass";
#import "compass/utilities/tables";
.ftr-ticker {
background: #333;
height: 25px;
width: 100%;
}
....

You have modified a manifest file application.css and I think that gives a problems . My advice is to rename your scss file to other name , not application (might be custom.css.scss) and include it in the manifest application.css file like this:
*= require custom
As you can see , the names of stylesheet files are not prefixed . Your *= require bootstrap.scss should be *= require bootstrap . I suggest also to move require_tree after all others requires. This Railsguide is going to help you with asset-pipeline in Rails 3.2.

Related

None of my Rails 5 assets are minifying in production

I have a Rails 5.0.0.1 app on Heroku and when I hit the developer console in Chrome and open up the CSS and JS files I can see that neither of them have been minified. This was first brought to my attention after completing a Google speed test.
This is what some of my setup looks like...
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require bootstrap-sprockets
//= require trix
//= require_tree .
application.scss
//Import bootstrap-sprockets
#import "bootstrap-sprockets";
// Import cerulean variables
#import "bootswatch/flatly/variables";
// Then bootstrap itself
#import "bootstrap";
#import "font-awesome";
// Bootstrap body padding for fixed navbar
/*body { padding-top: 60px; }*/
// And finally bootswatch style itself
#import "bootswatch/flatly/bootswatch";
// Whatever application styles you have go last
#import "overrides";
#import "trip";
I'm using the following gems:
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootswatch-rails'
gem 'bootstrap-social-rails'
gem 'bootstrap_form'
And I have the following options set in production.rb
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
I've precompiled and cleaned the assets and I've even bumped the assets version using
Rails.application.config.assets.version = '1.1'
I even nuked hell out of my assets folder using rake assets:clobber
Really at a loss now as to why none of these assets are minifying. Any help is much appreciated.
What's your Gemfile look like? Is there a JavaScript runner for the uglifier? therubyracer is often used, and I have been fairly happy with mini_racer and its enhanced performance.
In your Gemfile:
gem 'mini_racer'
Then run bundle install and commit.
To summarize the conclusion from my and OP's comments on the main post, the issue was not that minification isn't working, but that the minified assets weren't being used. This is because the assets at one point had been precompiled into public/assets and checked into Git; the public, unminified assets then took precedence over the minified assets when being served.
The solution, then, was to remove those artifacts from Git:
git rm -r public/assets
Checking precompiled assets into version control is generally discouraged, although it depends on your deployment system. With Heroku, there's usually no need. See Do you add public/assets in version control? for more details.

Assets pipeline doesn't work in 'application.scss' in my Rails 4.2 app

I'm new in Rails and apologize if that is a stupid question. But i cannot resolve my problem: I added Bootstrap to my new app but it still doesn't use any new styles.
I've renamed application.css to application.scss and created such structure:
|-stylesheets
|-elements
|--articles
|---article.scss
|-application.scss
Application.scss
/* User styles
* Plugins first
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import "elements/**/*";
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_self
*/
In Gem file i've added
source 'https://rubygems.org'
ruby '2.2.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2'
# Установка Bootstrap
gem 'sass-rails'
gem 'bootstrap-sass'
#Autoprefixer optional, but recommended. It automatically adds the proper vendor prefixes to your CSS code when it is compiled.
gem 'autoprefixer-rails'
Application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
I've tried to write any style rules in article.scss but my app doesn't use them, so as any Bootstrap styles.
there is an easier way, I will describe the sequence:
after adding gem 'bootstrap-sass' doing bundle install, restart server
than add in config/application.rb next string:
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
for your images, than create custom.css.scss in app/assets/stylesheets and add there #import "bootstrap";,
in your custom.css.scss you can write your own styles
I suspect you have an older version of bootstrap in your environment. Try updating your Gemfile with gem 'bootstrap-sass', '3.3.3' and running bundle. Make sure to restart your server after the update.
Alternatively, you can just run bundle update.
After several hours i've found a problem - my pages_controller was incorrect:
class PagesController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
end
instead of:
class PagesController < ApplicationController
def index_page
end
end
Controllers should inherit from main Controller!
P.S:
Adding string layout "application" to the wrong controller also helped:
class PagesController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
layout "application"
end
But I do not recommend go that way

Rails 4 app not loading CSS files

I have a rails app hosted on Digital Ocean (nginx server) managed by cloud66.
The app is minimizing all files under the assets folder, but seems not be loading them? or at least not applying my custom.css file and not loading the background image.
I have been trying everything possible, read many articles about the asset pipelines and still site is showing with no BG image and my rtl setting (right to left property in my custom.css) are not getting applied.
It is working well on my local dev environement, but when I run it on my local machine as production environment, I am having the same issue.
production.rb file
Tafqit::Application.configure do
# Settings specified here will take precedence over those in config/application.rb
config.eager_load = true
# Code is not reloaded between requests
config.cache_classes = true
# Full error reports are disabled and caching is turned on
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_files = false
# Compress JavaScripts and CSS
config.assets.js_compressor = :uglifier
config.assets.css_compressor = :sass
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
# Generate digests for assets URLs
config.assets.digest = true
# Specifies the header that your server uses for sending files
# config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation can not be found)
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners
config.active_support.deprecation = :notify
# Log the query plan for queries taking more than this (works
# with SQLite, MySQL, and PostgreSQL)
# config.active_record.auto_explain_threshold_in_seconds = 0.5
# using the action page cashing gem, https://github.com/rails/actionpack-page_caching
config.action_controller.page_cache_directory = "#{Rails.root.to_s}/public/deploy"
end
The live site is on [t a f q i t .com] note the background image is not loading and the custom css to move the address line to the right is not working.
I have done all the commands related to manually cleaning the cache clobbing the assets and precmopiling..etc
gemfile
source 'https://rubygems.org'
gem 'rails', '4.2.0'
# Gems used only for assets and not required
# in production environments by default.
gem 'sass-rails', '~> 5.0.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'geo_ip', '~> 0.5.0'
gem 'bootstrap-sass', '~> 3.2.0'
gem 'bootstrap-sass-rails-rtl', '~> 2.3.1.0'
gem 'zeroclipboard-rails'
gem 'uglifier', '>= 2.2.1'
gem 'tzinfo-data'
gem 'jquery-rails'
gem "actionpack-page_caching", "~> 1.0.2"
gem "actionpack-action_caching", "~> 1.1.1"
# Use unicorn as the app server
group :production do
gem 'thin'
end
when checking the page source
<link rel="stylesheet" media="all" href="/assets/application.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/custom.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/main_pages.css?body=1" />
clicking on custom.css and main-pages.css link from the source page give same result:
<html>
<head><title>404 Not Found</title></head>
<body bgcolor="white">
<center><h1>404 Not Found</h1></center>
<hr><center>nginx</center>
</body>
</html>

run rake assets:precompile when switching back and forth between bootstrap gem versions?

Working on a project that started out with Bootstrap 2.3, using the bootstrap-sass gem, specifying version 2.3.1.0 in my gemfile. I'm wanting to update it to Bootstrap 3.
Here's what the app looks like with bootstrap-sass gem version 2.3.1.0:
I checked out a branch to experiment updating the styles to Bootstrap 3, so I updated my gemfile to use the latest version of the bootstrap-sass gem, ran bundle update and install.
I have bootstrap 3 version classes on each of the "Amazing Point" div elements you saw above, so the styles in the hero unit should vanish, the buttons should go flat, and the amazing points should span 4 columns with the "col-lg-4" class I've specified.
But when I launch the rails server, I get a mix of Bootstrap 2.3 and 3:
The "col-lg-4" classes applied to the Amazing Points, BUT the sign in and sign up buttons still look like Bootstrap 2.3 buttons! And there's a subtle, but visible change in the "Sign In" and "Sign Up" text - it's a tad bolder. It's like I've got some weird hybrid of Bootstrap 2.3 and 3 going on.
But now I run rake assets:precompile, and here's what I get:
Now things are displaying correctly.
But why do I always have to run rake assets:precompile to get it working correctly? And how could I make it where it would just update automatically when I switch between the gem files?
Here are the other relevant files:
application.css:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require bootstrap
*= require_tree .
*/
Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'jquery-rails'
gem 'devise'
group :production do
gem 'pg'
end
group :development do
gem 'sqlite3'
end
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'bootstrap-sass', '3.0.2.0'
end
Gemfile.lock (I'll just show the bootstrap-sass version):
bootstrap-sass (3.0.2.0)
sass (~> 3.2)
application.rb:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
if defined?(Bundler)
# If you precompile assets before deploying to production, use this line
Bundler.require(*Rails.groups(:assets => %w(development test)))
# If you want your assets lazily compiled in production, use this line
# Bundler.require(:default, :assets, Rails.env)
end
module Bloccit
class Application < Rails::Application
config.encoding = "utf-8"
# Configure sensitive parameters which will be filtered from the log file.
config.filter_parameters += [:password]
# Enable escaping HTML in JSON.
config.active_support.escape_html_entities_in_json = true
config.active_record.whitelist_attributes = true
# Enable the asset pipeline
config.assets.enabled = true
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
config.assets.initialize_on_precompile = false
end
end
relevant lines in config/development.rb:
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
config.assets.compile = true
config.serve_static_assets = false
Ok, so I believe I've figured some of this out, after checking out this blog post.
For some reason, if you're updating from the Bootstrap 2.3 bootstrap-sass gem version to the latest one, YOU MUST clean out your old bootstrap-sass gem.
So I ran gem list bootstrap-sass which gave me:
*** LOCAL GEMS ***
bootstrap-sass (3.0.2.0)
bootstrap-sass (2.3.1.0)
Run gem cleanup bootstrap-sass -d and you'll be given a preview of what will happen. Then run gem cleanup bootstrap-sass -v and it will uninstall all previous versions. Restart your rails server and it works.
Then if you were wanting to go back to the old bootstrap-sass version, you would need to update your gemfile, run bundle, and then run gem uninstall bootsrap-sass 3.0.2.0 or whichever later bootstrap-sass gem that you have.
This is kind of a pain, so if someone knows a better way of going about this, please share. I might see if the bootstrap-sass-rails gem offers a better experience.

Rails 3.1 asset pipeline not working

I am in the process of upgrading an old app to the asset pipline but after following the ryan bates tutorial on upgrading to 3.1 I am still not able to take advantage of the pipline. In order to rule out my upgrade process I created a fresh rails app and attempted some coffee scripting and adding other files to the /assets/javascripts folder, however any additional files besides the application.js do not seem to be rendered.
This is my application.js file:
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
alert("this displays fine");
And the additional dogs.js.coffee file:
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
alert "cant see this!"
It seems to be a sprockets issue but I really cant find anyone with the same problem, or info on when additional javascript files within the assets folder are not included in the application.js via the require_tree .
Here is my gem file:
gem 'rails', '3.1.1'
gem 'sqlite3'
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
group :test do
# Pretty printed test output
gem 'turn', :require => false
end
my ruby version is 2.0.0p195
thanks for any help!
G
It seems the ruby version was my problem, I downgraded to ruby 1.9.3, then reinstalled gems and it works now!

Resources