Rails 4 app not loading CSS files - ruby-on-rails

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>

Related

Assets not found rails 4 + Capistrano 3 + Puma

I am deployed my rails project to the AWS. I have following in my Gemfile:
group :development do
gem 'capistrano'
gem 'capistrano3-puma'
gem 'capistrano-rails', '~> 1.1'
gem 'capistrano-bundler', require: false
gem 'capistrano-rvm'
end
In my production.rb
config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
config.assets.compile = true
config.assets.digest = true
However, when I load my application in the web browser I see in the console that my application-xxxxxx.css and application-xxxxxx.js gives 404 not found error. Also, when I go to the server and look for the file in public/assets/ folder, the application-xxxxxx.js is present there.
Can anyone help me with this?
The problem was not in the asset compilation and deployment. I had to change the path from root /home/deploy/portal/public; to /home/deploy/portal/current/public; in nginx configuration file /etc/nginx/sites-enabled/default.

Heroku on Ubuntu 14.04

I am currently following 'Ruby on Rails Tutorial' by Michael Hartl. On Chapter 3 when I try to deploy the working sample app with Heroku it is rejected, and even though I fully understand the error message I do not know how to correct it. Here is my Gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
#ruby-gemset=railstutorial_rails_4_0
gem 'rails', '4.0.5'
group :development, :test do
gem 'sqlite3', '1.3.8'
gem 'rspec-rails', '2.13.1'
end
group :test do
gem 'selenium-webdriver', '2.35.1'
gem 'capybara', '2.1.0'
end
gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'
group :doc do
gem 'sdoc', '0.3.20', require: false
end
group :production do
gem 'pg', '0.15.1'
gem 'rails_12factor', '0.0.2'
end
And here is the file where the issue originates which is config/environments/development.rb:
SampleApp::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 = 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 = true
# Raises error for missing translations
# config.action_view.raise_on_missing_translations = true
end
The errors I get are attempting 'git push heroku master':
Running: rake assets:precompile
rake aborted!
NoMethodError: undefined method `configure' for #<SampleApp::Application:0x007fc7f03f7298>
and after a long list of paths I get:
!
! Precompiling assets failed.
!
! Push rejected, failed to compile Ruby app
To git#heroku.com:some-name.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'git#heroku.com:some-name.git'
Any idea how to fix this please? I really would like to get deployments working under Ubuntu.
Thank you!
By default Rails 4 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
Have a read through this documentation on heroku as well - https://devcenter.heroku.com/articles/rails-4-asset-pipeline
Hope it helps. :)
Rails 4
The problem is a common issue with the Hartl tutorial - it derives from using Rails 3 in the tutorial, and a later version being used widely now
I tried looking for references on this, but I couldn't. I've found them somewhere before - will have another look for you.
Anyway, in Rails 4, need this (we have this in our Rails 4 apps):
#config/environments/development.rb
Rails.application.configure do
This sets the configure code block for the correct object. I think Rails changed some of its core functionality in 4.0+, which is why you're getting the issue now

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.

Assets Pipeline

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.

Rails 3.1: can't enable asset pipeline in the app

I've got 3.1 application.
At the beginning i'd added
config.assets.enabled = false
not to use pipeline.
Now i've commented this line. restart server.
I've got app\assets\javascripts\application.js
In my layout view I use:
<%= javascript_include_tag "application" %>
my page tries to load "javascripts/application.js" not assets/application.js
What may be wrong in my configuration?
gemfile (unnecessary removed):
gem 'rails', '3.1.1'
gem 'sqlite3'
# Asset template engines
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
Rather than commenting out the line, have you tried leaving it in and making it config.assets.enabled = true instead? It looks like the default value will always be false, so you need to explicitly set it to true.
If you turn the pipeline off then the Rails helpers revert to the old paths to javascript and CSS - in those folders in the /public directory. If you don't want to use the pipeline then you have to use those folders instead, not the assets folder ones.
Dylan is correct - you have to explicitly enable the pipeline, and this is the default for a new generated app.

Resources