Random CSS not working in Heroku deployment - css

I have a Rails app that I've deployed to Heroku, and a few recent changes I've made in CSS (one batch of which is some media queries) just aren't working. They are present in the CSS when I look at the page source, though.
I'm running be rake assets:precompile before I push to heroku, and my config/production file is:
Rails.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_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
config.assets.compile = true
config.assets.digest = true
config.log_level = :debug
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
config.active_record.dump_schema_after_migration = false
end
Is there anything else I should be doing to ensure that my CSS is all working correctly? Could this be some kind of cache issue?
I'm new to heroku, so any and all help would be greatly appreciated!!

Try following command:
RAILS_ENV=production rake assets:precompile
and push all compressed js, css and manifest file on heroku and check it.

Try this ...........
By default Rails will not serve your assets. To enable this functionality you need to go into config/application.rb and add this line:
config.serve_static_assets = true
Alternatively you can achieve the same result by including the rails_12factor gem in your Gemfile:
gem 'rails_12factor', group: :production
This gem will configure your application to serve static assets so that you do not need to do this manually in a config file.
Hope this will work for you.

Related

localhost:3000 will not update my css, or will not load at all when static files are deleted of switch off

I have been trying to work on my rails project since I precompiled the assets to deploy to Heroku. The css would not update, so I followed the advice of other similar entries and deleted the static file. The app would then never load, it would just be in a state of buffer. I have also tried to simply set the config.serve_static_files to false. After running a rake assets clean, I have the same result. I have also tried dscacheutil -flushcache, to not effect.
my development.rb file:
Rails.application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# In the development environment your application's code is reloaded on
# every request. This slows down response time but is perfect for development
# since you don't have to restart the web server when you make code changes.
config.cache_classes = false
# Do not eager load code on boot.
config.eager_load = false
# Show full error reports and disable caching.
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
# Don't care if the mailer can't send.
config.action_mailer.raise_delivery_errors = false
# Print deprecation notices to the Rails logger.
config.active_support.deprecation = :log
# Raise an error on page load if there are pending migrations.
config.active_record.migration_error = :page_load
# 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 = false
config.serve_static_files = false
# Asset digests allow you to set far-future HTTP expiration dates on all assets,
# yet still be able to expire them through the digest params.
config.assets.digest = true
config.assets.compress = true
# Adds additional error checking when serving assets at runtime.
# Checks for improperly declared sprockets dependencies.
# Raises helpful error messages.
config.assets.raise_runtime_errors = false
# Raises error for missing translations
# config.action_view.raise_on_missing_translations = true
end
And just in case my production.rb file:
Rails.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
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both threaded web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Enable Rack::Cache to put a simple HTTP cache in front of your application
# Add `rack-cache` to your Gemfile before enabling this.
# For large-scale production use, consider using a caching reverse proxy like
# NGINX, varnish or squid.
# config.action_dispatch.rack_cache = true
# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
# 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
# Asset digests allow you to set far-future HTTP expiration dates on all assets,
# yet still be able to expire them through the digest params.
config.assets.digest = true
# `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
# 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
# Use the lowest log level to ensure availability of diagnostic information
# when problems arise.
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'
# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation cannot be found).
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners.
config.active_support.deprecation = :notify
# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new
# Do not dump schema after migrations.
config.active_record.dump_schema_after_migration = false
end
Please help me, I can hardly do any work like this. Thank you
Have you tried running rake assets:precompile?
Some trivia for you:
rake assets:clean
A better way to get rid of all precompiled assets is rake assets:clobber.
This actively removes the files and folders in your /public/assets folder, allowing you to get rid of any of the precompiled assets which may be left behind.
--
Another piece of trivia:
Whenever running rake assets:precompile, run it with an ENV var:
rake assets:precompile RAILS_ENV=production
This ensures the files are pre-compiled using the data & settings that are available in the production environment, thus giving you the most reliable files.
As my own rule, I always try and ensure local assets are loaded dynamically.
This requires no change on your part (indeed, I'd actually remove the serve_static_files line in your development.rb file).
The reason for this is that if you're dealing with precompiled assets in development, you're going to have to recompile them each time you want to test if they've changed, both time consuming and unreliable.
Heroku should only require asset precompilation for its production environment.
I cannot even run that it seems
This suggests a deeper problem, either with your app or Ruby installation.
There are several things you need to do to ensure this is not a major problem:
Remove all your CSS and JS to a temp folder (Recycle Bin if necessary), and then run rake assets:precompile. There may be an off reference/loop causing the problem
Create a new Rails app with rails new TESTAPP and then run rake assets:precompile immediately. If it works well, you know the problem is with your current app
Stop any other running processes. If you've got programs running which could impede the cmd, it's going to prevent it running smoothly.
If you used the likes of RubyInstaller to install your Ruby, you may wish to upgrade. If not, you may wish to upgrade anyway.
Ultimately, if your computer is processing rake commands extremely slowly, it suggests a major system issue. You need to make sure it works properly to ensure a smooth development cycle.

Rails assets not precompiling, css looks different in production

My rails app in dev mode works and looks exactly as I want it to, but in production it looks different on chrome and safari, in safari the logo images loads but not the font, in chrome the font loads but not the image plus the input fields are a little longer and mis-aligned in chrome but in dev mode it all looks great in chrome
I been messing with this for a while and deleted the public/assets a few times a did
rake assets:precompile RAILS_ENV=production
with no success, the precompile goes through with no errors
config/application.rb:
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
config.assets.paths << "#{Rails.root}/assets/fonts"
config.assets.paths << "#{Rails.root}/assets/images"
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )
# Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
# config.time_zone = 'Central Time (US & Canada)'
# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
config.assets.enabled = true
#config.assets.paths << "#{Rails.root}/app/assets/fonts"
config/environments/production:
# Code is not reloaded between requests.
config.cache_classes = true
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both thread web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Enable Rack::Cache to put a simple HTTP cache in front of your application
# Add `rack-cache` to your Gemfile before enabling this.
# For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
# config.action_dispatch.rack_cache = true
# Disable Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = true
#config.assets.compile = true
config.assets.precompile = ['*.js', '*.css', '*.css.erb', '*.css.scss']
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
# config.assets.css_compressor = :sass
config.assets.paths << "#{Rails.root}/assets/fonts"
config.assets.paths << "#{Rails.root}/assets/images"
config.assets.precompile += %w( .svg .eot .woff .ttf )
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
config.assets.precompile << /(^[^_\/]|\/[^_])[^\/]*$/
# 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 = '1.0'
In your config/environments/production.rb file, set:
config.serve_static_assets = false (currently it's set to true)
config.assets.compile = true (currently it's set to false)
This should solve your problem.
Let me explain what I am asking you to do.
By setting config.serve_static_assets = false, we are telling rails server, don't add ActionDispatch::Static middleware, which is used to serve static assets.
Why not?
That's because in production environment, you are expected to run your application server (like puma) behind a web server (like Apache/Nginx), which is designed to serve static files (including assets) directly, without bothering to send the request to rails application server.
Since, you are not using any web server, we are turning it off.
By setting config.assets.compile = true, we are telling rails to compile the requested asset at runtime. i.e. Look for the requested asset in app/assets, vendor/assets, lib/assets and serve it if found from any of these locations.
By default, config.assets.compile is true in development, false in production environment. Since, we are not using web server to serve static assets, we are asking rails to live compile our assets.
For further details refer to the asset pipeline documentation.

Rails 4 Assets Bug, not loading images

To cut a long story short, because I wasted enough time with this stupid framework.
I want to use pure CSS, no SCSS, no css.erb, no mumbo-jumpo that adds more overhead parsing, even if it is 2ms more.
My production.rb file has (I am using webrick):
Properties::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
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both thread web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Enable Rack::Cache to put a simple HTTP cache in front of your application
# Add `rack-cache` to your Gemfile before enabling this.
# For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
# config.action_dispatch.rack_cache = 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.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 = '1.0'
# 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
# Set to :debug to see everything in the log.
config.log_level = :info
# 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 in app/assets folder are already added.
# config.assets.precompile += %w( search.js )
# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false
# 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
# Disable automatic flushing of the log to improve performance.
# config.autoflush_log = false
# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new
end
Now I have a simple css file under assets/stylesheets called general.css, and it contains this simple line:
html{
background-image:url('homepage_bg_1.jpg');
}
Now I have tried:
background-image:url('assets/homepage_bg_1.jpg');
background-image:url('public/assets/homepage_bg_1.jpg');
background-image:url('public/homepage_bg_1.jpg');
background-image:url('assets/images/homepage_bg_1.jpg');
Nothing works!! It browser still looks for a 'homepage_bg_1.jpg' image which is normal, but in my public assets folder I have 'homepage_bg_1-de4a0800c51d578f152fe5ca821136a6.jpg'.
I am using RAILS_ENV=production bundle exec rake assets:precompile to precompile my assets.
Now I would assume that Rails is not stupid enough, and will look for that file. But it doesnt. Can somebody just tell me what's wrong with this framework? Should I open an issue in Github? Is the framework trying to make us not use CSS?
If you don't want Rails to touch any of the assets you can put them in the public directory.
That way you won't have any fingerprinting or unwanted preprocessing. They will be served "as is". You don't have to mess with the Rails settings or do any precompilation.
And if you some day choose to use the asset pipeline again you can use both methods.
If you want to use fingerprinted assets in your stylesheets and javascript files you NEED preprocessing on those assets in order to use the asset pipeline helper methods. Rather than ranting and raving try and read the ever-so-informative guides.
You've rightly identified that your asset is compiled with a fingerprint, this is for asset expiry and is an integral part of the pipeline. In order to interpolate the correct filename to your other assets you need to use the helpers provided. For ERB use asset_path, and with Sass you have image-url/image-path/asset-url/asset-path/etc depending on your requirement.
Have you tried using the image helpers in your CSS for it to reference the digest version of your image?
Something like...
html {
background-image: image-url('homepage_bg_1.jpg');
}
This will put a reference to the image with the digest string appended to the name automatically for you.

Link Custom CSS and Javascript to Rails After Deployment

I have a Rails App it's css and js links works fine locally since I have used :
<link href="assets/bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/font-awesome.css" rel="stylesheet">
<link href="assets/bootswatch.css" rel="stylesheet">
I Googled more than it should all I find is this Heroku Guide , I'm so confused about the assets pipeline thing! I ran this command as well :
bundle exec rake assets:precompile
and it did create some files in the public dir as mentioned in the guide :
Now on Heroku Everything is plain, no design no nothing of Css and JS.
While when I run
Heroku Logs
This is what I get some serious NO Route Match for the CSS and JS files as follow :
2013-06-10T10:06:28.184255+00:00 app[web.1]: ActionController::RoutingError (No route matches [GET] "/assetscv.png"):
This is only one line, I get bunch of more of these for other files, and pre generated loggs lines
any help would be appreciated Thanks!
PS:
I tried
<%= stylesheet_link_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap-responsiv" %>
<%= stylesheet_link_tag "bootswatch", "font-awesome.css" %>
I got bunch of errors and on heroku it says sorry something went wrong
In application.rb(config/application.rb)
# Enable the asset pipeline
config.assets.enabled = true
After this in production.rb file(config/environments/production.rb) do like this
# 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
then you should include all your js and css like this,
config.assets.precompile += %w(jquery.js jquery_ujs.js PIE.js check_list.js dom-drag.js jquery-1.4.2.min.js jquery-1.7.1.min.js jquery-1.8.3.js jquery-ui.js jquery.accordion.js jquery.corner.js jquery.countdown.js jquery.dimensions.js jquery.masonry.min.js jquery.tinycarousel.min.js jquery.validationEngine-en.js jquery.validationEngine.js questionnaire.js prototype.js users.js)
config.assets.precompile += %w(ie7.css ie8.css about_us.css admin_menu.css blog.css default.ultimate.css designer_directory.css designer_directorynew.css drop.css greenstore.css menu.css MenuMatic_dev.css message_view.css product.css setting1.css style1.css styles.css validationEngine.jquery.css)
After that precompile using this command
$ RAILS_ENV=production bundle exec rake assets:precompile
Then $ heroku restart
It should work.
For more details please read http://guides.rubyonrails.org/asset_pipeline.html

Rails : CSS won't change unless I precompile locally in development

My CSS won't change when I view it in the browser unless I precompile locally with rake assets:precompile.
Any ideas on how to remove this behavior? Do you need more files?
Here is my development.rb :
Mobile::Application.configure do
# Settings specified here will take precedence over those in config/application.rb
# In the development environment your application's code is reloaded on
# every request. This slows down response time but is perfect for development
# since you don't have to restart the web server when you make code changes.
config.cache_classes = false
# Log error messages when you accidentally call methods on nil.
config.whiny_nils = true
# Show full error reports and disable caching
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
# Don't care if the mailer can't send
config.action_mailer.raise_delivery_errors = false
# Print deprecation notices to the Rails logger
config.active_support.deprecation = :log
# Only use best-standards-support built into browsers
config.action_dispatch.best_standards_support = :builtin
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
end
Thanks!
Delete the public/assets folder. The files in the public/assets folder will be preferentially loaded over the ones that are in the app/assets folder.
Once deleted, you should be able to develop locally using the files in app/assets.

Resources