i have an asset pipeline problem in rails 4.
i have a directory in testapp/public/assets/ which has all hashed or fingerprinted css and javascripts bootstrap.min-58853fb115aba672ce98597de33da61b.js OR animate-d81627498b7ff4acf1a1964da02db789.css however in browser i see not hashed css and javascripts like <link rel="stylesheet" media="all" href="/stylesheets/bootstrap.min.css">
i need to request the hashed files in my public/assets/
i have landing controller and one method
views/landing/one.html.erb
<%= render "shared/headmeta" %>
<%= render "shared/headcss"%>
<%= render "shared/headscript"%>
<%= render "shared/header"%>
<h1>Landing#one</h1>
<p>Find me in app/views/landing/new.html.erb</p>
<%= render "shared/footer"%>
<%= render "shared/jscript"%
>
css manifest in landing.scss
/* ...
*= require animate
*= require bootstrap.min
*= require default
*= require style
*= require overwrite
*/
headcss partial is :
<!-- Bootstrap core CSS -->
<%= stylesheet_link_tag "bootstrap.min", media: "all", "data-turbolinks-track" => true %>
<!-- Overwrite bootstrap style -->
<%= stylesheet_link_tag "overwrite", media: "all","data-turbolinks-track" => true %>
<!-- Animate css -->
<%= stylesheet_link_tag "animate", media: "all","data-turbolinks-track" => true %>
<!-- Heading font -->
<%= stylesheet_link_tag "stylesheet", media: "all","data-turbolinks-track" => true %>
<!-- General font -->
<%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Open+Sans", media: "all" ,"data-turbolinks-track" => true%>
<!-- Font icons -->
<%= stylesheet_link_tag "simple-line-icons", media: "all","data-turbolinks-track" => true %>
<!-- Flexslider -->
<%= stylesheet_link_tag "flexslider", media: "all","data-turbolinks-track" => true %>
<!-- Custom styles for this template -->
<%= stylesheet_link_tag "style", media: "all","data-turbolinks-track" => true %>
<!-- Theme skin -->
<%= stylesheet_link_tag "default", media: "all","data-turbolinks-track" => true %>
my gemfile
source 'https://rubygems.org'
#gem devise
gem 'devise'
#sprockets is a rack-based asset packaging system that concatenates and serves Js,coffescript,css,LESS
gem 'sprockets', '~> 2.12.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use yui as compressor for JavaScript assets
gem 'yui-compressor', '~> 0.12.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
production.rb
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 = :yui
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# 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
config/application.rb
require File.expand_path('../boot', __FILE__)
require 'rails/all'
require "sprockets/railtie"
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module Marketpersona
class Application < Rails::Application
# 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.
# 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
# Do not swallow errors in after_commit/after_rollback callbacks.
config.active_record.raise_in_transactional_callbacks = true
config.assets.enabled = true
end
end
config/initializers/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
Rails.application.config.assets.compress = true
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added
#Rails.application.config.assets.precompile << Proc.new do |path|
# if path =~ /\.(css|js)\z/
# full_path = Rails.application.assets.resolve(path).to_path
# app_assets_path = Rails.root.join('app', 'assets').to_path
#if full_path.starts_with? app_assets_path
#Rails. logger.info "including asset: " + full_path
#true
#else
# Rails.logger.info "excluding asset: " + full_path
# false
#end
#else
# false
#end
#end
Rails.application.config.assets.precompile = ['*.js', '*.css', '*.css.erb']
public/assets output of some files
/public/assets# ls
animate-d2e7ae01911a05d8ce767b98def4ae3a.css jquery.smooth-scroll-5f54331165eef2a11b63f6d615d4556e.js.gz
animate-d2e7ae01911a05d8ce767b98def4ae3a.css.gz jquery.ui.totop-d23c655a6d2cb2716708132fbd150f5e.js
animate-d81627498b7ff4acf1a1964da02db789.css jquery.ui.totop-d23c655a6d2cb2716708132fbd150f5e.js.gz
animate-d81627498b7ff4acf1a1964da02db789.css.gz jquery.ui.totop-d5647d1f3ae94dc679d5767720d0ab73.js
application-88198fbec2cb093a4a5545b36197d203.js jquery.ui.totop-d5647d1f3ae94dc679d5767720d0ab73.js.gz
application-88198fbec2cb093a4a5545b36197d203.js.gz jquery_ujs-0b8f09cf5aec4ba1be1abd9f915c77e2.js
application-9ebac1bd19f3ba981afd79fd2c5f2037.css jquery_ujs-0b8f09cf5aec4ba1be1abd9f915c77e2.js.gz
application-9ebac1bd19f3ba981afd79fd2c5f2037.css.gz landing-307af29ac27a030829bb53a3718d3987.js
application-a6b3011ab79b9f60d493732939ce4f50.css landing-307af29ac27a030829bb53a3718d3987.js.gz
application-a6b3011ab79b9f60d493732939ce4f50.css.gz landing-7c3fe69fe5644297d4d87fdcc4b915d4.css
application-aceb45182f1f0486e0e79c02dea65c4e.css landing-7c3fe69fe5644297d4d87fdcc4b915d4.css.gz
application-aceb45182f1f0486e0e79c02dea65c4e.css.gz landing-8f6eecd1178ef85964369ec66d33c4f1.js
application-d012cec9935d5b05e1b812ccc6f3cf6d.css landing-8f6eecd1178ef85964369ec66d33c4f1.js.gz
application-d012cec9935d5b05e1b812ccc6f3cf6d.css.gz landing-9b1e28a2786f16d823f619cdc65d8a40.css
application-e038cd04ae9494b6950481cfc5d4d749.css landing-9b1e28a2786f16d823f619cdc65d8a40.css.gz
application-e038cd04ae9494b6950481cfc5d4d749.css.gz landing-a7374c322246655f8a4a6d05689e50ae.css
application-e1d3507ada82fdd954d492f952b28619.js landing-a7374c322246655f8a4a6d05689e50ae.css.gz
application-e1d3507ada82fdd954d492f952b28619.js.gz landing-d728d395d4bd4966f84f4acdd1d6691c.css
bootstrap.min-58853fb115aba672ce98597de33da61b.js landing-d728d395d4bd4966f84f4acdd1d6691c.css.gz
You have 9 stylesheets you are including in one page/app? Why not compile them into one using a manifest?
I really am not sure what is going on here... So you are not getting the compiled files in your production environment?
I may be misreading your question, but are you creating your own css manifest files other than application.css, for example assets/stylesheets/shared/? Then in your production.rb (environment) file you need to tell Rails to compile them:
AppName::Application.configure do
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
config.assets.precompile += ['shared/filename.css', 'shared2/filename2.css']
end
Run RAILS_ENV=production bundle exec rake assets:precompile then add, commit and deploy your changes to production.
Related
I tried many things but my navbar is not showing properly on browser, just because sccs is not loading. This application was a Rails API Application and I converted to regular application. Maybe something went wrong on this process.
Assets/Stylesheets/application.scss
// Your CSS partials
#import "components/index";
Assets/Stylesheets/Components/_index.scss
// Import your components CSS files here.
#import "navbar";
Assets/Stylesheets/Components/_navbar.scss
Environments/development.rb
config.assets.debug = true
config.assets.quiet = true
config.assets.compile = true
application.rb
require_relative 'boot'
require 'rails/all'
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module RailsJwt
class Application < Rails::Application
# Initialize configuration defaults for originally generated Rails version.
config.load_defaults 6.0
# Settings in config/environments/* take precedence over those specified here.
# Application configuration can go into files in config/initializers
# -- all .rb files in that directory are automatically loaded after loading
# the framework and any gems in your application.
end
end
I am new here so I don't know which other parts of my application I should show.
Since you converted an API-only Rails application to use CSS I'm assuming you haven't configured Webpacker to handle your front end assets. This link may be helpful: https://onrails.blog/2020/02/20/using-css-in-rails-6/
The most important for you is probably adding the following to your app/views/application.html.erb file:
<%= stylesheet_link_tag 'application', media: 'all' %>
If you're using Webpacker, adjust accordingly. Also, I don't think Rails 6 ships with the sprockets gem so you may have to add that to your Gemfile, unless you plan on using Webpacker.
I don't understand why heroku won't compile my assets. Down below is the content of 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
config.assets.initialize_on_precompile = false
# 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?
config.serve_static_files = 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 = true
# 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
Also here is the content of my application.css file. I'am not using sass, I'am using multiple different css files and bootstrap 3.3.5 css file.
/*
* 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 any plugin's vendor/assets/stylesheets directory 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_tree .
*= require about
*= require bootstrap
*= require comment
*= require forms
*= require main
*= require navigation
*= require notices
*= require post
*= require_self
*/
Typical reason for this error is either that your CSS is invalid, or your commit is not being processed by Heroku correctly.
The simplest way to fix this error is to precompile locally and then push to the platform:
$ rake assets:clobber
$ rake assets:precompile RAILS_ENV=production
$ git add .
$ git commit -a -m "Assets"
$ git push heroku master
This will allow you to push a set of assets which Heroku will only have to update (not compile from scratch). If it doesn't work, you should post your logs of the buildpack so we can see what's going on.
Preprocessor
From looking at your code, the most important change you need to make is use of preprocessors (to call image_url):
#app/stylesheets/about.scss
.img-circle:hover {
background: image_url("founder-cartoon-pic.png");
}
You need to change all your own .css to .scss, and replace url(...) with image_url(...) - this will reference the correct image in production, even with asset fingerprinting.
The problem is that url for CSS is a static method - it calls an "absolute" path...
url(your-image.png) refers exclusively to assets/images/your-image.png
image_url(your-image.png) refers to the asset_path and calls only the correct file
Thus, the answer to your question is to make sure your assets are referenced with the appropriate asset_helpers -- meaning you'll have to use a preprocessor (SCSS / SASS).
My application is working perfectly in development environment, but when I switched to production environment I found that the styles look a bit different. After some tracing, I noticed that these tags:
<style type="text/css" media="screen">…</style>
<style type="text/css" media="media">…</style>
<style type="text/css" media="print">…</style>
were added to the head tag overriding my application.css styles.
Is there any way to stop these tags from being added to the rendered page?
Updtae
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
# gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'devise'
gem 'carrierwave'
gem 'rmagick'
gem 'mysql2'
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# To include font-awesome icons
# gem 'twitter-bootstrap-rails'
# gem 'bootstrap-sass'
gem 'font-awesome-rails'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
gem 'unicorn'
# Use Capistrano for deployment
gem 'capistrano', '~> 3.1.0'
# rails specific capistrano funcitons
gem 'capistrano-rails', '~> 1.1.0'
# integrate bundler with capistrano
gem 'capistrano-bundler'
# if you are using RBENV
gem 'capistrano-rbenv', "~> 2.0"
gem 'capistrano-rvm'
group :development, :test do
# Call 'byebug' anywhere in the code to stop
# execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application
# running in the background.Read more: https://github.com/rails/spring
gem 'spring', '~> 1.3.4'
end
group :production do
gem 'rails_12factor'
end
production.rb
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.js_compressor = :uglifier
config.assets.compile = false
config.assets.digest = true
config.log_level = :debug
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
config.assets.compile = true
config.assets.precompile = ['*.js', '*.css', '*.css.erb']
config.active_record.dump_schema_after_migration = false
end
Changing the default order in the head tag inside app/views/layouts/application.html.erb from
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= favicon_link_tag 'favicon.ico' %>
<%= csrf_meta_tags %>
to
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= favicon_link_tag 'favicon.ico' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
solved the problem and no extra style tags were added to the rendered page.
My buttons appear fine offline, but when I push them to Heroku, the padding is off. Has anyone else experienced this?
config/environments/development.rb
Rails.application.configure do
config.cache_classes = false
config.eager_load = false
config.consider_all_requests_local = true
config.action_controller.perform_caching = false
config.action_mailer.raise_delivery_errors = true
config.active_support.deprecation = :log
config.active_record.migration_error = :page_load
config.assets.debug = true
config.assets.digest = true
config.assets.raise_runtime_errors = true
end
config/environments/development.rb
Rails.application.configure do
config.serve_static_files = true
config.serve_static_assets = true
config.cache_classes = false
config.eager_load = false
config.consider_all_requests_local = false
config.action_controller.perform_caching = false
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
config.assets.js_compressor = :uglifier
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
assets/stylesheets/application.css
/*
* Unimportant comments
*
*= require_tree .
*= require_self
*= require font-awesome
*= require bootstrap-social
*/
On heroku:
http://i.imgur.com/8X6RTdk.png
Offline
http://i.imgur.com/dL6pdBC.png
I've ran rake assets:precompile before I push and still the same outcome. All suggestions are welcome.
EDIT
Here's my Gemfile (I realize I have duplicate gems):
source 'https://rubygems.org'
ruby '2.2.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'turbolinks'
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'devise'
gem 'rails_12factor', group: :production
gem 'twitter-bootstrap-rails'
gem 'simple_form'
gem 'puma'
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem 'font-awesome-rails'
gem 'bootstrap-social-rails'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :production, :staging do
gem 'pg'
gem 'rails_12factor'
end
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
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.