I'm new in Rails and I'm developing an application using Rails 3.2.0. So, when I work at my local machine all is good, pages have design expected with the following head:
<head>
<title>Ruby on Rails Tutorial Sample App</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="XWFSZcrp1zLXPwqKvANdCgQWr4ws6sM2xqylAYVprrQ=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
But then I do a commit and push it to Heroku:
git push heroku
But my pages don't have design needed; the head of some page on Heroku:
<head>
<title>Ruby on Rails Tutorial Sample App</title>
<link href="/assets/application-7270767b2a9e9fff880aa5de378ca791.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/application-3428e82709d7645135002c8fadfafdc6.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="lSpfx/uG7gZoccxRHqdFBEQArAvQfI/EYXC/G/V79aU=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I don't know why but "application-....css" file is absolutely clean! How can I fix it? My production.rb:
SampleApp::Application.configure do
# Settings specified here will take precedence over those in config/application.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 = true
# Compress JavaScripts and CSS
config.assets.compress = true
# 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
# Defaults to Rails.root.join("public/assets")
# config.assets.manifest = YOUR_PATH
# 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
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
config.force_ssl = true
# See everything in the log (default is :info)
# config.log_level = :debug
# Prepend all log lines with the following tags
# config.log_tags = [ :subdomain, :uuid ]
# Use a different logger for distributed setups
# config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
# Use a different cache store in production
# config.cache_store = :mem_cache_store
# Enable serving of images, stylesheets, and JavaScripts from an asset server
# config.action_controller.asset_host = "http://assets.example.com"
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
# config.assets.precompile += %w( search.js )
# Disable delivery errors, bad email addresses will be ignored
# config.action_mailer.raise_delivery_errors = false
# Enable threaded mode
# config.threadsafe!
# 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
end
What should I change? May be some settings in production.rb must be fixed? Thanks in advance.
Heroku precompiles assets from your application.css file. You shouldn't specify the various css files in the header of the page, which is what it looks like you're doing. You need to make sure that they're in the folder with your application.css file and that your application.css file has the following:
/*
* 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_tree .
*/
The *= require_tree . line is the important one. It makes sure it picks up all the css files in the folder and loads them in.
Related
I am attempting to get a Rails 4 application running with RAILS_ENV=production.
My objective is to precompile assets and use a CDN to serve them quickly.
What I have done so far
production.rb
config.serve_static_assets = false
config.action_controller.asset_host = "http://mycdn.cloudfront.net"
config.assets.js_compressor = :uglifier
config.assets.compile = false
Precompile step that runs correctly during opsworks deploy
"/usr/local/bin/bundle exec rake assets:precompile"
Output From Precompile
/srv/www/myapp/current/public/assets/$ ls
application-<digest>.css
application-<digest>.js
... other images, etc...
Using rails helper tags for .js and .css in /application.html.slim
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= favicon_link_tag 'favicon.png'
What did I expect
On page load I would see things like (expected digest in url):
<link data-turbolinks-track="true" href="http://mycdn.cloudfront.net/stylesheets/application-<digest>.css" media="all" rel="stylesheet" />
What actually happens
On page load I see things like (NO DIGEST in url!):
The bad news is they are missing, since application.css doesnt exist anywhere in my app, the CDN cant cache it, naturally.
<link data-turbolinks-track="true" href="http://mycdn.cloudfront.net/stylesheets/application.css" media="all" rel="stylesheet" />
Any help would be much appreciated.
Random stats:
- Rails 4.1.5
- Unicorn 4.8.1
- Opswork stack as my deploy target
- Cloudfront as my CDN
You need to add this to your production.rb file ( and any other environnent that you want to have digests in )
config.assets.digest = true
I precompile my assets and use following function to render html:
= stylesheet_link_tag "frontend/application", media: "all", "data-turbolinks-track" => true
= javascript_include_tag "frontend/application", "data-turbolinks-track" => true
Sometimes those methods generat correct html:
<link data-turbolinks-track="true" href="/assets/frontend/application-64cf06dd4d2386f145e00844fed60d28.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/frontend/application-447281961c979f73e944369c4b832fd8.js"></script>
But on production rails sometimes (50%!) generates assets html like this
<link data-turbolinks-track="true" href="/stylesheets/frontend/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/javascripts/frontend/application.js"></script>
I use heroku on production. Any idea what could be wrong or how can I fix this?
Below are my production settings.
# Disable Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = true
# Debug mode disables concatenation and preprocessing of assets.
# This option may cause significant delays in view rendering with a large
# number of complex assets.
config.assets.debug = true
# 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
# Generate digests for assets URLs.
config.assets.digest = true
# Version of your assets, change this if you want to expire all your assets.
config.assets.version = '2'
# 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
Here is also preview of the problem: view-source:http://v5.megabon.com/en
The only way to get it work on Heroku was to set compile to false
config.assets.compile = false
And delete every precompiled file in public folder. That forces Heroku to recompile assets on every git push.
When I run
rake assets:precompile
The compiled assets are written to pubic/assets:
I, [2013-07-21T02:16:00.987988 #13881] INFO -- : Writing /home/jpereira/dev/saleshub/public/assets/glyphicons-halflings-white-62b67d9edee3db90d18833087f848d6e.png
I, [2013-07-21T02:16:01.037698 #13881] INFO -- : Writing /home/jpereira/dev/saleshub/public/assets/glyphicons-halflings-c806376f05e4ccabe2c5315a8e95667c.png
I, [2013-07-21T02:16:01.053630 #13881] INFO -- : Writing /home/jpereira/dev/saleshub/public/assets/marketing/slider-base/slide-01-b85e542137a02bedd6c30dede873ef1e.jpg
I, [2013-07-21T02:16:01.066371 #13881] INFO -- : Writing /home/jpereira/dev/saleshub/public/assets/marketing/slider-base/slide-02-e5106e911d8a0289bfaf2ac64308a640.jpg
I, [2013-07-21T02:16:01.077879 #13881] INFO -- : Writing /home/jpereira/dev/saleshub/public/assets/marketing/slider-base/slide-03-990dccbed4c70f0118b7d30d98094811.jpg
I, [2013-07-21T02:16:01.965560 #13881] INFO -- : Writing /home/jpereira/dev/saleshub/public/assets/application-98713f9763bccfd6bc05dae422d3e242.js
I, [2013-07-21T02:16:02.068469 #13881] INFO -- : Writing /home/jpereira/dev/saleshub/public/assets/application-a40c2cd9b0f20b2a7f3b62d45159fbb3.css
Then, I start the application in production, with:
RAILS_ENV=production rails s
=> Booting WEBrick
=> Rails 4.0.0 application starting in production on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2013-07-21 02:20:49] INFO WEBrick 1.3.1
[2013-07-21 02:20:49] INFO ruby 2.0.0 (2013-06-27) [x86_64-linux]
[2013-07-21 02:20:49] INFO WEBrick::HTTPServer#start: pid=13903 port=3000
But the rendered pages, don't look for the precompiled asses. In the rendered templates I got:
<!DOCTYPE html>
<html>
<head>
<title>App Home Pagetitle>
<link data-turbolinks-track="true" href="/stylesheets/application.css" media="all" rel="stylesheet" />
<link href="/stylesheets/application.css" media="all" rel="stylesheet" />
<link href="/stylesheets/marketing.css" media="all" rel="stylesheet" />
<script src="/javascripts/application.js"></script>
<script src="/javascripts/marketing.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="8XQYBZWrTxmfdGvQYCK0JwQDfr2pt8si+FjW4a30SsA=" name="csrf-token" />
</head>
<body>
</body>
</html>
The template is the following:
!!! 5
%html
%head
%title App Home Page
=yield(:head)
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
= stylesheet_link_tag "application", params[:controller], :media => "all"
= javascript_include_tag "application", params[:controller]
= csrf_meta_tags
%body
=flash_messages(flash)
= yield
My production.rb is as follows:
WebApp::Application.configure do
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = false
config.assets.js_compressor = :uglifier
config.assets.compile = false
config.assets.digest = true
config.assets.version = '1.0'
config.log_level = :info
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
end
What I need to configure to have stylesheet_link_tag and javascript_include_tag pick the right assets location on production?
Thanks
I just finished writing a similar question, when yours came up in the related sidebar :)
I found a blog that suggests this is a bug, and is inexplicably mitigated by setting
config.assets.compile = true
In the end I answered my own question.
If your creating assets in subfolders you need to prefix your files with the path to the file:
config.assets.precompile += %w( admin/admin.css admin/admin.js ). You'l find this command commented out in environments/production.rb
setting config.assets.compile = true is a bad idea, its slow and not necessary.
Once you've added your custom assets to config.assets.precompile, run:
bundle exec rake assets:precompile RAILS_ENV=production in the terminal to compile the assets.
I believe you may want to look at the following: that states: Edge Rails Guide
In Rails 4.0, precompiling assets no longer automatically copies non-JS/CSS assets from vendor/assets and lib/assets. Rails application and engine developers should put these assets in app/assets or configure config.assets.precompile.
Further to this I believe you can do specify your JS files by doing the following in your config/application.rb
config.assets.precompile += %w( 'application.js', 'application.css',
#specify CSS or JS files inside here! )
Then execute:
bundle exec rake assets:precompile RAILS_ENV=production
I'm running a rails 3.2.11 on heroku. My scripts are loaded twice, resulting in:
<script src="/assets/jquery-08bbde0e2625ba65b3f4d03e5cf1c05d.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs-a3266ec390218bd1ea234887ff70ab4e.js?body=1" type="text/javascript"></script>
<script src="/assets/dropdown-504c410c0872c88a73fa906195712053.js?body=1" type="text/javascript"></script>
<script src="/assets/registration-db60840d5dd61a97052f0d3fe669f478.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.Jcrop-9819495b75d1a185b32ae5bcf2b071fe.js?body=1" type="text/javascript"></script>
<script src="/assets/clean-42820428d4061c499712d032b87a19e7.js?body=1" type="text/javascript"></script>
<script src="/assets/application-5a65a574df27b941748dc66c7373b32b.js?body=1" type="text/javascript"></script>
All of them jquery, jquery_ujs, dropdown, registration, jquery.Jcrop and clean are also concatenated (and minified) in application. I don't get why these files are still loaded when only application should be loaded.
Here is the content of application.js:
//= require jquery
//= require jquery_ujs
//= require dropdown
//= require 'registration'
//= require 'jquery.Jcrop'
//= require clean
How I include it in my layout:
= javascript_include_tag 'application'
Content of application.rb (part concerning assets):
# Enable the asset pipeline
config.assets.enabled = true
config.assets.initialize_on_precompile = false
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
config.assets.precompile += [
'active_admin.js',
'application.js',
'landing.js.coffee',
'active_admin.css.scss',
'application.css.sass',
'landing.css.sass'
]
Content of production.rb (part concerning assets):
# Compress JavaScripts and CSS
config.assets.compress = true
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true
# Generate digests for assets URLs
config.assets.digest = true
It looks like your issue is that you have config.assets.debug = true set in production. Try adding config.assets.debug = false to production.rb.
I'm using stylesheet_link_tag with the asset pipeline and yet I get this:
<link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css" />
My production.rb
config.serve_static_assets = false
config.assets.compress = true
I'm assuming it's the settings or something simple..
Make sure this setting is true:
# config/environments/production.rb
config.assets.digest = true
and that you've run rake assets:precompile.