error when precompile assets with turbo-sprockets-rails3 - ruby-on-rails

I have installed turbo-sprockets-rails3 gem for precompile assets with capistrano.
I have added load 'deploy/assets' to my Capfile and the deploy finish fine.
However when I try load my app on remote server I can see inside my production.log file the next errors:
ActionView::Template::Error (bootstrap-modalmanager.js isn't precompiled):
7: <%= display_meta_tags :site => "9cvs" %>
8: <%= stylesheet_link_tag "application", :media => "all" %>
9: <%= javascript_include_tag "application" %>
10: <%= javascript_include_tag "bootstrap-modalmanager" %>
11: <%= javascript_include_tag "jquery.back_to_top" %>
12: <%= javascript_include_tag "swfobject" %>
13: <%= csrf_meta_tags %>
bootstrap-modalmanager.js is found inside vendor/javascripts/ folder. Also I have css files inside vendor/stylesheets/ and swf files inside vendor/flash/ folder.
How can I precompile this assets correctly?

You need in your production.rb
config.assets.precompile += ['bootstrap-modalmanager.js', 'jquery.back_to_top.js', 'swfObject.js']

Related

Rails error after creates new page ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline

I want to create a maintanance_mode page in my rails app. So I've created StaticPagesController with maintanance_mode method (it's empty) and views views/static_page/maintanance_mode.html.erb with routes below:
Rails.application.routes.draw do
root to: 'react#index',
get: '/maintanance_mode', to: 'static_pages#maintanance_mode'
scope 'api' do
use_doorkeeper do
skip_controllers :applications, :authorized_applications, :authorizations
end
end
I was trying to get into this page (simple Hello) but I've got an error
ActionView::Template::Error (The asset "application.css" is not present in the asset pipeline.):
8: <%= csrf_meta_tags %>
9: <%= csp_meta_tag %>
10:
11: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
12: <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
13: </head>
14:
The solution was quite simple, I have to add application.css with below code
application.css
/* ...
*= require_self
*= require_tree .
*/

Restructuring .js files and directories

When I recently started on a mobile version of my app I realized that I had no use of all javascript code written for desktop clients. So I put this in application.html.erb
<% if mobile_agent? %>
<%= javascript_include_tag "mobile" %>
<%= stylesheet_link_tag "mobile", :media => "all" %>
<% else %>
<%= javascript_include_tag "desktop" %>
<%= stylesheet_link_tag "desktop", :media => "all" %>
<% end %>
And in app > assets > javascripts I created this structure
- desktop.js
- mobile.js
- desktop/file1.js
- desktop/file2.js
- mobile/file1.js
- mobile/file2.js
- shared/file1.js
- shared/file2.js
And in mobile.js:
//= require_tree ./mobile
//= require_tree ./shared
And in desktop.js
//= require_tree ./desktop
//= require_tree ./shared
In development env that has worked fine, but when I have deployed to Heroku it gives me an error:
Completed 500 Internal Server Error in 100ms
ActionView::Template::Error (mobile.js isn't precompiled):
8: <meta name="format-detection" content="telephone=no">
11: <%= javascript_include_tag "mobile" %>
9:
12: <%= stylesheet_link_tag "mobile", :media => "all" %>
10: <% if mobile_agent? %>
Parameters: {"community_category"=>"swingdancing", "city"=>"stockholm"}
app/views/layouts/application.html.erb:11:in 78182492067426179_45617280'
13: <% else %>
Completed 500 Internal Server Error in 2ms
app/controllers/communities_controller.rb:20:in `show'
Processing by ErrorsController#show as HTML
14: <%= javascript_include_tag "desktop" %>
/app/vendor/bundle/ruby/1.9.1/gems/actionpack-3.2.13/lib/sprockets/helpers/rails_helper.rb:142:in Error during failsafe response: mobile.js isn't precompiled
What is causing this error and how can I resolve it?
what to do ?
simply add
config.assets.precompile += %w(mobile.js)
to config/application.rb
why ?
when you deploy to production environment, by default rails uses the asset pipeline.
This means that instead of serving directly the files that are in assets/, rails assumes that you have run rake assets:precompile beforehand, and that there are concatenated, compressed and minified versions of your assets in an another folder.
This implies that each and every asset you intend to load from the browser should be precompiled. The benefit is that instead of serving many human-readable files, you only serve a few that have been minified - less connections, less volume = faster load time.
This feature is inactive in development mode because you would have to recompile the assets at each request, and moreover being able to read js and css is quite usefull for debugging.

Twitter Bootstrap Error Using Less

Following this video
After generating the app, scaffolding, updating gemfile, running bundle install, and running rails server, getting ERROR.
Am using the gem
'twitter-bootstrap-rails'
, is there a reason why it is having an issue with "less?" =>
ActionView::Template::Error (cannot load such file -- less (in
/Users/ryanmindigo/store/app/assets/stylesheets/bootstrap_and_overrides.css.less)):
2: <html>
3: <head>
4: <title>Store</title>
5: <%= stylesheet_link_tag "application", :media => "all" %>
6: <%= javascript_include_tag "application" %>
7: <%= csrf_meta_tags %>
8: </head>
app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb__2789023687141131830_70195710799000'
app/controllers/products_controller.rb:7:in `index'
Deleting the bootstrap_and_overrides.css.less file, may not be necessary with updated gem. Please comment if a new error appears so we could see some more.

javascript_include_tag "directory/file" results in incorrect path for //= require assets

I want to use //= require <lib> from a different file than /app/assets/javascripts/application.js. This results in a asset compile error but the problem is that the path is incorrect. I made a simplified project that show the problem available at https://github.com/rusanu/test-ember.
In the layout:
<head>
<title>TestEmber</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= yield :head %>
<%= csrf_meta_tags %>
</head>
In the view:
<%= content_for :head do %>
<%= javascript_include_tag "dashboard/dashboard", :cache => 'dashboard' %>
<% end %>
and in my dashboard/dashboard.js:
//= require handlebars
//= require ember
//= require ember-data
//= require_self
This results in error:
Showing /home/rremus/test-ember/app/views/dashboard/show.html.erb where line #2 raised:
No such file or directory - Asset file not found at '/home/rremus/test-ember/public/home/rremus/.rvm/gems/ruby-2.0.0-p0/gems/handlebars-source-1.0.0.rc4/dist/handlebars.js'
Extracted source (around line #2):
1: <%= content_for :head do %>
2: <%= javascript_include_tag "dashboard", :cache => 'dashboard' %>
3: <% end %>
4:
5: <h1>Dashboard#show</h1>
Notice how the asset path consist of the project public directory (/home/rremus/test-ember/public) and then correct asset path (/home/rremus/.rvm/...) is appended, resulting into an incorrect path.
My guess is that you have to do some special gymnastics to get it working with the cache directive in this case based on the Rails guide for the asset pipeline.
If you ditch the cache directive and rely on precompilation to handle file combination then things seem to work without error.

Configuring Rails Asset Pipeline in dev and production

I am still not quite sure about the best practice of using rails asset pipeline. In a rails skeleton project, the application.html.erb contains code as:
<head>
<title>My title</title>
<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", media: "all" %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
Now in development, all js and css would be served properly. But in production, after precompile all the asset (js and css), I only need application.css and application.js, as scaffolds.css and depot.css are concatenate in application.css. So scaffolds.css and depot.css are no longer needed in production.
How could I have the above code in dev and then in production, have asset pipeline know certain assets have been concatenated in application.css/js and then remove those asset link tag in the code?
If this is not possible, how should I avoid loading redundant resources and keeping prod deployment manageable? (meaning no deleting the link_tag manually in production)
Thanks.
You do not put
<%= stylesheet_link_tag "scaffolds" %>
<%= stylesheet_link_tag "depot", media: "all" %>
<%= stylesheet_link_tag "application", media: "all" %>
in your layout file. You only put
<%= stylesheet_link_tag "application", media: "all" %>
And in config/environment/development.rb you make sure you have
config.assets.debug = true
When config.assets.debug is set to true it will automatically generate the <link ... /> tags for each of your stylesheets in dev mode for each assets required in the application.css file's Sprockets directives.
In config/environment/production.rb config.assets.debug will be false by default, causing the assets to be concatenated together into a single application.css file (again, assuming your //= require lines are correct in application.css). This will cause 1 link tag to be created for only application.css in production.

Resources