Question:
How do you get the asset pipeline to process all your .js files? (I want them served individually, not bundled into application.js)
I'm getting a ton of 404's for the javascript files that my pages are trying to reference:
GET http://<myStagingServer>.heroku.com/assets/<javascriptFilename1_MD5fingerprint> 404 (Not Found)
GET http://<myStagingServer>.heroku.com/assets/<SubDir>/<javascriptFilename2_MD5fingerprint> 404 (Not Found)
I tried adding this to config/application.rb:
config.assets.precompile << '*.js'
But that didn't do anything as far as I can tell.
Background:
I'm upgrading from Rails 3.0 to 3.1 and enabling the asset pipeline.
Highlights so far:
Switching to Heroku's Cedar stack from Bamboo: heroku create --stack cedar.
Switching to "thin" as the production server, which fixed various issues: gem 'thin'.
Moving my assets from public/assets to app/assets, updating references in code to use stylesheet_link_tag and javascript_include_tag. (Plus whatever I did for images -- they work.)
Removing x_sendfile_header config options because Heroku doesn't support it.
Relevant files:
//
// application.js
//
//= require_self
//
OMG: I found the problem:
javascripts and stylesheets with periods in their names require explicit extensions
For example:
# WORKS
javascript_include_tag "application"
stylesheet_link_tag "application"
# BROKEN
javascript_include_tag "jueryui.custom"
stylesheet_link_tag "jueryui.custom"
# WORKS
javascript_include_tag "jueryui.custom.js"
stylesheet_link_tag "jueryui.custom.css"
I guess I can see why this is, but I think that it isn't very well documented on any of the asset pipeline tutorials. Is it common knowledge that you shouldn't have periods in your asset filenames?
I think you need the following in both application.js and application.css :
//= require_tree .
This loads all the files in the assets directory for CSS and JS.
Also for upgrading to 3.1 and info on the asset pipeline:
http://railscasts.com/episodes?utf8=✓&search=Asset+pipeline
Also: Using Rails 3.1 assets pipeline to conditionally use certain css
Related
In my Rails app I have css and js that is unique to each action.
So users#new has its own css. It's named users_new.css.scss.
I deployed my app to Heroku, and Heroku isn't loading any of the assets. You can see the errors here. How do I fix this so Heroku correctly precompiles and loads the assets?
I read through Heroku's docs on using the asset pipeline, but didn't see any solution.
Precompilation
The problem is your timelines_index.js is not precompiled:
The way you can tell this is a problem is that when you call the asset in your layout (which I presume you're doing with the correct path helpers), Rails will automatically reference the latest precompiled version of that file (hence why application.js has the appended MD5 fingerprint)
I believe you'll need to add your custom files to your precompiled_assets array:
#config/environments/production.rb
Rails.application.config.assets.precompile += ['timelines_index.js']
This will give Rails the ability to precompile those assets individually, allowing you to call them in your layout:
#app/views/layouts/application.html.erb
<%= javascript_include_tag "timelines_index" %>
This will have to be done for all the custom asset files you wish to call in your layout.
Manifest
As mentioned by Anil, you may wish to use the manifest system of Rails to concatenate all your asset files into their respective application files.
This will quash the need to append the files to the Rails precompile array, allowing you to call a single file for your various assets:
#app/assets/javascripts/application.js
//= require_tree .
Add in your Gemfile
gem 'rails_12factor', group: :production
I've deployed a fresh Rails 4 app to Heroku but my stylesheets and images don't work. For the stylesheets. I use:
<%= stylesheet_link_tag "screen", media: "all" %>
For image, I use paths encoded in CSS, like:
<img class="logo small" src="/assets/logo.jpg" alt="logo">
These paths work perfectly well on my local machine but break in deployment. I thought that this is due to the not serving of static assets by the Heroku Cedar stack, and set this setting to true in production.rb:
config.serve_static_assets = false
This didn't solve it. What am I missing? Thanks!
Heroku have specific instructions for hosting Rails4 applications on Heroku. Do you have the rails_12factor gem in your Gemfile for production?
https://devcenter.heroku.com/articles/getting-started-with-rails4#heroku-gems
Also, I would suggest switching to using the rails helpers for images as it makes it easier when dealing with the asset pipeline in production -
<%= image_tag 'logo', class: 'logo small' %>
I've figured it out - this issue was due to a badly functioning git repository. I'm using the asset pipeline now for both stylesheets and images - but I had to delete both the local git repository and the remote app and initiate everything from scratch. These are the steps I've taken:
1) Declare all stylesheets in application.css like so:
*= require_self
*= require frameless
*= require typography
*= require grid
*= require layout
(My old app used a screen.css file in which I imported the above files. This doesn't work with the AP - every file must be referenced directly in the application.css manifest file, in the correct order so as the CSS rules stack up with the right precedence. To ensure this, you might want to delete the require_tree directive that is there by default).
2) Change all HTML image paths to rails helper image_tag tags.
3) Run RAILS_ENV=production bundle exec rake assets:precompile to generate a public/assets directory with all the precompiled assets, as described here.
Check everything into a new git repository (having deleted the new), and then follow Heroku's instructions on how to deploy a Rails 4 app.
Bingo!
We're precompiling our assets locally before pushing to Heroku -- so there's a load of files in public/assets that for the most part Heroku is using in production -- we're seeing asset compiliation notes in the log of 0ms. However, we're getting timeout errors when Heroku gets to javascript_include_tag "application" in our layout header and tries to recompile all the js all over again.
Is this meant to happen? How can we get Heroku to use only the locally-compiled assets and not keep spending 50s compiling assets again? Scaling up dynos does help, but that's not really addressing the root cause.
// edit to explain how we're using the asset pipeline //
We have a file in app/assets/javascript called application.js -- this is the manifest file that refers to all the javascript we need to be loaded. Here's a snippet:
//= require js/libs/jquery-1.7.2.min
//= require js/libs/jquery-ui-1.8.21.custom.min
//= require js/libs/jquery.ui.touch-punch.min
//= require js/libs/less-1.3.0.min
//= require js/libs/modernizr-2.5.3.min
There are 55 lines in this file.
We then use javascript_include_tag "application" in app/views/layouts/application.html.haml to call that manifest file.
there are multiple ways of using Rails asset pipeline on Heroku, and as you don't give us much details on implementation, the only thing I can recommend is reading this:
https://devcenter.heroku.com/articles/rails-asset-pipeline
If you update the question with precise details of implementation I could try to be more helpful.
Check your config/environments/production.rb settings:
config.assets.compile = false
config.assets.initialize_on_precompile = true
My rails 3.1 app runs fine locally, but when I run it on Heroku the logs show Rails is not finding javascripts inside the vendors/assets/javascripts directory even though browsing them manually works.
I am using the plupload-rails3 gem, and the gem's javascripts are not loading on Heroku, but do load fine on my local dev machine.
In my assets/javascripts/application.js I have:
//= require_tree ../../../vendor/assets/javascripts/plupload-rails3
//= require_tree ../../../vendor/assets/stylesheets/plupload-rails3
//= require_tree ../../../vendor/assets/images/plupload-rails3
When I run my app on Heroku the logs show Rails trying to load and failing with each of the plupload javascripts, with a token identifier:
ActionController::RoutingError (No route matches [GET] "/assets/plupload-rails3/plupload/js/plupload.full-f4741a878138cea127e6b38b6a08cf12.js"):
So the plupload widget does not display on the page on Heroku (but does when I run locally).
However, if I manually browse that location (without the ID token):
http://MYAPPNAME.herokuapp.com/assets/plupload-rails3/plupload/js/plupload.full.js
I do see the file.
I have also tried precompiling the assets locally, then pushing to Heroku, with same result.
So something in my app is broken with Rails on Heroku accessing the vendor/assets pipeline.
(I do have config.assets.compile = true in my production.rb file. The original setting of false caused the app to crash when it failed to find the precompiled assets, at least now it doesn't crash, but it ignores the javascript widget.)
Application.js is a manifest file for javascript, you don't want to include images or css in it.
vendor/assets/javascripts should already be in the path it is searching so just include:
//= require_tree ./plupload-rails3
Edit:
you can do similar to include the css in application.css, images do not need to be included in a manifest.
Check out the Rails Guide: http://guides.rubyonrails.org/asset_pipeline.html and Ryan Bates Railscast http://railscasts.com/episodes/279-understanding-the-asset-pipeline for more info.
Edit2: just looked through the gem, did you run
bundle exec rake plupload_rails3:install_assets
To install the assets? If not, run that, then try the code above.
I am having little problem when compiling assets if i specify a my application layout <%= stylesheet_link_tag "application", "master" %>, the master does not get compiled when running the asset precompile command. So also i have a layout called application.mobile.erb and the assets precompile command never compiles any asset from that layout. Pls could i be doing something wrong here..
you can specify in production.rb
config.assets.precompile += %w[master.js]
also add above all javascript files from application.mobile.erb oru use
//= require ...
in root js file, assets pipeline will know where to find them