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
Related
I'm using Datetimepicker and Slider. I include them in my Gemfile
gem 'datetimepicker-rails', github: 'zpaulovics/datetimepicker-rails', branch: 'master', submodules: true
source 'https://rails-assets.org' do
# gem 'rails-assets-select2-bootstrap-css'
gem 'rails-assets-seiyria-bootstrap-slider'
end
In my application.js
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require seiyria-bootstrap-slider
This works great in development, but when I run RAILS_ENV=production rake assets:precompile on the server (capistrano deploy or by hand) these, and others don't seem to get pulled in. Chrome complains specifically about these two first.
I know I could put the line Rails.application.config.assets.precompile += %w( *.js ) and then do a =javascript_include_tag :XXXX, but this defeats the purpose of sprockets/manifest right?
My understanding with sprockets/manifest is when I require it in my application.js it'll be included with the deploy so the client hits the server less.
Is there something I'm missing?
EDIT
Traced the problem to the uglifier gem. When I remove/comment out config.assets.js_compressor = :uglifier and recompile the JS starts working again.
Any thoughts?
this is because things work differently in development as compared to production.
few thing to note:-
No CSS or JS files will be available to your app through the asset pipeline unless they are included in other files OR listed in the config.precompile directive.Only application.css and application.js are available by default of all the CSS and JS files.
Every file that is not a Javascript file or CSS file that is in the app/assets folder will be copied by Rails into the public/assets folder when you compile your assets.So if you want to add some web fonts, you could make an app/assets/fonts/ folder and put your fonts in there, these will then be copied to public/assets/fonts folder when you compile your assets. Note that your app/assets/stylesheets/fonts.css.scss file that references those fonts will NOT be copied over unless you either added it to the config.assets.precompile directive or required it from your application.css
for config.assets.compile...If it is set to "true" (which it is by default in development) then Rails will try to find a Javascript or CSS file by first looking in the public/assets directory and if it can't find it, will hunt through your app/assets folder looking for the file. If it finds it in app/assets it will go ahead and compile on the fly and then serve this asset up.
The problem with this is that you don't notice it happening in development, then you commit everything and push to production and BOOM, everything is broken with 500 errors because production has config.assets.compile set to "false".This prevents the app from "falling back" and trying to load the file directly instead of using the asset pipeline.
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
Why don't you just have this set to "true" in every environment? Well, because it is sloooooow. And you don't want slow in production
Run RAILS_ENV=production rake assets:clean assets:precompile
check public/assets directory and verify that assets are compiled..if its not empty...that means asset pipeline is working but path is not correct.use asset_helpers to set the path of assets in css files.
I have searched around and can't rectify the situation based on the responses to other similar questions. I seem to have broken the asset pipeline somehow but can't seem to figure out how.
None of my assets are being loaded at all; rails seems to just be ignoring my manifest files. When I inspect my page in firebug, only the 'non-compiled' text inside my manifest files (both js and css) is being displayed - almost as if the asset pipeline wasn't even enabled.
I deleted the contents of public/assets since I was adding a new file to the manifest which seemed to start this behavior.
Current configuration:
environments/development.rb
# Do not compress assets
config.assets.compress = false
# Expands the lines which load the assets
config.assets.debug = true
application.rb
# Enable the asset pipeline
config.assets.enabled = true
config.assets.manifest = config.root
# Add extra assets for precompiling
config.assets.precompile += ['admin.js', 'admin.css']
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
I had the same issue. You can still use Ruby 2.1.2, just upgrade rails to latest 3.2.x version - it's 3.2.22
Gemfile:
gem 'rails', '3.2.22'
And run:
$ bundle update rails
The issue was caused by using an incompatible version of ruby. I was using version 2.1.2 which lead to unusual behavior from the sprockets gem (which powers the asset pipeline). This was fixed by downgrading to ruby 1.9.3. I haven't done any experimentation for fear of breaking it again but maybe this has been addressed in later versions of sprockets. I am using sprockets 2.1.3.
See: Rails 3.2.8 Application.js and Application.css are not working as expcted
Always remember two things when you want to handle Rails asset pipleline:-
if you want all you newly created js/css to autoinclude in application.js/css,pls add them in...
ELSE
IF you dont wont to add in manifest file(application.js/css) then use precompile directive in yuur environment file.
config.assets.precompile=%w(custom.css,custom2.js...etc)
so make sure you have either of these...
===========for example=-=============
suppose you have new css/js file:-
custom.css inside
app/assets/stylesheets/
so you can include in
application.css
// = require 'custom'
OR
use precompile directive:-
config.assets.precompile += %w( custom.css )
and then reference it like you always do
stylesheet_link_tag "custom"
same applies for js also
I just spent a few hours troubleshooting this issue (in 2017!) and it turned out I just needed to remove the gem active_reload. Updating rails and ruby was having no effect for me. The thread where I found that gold is here:
https://github.com/rails/rails/issues/2715
I installed twitter bootstrap by copying the files into my assets directory as per the instructions here: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/
After following the instructions exactly as presented and executing "rake assets:precompile RAILS_ENV=development", I am able to use bootstrap 3 in my development rails server.
However, when I try to execute "heroku run rake assets:precompile RAILS_ENV=production", I get this error:
Sass::SyntaxError: Invalid CSS after "...ss","sources":[": expected "|",
was ""less/theme.les..." (in /app/app/assets/stylesheets/application.css) (sass):444
I am not sure what this means. When I open "application.css" in the assets/stylesheets folder, I can't even find a line 444. I do have some scaffold files left over after running "rails g scaffold ..." commands -- could that be causing this problem? And obviously, the deployed heroku app looks like a non-bootstrap app when I view it from the heroku page and throws a "resource not found" error.
In public/assets/application-mydigest.ccs, I found the following line of code that causes the error:
{"version":3,"file":"bootstrap-theme.css","sources":["less/theme.less","less/mixins/vendor-prefixes.less","bootstrap-theme.css","less/mixins/gradients.less","less/mixins/reset-filter.less"],"names":[],"mappings":"AAeA;;;;;;EAME,0CAAA;EC+CA,6FAAA;EACQ,qFAAA;EC5DT;AFiBC;;;;;;;;;;;;EC0CA,0DAAA;EACQ,kDAAA;EC7CT;AFqCC;;EAEE,wBAAA;EEnCH;AFwCD;EG/CI,0EAAA;EACA,qEAAA
However, it seems odd that this would only happen on production. Moreover, the CSS syntax looks fine.
This error means the assets compilation failed because of an invalid css syntax into a file you require in application.css.
In bootstrap repository there is a less directory and you can't precompile less files with rails.
If you want to use Rails and Bootstrap on a production environment I think use bootstrap-sass gem is a better option
Have you tried using rails-assets instead of the referenced method of adding Bootstrap 3? I use it on Heroku with success... and just add my own custom Bootstrap css in my normal assets folders which get loaded after the vanilla Bootstrap 3 and override it. Just add gem 'rails-assets-bootstrap' along with source 'https://rails-assets.org' to your gem file. May help diagnose if nothing else.
EIther of the two things you must take care to avoid assets compilation errors when you go live.
- Add all your assets(js/css) in manifest file(application.js/application.css)
- OR
- use assets.precompile=%w(custom.css custom.js) directive to handle them explicitly
because when u precompile...rails copies everyting(images/fonts) except js/css into public folder to be taken care by the server(apache),hence the setting # Don't fallback to assets pipeline if a precompiled asset is missed config.assets.compile = false in production.rb during assets precompile fallback is disabled by default in production/staging as Rails assumes it will be handled by webserver.Hence we have manifest file to define our assets which gets precompiled during assets:precompile and verified by looking for public/assets/javascripts/application.css/js after compilation which gets created requiring all files mentioned in app/assets/stylesheets/application.css and app/assets/javascripts/application.js after running assets:precompile...so hope u know where you missed.
FOR MORE DETAILS..REFER this
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!
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