My application has a lot of 3rd party js/css files. We sped up the deploy by compiling these files into external-[hash].js and external-[hash].css (So Rails don't have to compile these files on every single deploy)
And loaded them like this in application.html.erb
<%= stylesheet_link_tag "external", :media => "all" %>
<%= javascript_include_tag "external" %>
These two files are under /public/assets/. This was working fine when we are on Rails 4. We are currently trying to upgrade to Rails 5, and these two files are not loading properly.
I changed the tags into below and in the chrome console, these files appear to have been loaded properly.
<%= stylesheet_link_tag "/assets/external-[hash]", :media => "all" %>
<%= javascript_include_tag "/assets/external-[hash]" %>
However, when I add in the application style/js tags below the external tags
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
I keep getting the error
Error: "img" failed to #extend ".img-responsive".
The selector ".img-responsive" was not found.
Use "#extend .img-responsive !optional" if the extend should be able to fail.
Looking into the external-[hash].css, I am able to see the .img-responsive selector defined. So, it seems like Rails 5 does not properly load these two files?
I'm currently using Rails 5.1.7, Ruby 2.4.2
I also tried adding config.public_file_server.enabled = true to environment files.
Here are how I've setup the external files.
I have an external.js, and external.scss, these files live under app/assets.
Inside application.js/css, I added stub external to both, so when the rails application deploys, it ignored the external files. I would run RAILS_ENV=external_assets rails assets:precompile and commit those files to git, expecting them to be loaded first.
Example external.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery.readyselector
//= require bootstrap
//= require bootstrap-datepicker
//= require moment
//= require d3
//= require c3
//= require jsgrid.min
//= require bootstrap-datetimepicker
external.css
/*
*= require_self
*= require bootstrap-datepicker
*= require bootstrap-datetimepicker
*= require rails_bootstrap_forms
*= require c3
*= require jsgrid.min
*= require jsgrid-theme.min
*/
#import "font-awesome-sprockets";
#import "font-awesome";
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'bootstrap-datetimepicker';
Please let me know if I can provide any other information.
Try some below commands
RAILS_ENV=production rails assets:clean
RAILS_ENV=production rails assets:clobber
And change in production
config.assets.compile = true
Then again run
RAILS_ENV=production rails assets:precompile
Related
I am following screencast about twitter bootstrap basics to try to understand bootstrap more, but for some reason when I go to localhost, my app has no styling.
I have tried the steps from github repo https://github.com/seyhunak/twitter-bootstrap-rails as well.
I have also followed instruction from this SO post, but when I added the line *= require bootstrap_and_overrides, it shows FileNotFound error.
Here is what I did, after Rails new app bootstrap_practice:
rails g scaffold Product name price:decimal --skip-stylesheets
rake db:migrate
# added gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git' on gemfile (I have also tried just gem 'twitter-bootstrap-rails'
bundle install
rails g bootstrap:install
I checked assets and it has the necessary assets.
Stylesheets (application.css)
*
*= require_tree .
*= require_self
*/
JS:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
Lastly, my application.html.erb has
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
I am pretty sure that is everything needed. Why is my application on localhost not styled?
So, I've used twitter-bootstrap a lot of ways in Rails, and my favorite is with the bh gem. Bootstrap Helpers on github.
# Gemfile
gem 'bh'
# application.html.erb
<%= stylesheet_link_tag bootstrap_css %>
<%= stylesheet_link_tag font_awesome_css %>
<%= javascript_include_tag bootstrap_js %>
All the assets are delivered through the CDN.
An official SASS repo was released since the railscasts was released. (Rails comes with SASS out the box.)
https://github.com/twbs/bootstrap-sass
The repo by seyhunak is maintained in LESS, which requires therubyracer too.
I want different CSS files for different Layouts.
For example:
app/layouts/application.html.erb would have application.css
<%= stylesheet_link_tag 'application' %>
and app/layouts/admin.html.erb will have admin.css:
<%= stylesheet_link_tag 'admin' %>
Problem is that the admin.css is not precompiled when I run:
RAILS_ENV=production bundle exec rake assets:precompile
What can I do that the admin.css is also precompiled?
I'm using Rails 4.2
EDIT
admin.css file
/*
//= require bootstrap.min
//= require filechooser
//= require bootstrap-switch.min
//= require jquery.datetimepicker
//= require fancybox2_1_5/jquery.fancybox
//= require blubb
*= require_self
But onlye the code of the blubb.css file is added in admin.css ....
In initializers/assets.rb :
Rails.application.config.assets.precompile += %w(admin.css)
Newish to rails and I've read that I should put all my JS/CSS into applications.js/applications.css and have it handled by the asset pipeline. However, I have a decent amount of js/css that is only used when an admin is logged in and adding/editing pages.
It seems to me that it's a lot of overhead to load those scripts and styles on every page. What's the best way to go about optimizing this? I can create a separate asset pipeline that only gets included when admins are logged in, or only on pages where it's necessary?
-EDIT 3-
The below will work in production, however you need to add: config.assets.precompile += ['editing.js', 'editing.css.scss'] to production.rb
-EDIT 2-
The below doesn't actually work on production. Looking for a better solution when I get a minute.
-EDIT-
This is the setup that I've come up with. It works properly, so I guess I'm asking if there is any reason that I shouldn't do it this way?
application.html
!!!
%html
%head
%meta{:charset => "UTF-8"}
%meta{name: "Description", content: "base10 CMS"}
%title= "base10 CMS"
= stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application"
= csrf_meta_tags
- if admin_signed_in?
= stylesheet_link_tag "editing", media: "all"
= javascript_include_tag "editing"
= cloudinary_js_config
%body
#container
#messages
- flash.each do |name, msg|
= content_tag :div, msg, :id => "flash_#{name}"
#content
= yield
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
editing.js
//= require ckeditor/init
//= require cloudinary
//= require_tree ../../../vendor/assets/javascripts/.
application.css.scss
/*
*= require baseline
*= require bootstrap
*= require font-awesome
*= require_self
*/
#import 'mixins.css.scss';
#import 'layout.css.scss';
#import 'pages.css.scss';
editing.css.scss
/*
*= require_self
*/
#import 'mixins.css.scss';
#import 'admin.css.scss';
#import 'forms.css.scss';
Your approach is fine. One thing to keep in mind is that in production, all the directives within the application.js and application.css.scss manifests will get compiled and minified into a single file (application.js and application.css respectively) so in most cases there won't be much overhead. If there is tons of extra stuff that you're including to support logged-in admins, then yes, your approach is fine, otherwise, I wouldn't worry about it and just leave everything in the application.* manifests.
I'm using Rails 3.2, and am somewhat confused about the handling of subdirectories and relative paths of the asset pipeline.
My situation
I'm trying to include four code files in (javascripts/edit), one of them being in the subdirectory javascripts/edit/ckeditor, in a manifest file, (javascripts/edit/all.js). I'm not including these in the application.js because I want to include these scripts only on certain pages.
Doing //= require ckeditor/ckeditor doesn't work. Doing //= require mycode (to require javascripts/edit/mycode.js), too, doesn't work, apparently because mycode.js is in the "edit" subdirectory of the javascripts "root" folder. To make it work, I had to put this:
//= require ./ckeditor/ckeditor
//= require ./json2
//= require ./cssjson
//= require ./mycode
inside of my manifest all.js. Note that this:
//= require edit/ckeditor/ckeditor
//= require edit/json2
//= require edit/cssjson
//= require edit/mycode
works exactly the same, even though all.js itself is already in the edit subdirectory.
So my question is, why does this work this way? I would expect to be able to put manifest files in subdirectories and just include files that are in that same subdirectory (e.g. //= require json2), but apparently, all //= require directives in any file below app/assets/javascripts always are relative to that "root" folder, not the subdirectory that the manifest files are in.
So my question is, why does this work this way?
Because when Rails compiles the assets, it's compiling from a central point, not your subdirectory. The manifest system works based on the assets' root path (the documentation says The first feature of the pipeline is to concatenate assets), consequently your assets will be compiled from the application.js file
You have to remember when Rails runs, it's not loading the assets dynamically. It's designed to load application.css / application.js all the time, and it's then up to the developer to delegate assets which they wish to load on specific pages
The way we do this is to include all the "constant" files in our application.js file, and then load controller-specific assets in the layout. This allows us to only call things like JQuery all the time, whilst we may call specific JQuery plugins for certain controllers:
Including The Right Assets In The Right Places
This is what we do:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag controller_name, media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag controller_name, "data-turbolinks-track" => true %>
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks
#app/assets/javascripts/users.js.erb
//= require ** anything you want **
This allows you to have a lot more control over which assets you're loading
In Ruby on Rails v4, I want a js file (or set of js files) to be only loaded for a particular controller.
What is the standard way to do this?
In application.js there is the //= require tree . line. I'm assuming this would need to be removed so I'm not always loading every file. But then what? Will a file named mycontroller.js always be loaded when Mycontroller is used?
The asset pipeline can be very powerful if you do it right:
Manifests
The purpose of //= require tree . is to create a "manifest" file which Rails will use to render the files you call. If you don't "precompile" your assets, this means that each time your browser loads your app, it will look for the files contained in your manifest & load them
This means that you can define what you call in your manifest & what you don't. We prefer to call any gem-based assets in the manifest, but also designate specific folders, like this:
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks
We use this setup to call all JQuery plugins & any extra JS, as well as the gem-specific files
Precompiling
If you pre-compile your assets, it basically builds different files which are loaded consistently when you load the browser. If you're using Heroku or a CDN, you may wish to precompile your assets, as to reduce latency & dependency
Application Design
To answer your question, you can certainly load controller-specific JS. We do it like this:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag controller_name, media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag controller_name, "data-turbolinks-track" => true %>
You can then ensure your JS files are split up by using what Phoet described:
#config/environments/production.rb
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w(mycontroller.js)
Then for application.js, you can only call the files you want to persist throughout the app:
#app/assets/javascripts/application.js
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.draggable
//= require_tree ./jquery
//= require_tree ./extra
//= require turbolinks
It works like this:
You define additional files that should be precompiled:
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
config.assets.precompile += %w(mycontroller.js)
Then in your layout you implement some logic to include this file:
= javascript_include_tag "#{controller_name}.js" if controller_name == 'mycontroller'