Found a strange bug in Ruby on Rails 4.1 asset pipeline on Heroku. All of my PNG images are not being compiled.
In Development:
image_tag('icons/example.png')
# => "/assets/icons/example-09adfasdfa7sfhpasodfuahsdas.png"
In Production on Heroku
image_tag('icons/example.png')
# => "/images/icons/example.png"
I have never run across anything like this in the asset pipeline. Any ideas as to why?
Update
As it turns out, it's not PNG images in particular. It is any image accessed via image_tag. Any images that are precompiled in CSS and Javascript point to the proper paths, but any views/helpers that use image_tag (and thus path_to_image) are pointing to the /images. I cannot tell if this has to do with the serve_static_assets configuration that Heroku recommends that is not playing well with Rails 4.1
Related
I am deploying and ember-cli app to heroku and pretty much everything is working as hoped. The only issue is that when the app precompiles, it adds a fingerprint to images and assets as expected but does not add them to the asset reference within a stylesheet. Specifically, I have a couple of images as background images in stylesheets that when deployed can't be found due to the addition of the fingerprint to the file. How do I either get the fingerprint added to the asset path reference in the stylesheet or tell ember/heroku to not add fingerprint to any files? Thanks for the help.
A little late getting back to this but I ended up just disabling the fingerprinting for now by adding this in the Brocfile.js
var app = new EmberApp({
fingerprint: {
enabled: false
}
});
You just need to upgrade to the latest version of Ember CLI. From version 0.1.3 of Ember CLI there's no need to disable fingerprint. I think it's fixed by this pull request.
According to Ember CLI guide steps to upgrade to the latest version of Ember CLI are included with each release and can be found here.
Before upgrade, I had issues with Lightbox2 and Fancybox(image assets). After upgrade, all references to fingerprinted assets are applied correctly.
I am currently using Rails 4.0.2 with jQuery UI (mostly for the datepicker). My production environment is Heroku.
My main problem is that the images for my theme are not being served in production (while it works fine in development). I am including the theme's css like this in my application.css:
*= require_self
*= require_tree .
*= require jquery-ui-1.10.4.custom
The theme's css is showing up fine, but none of the images are working. I have read through endless questions on StackOverflow, blogs and discussions on Github - none of which have worked for me. I also read through the Edge Rails guide which doesn't mention a word about image precompilation, even though from the discussions on Github it seems that this has really changed in Rails 4.
Here is my current directory structure:
/vendor
/assets
/stylesheets
jquery-ui-1.10.4.custom.css
/images
animated-overlay.gif
ui-bg_flat_0_aaaaaa_40x100.png
(more images like these)
As far as I know the correct way of integrating external css and javascript libraries is to put those assets inside /vendor/assets so that is what I'm doing.
So again, my problem is that rails flatly refuses to serve any assets in production. I can fiddle with the image URL, but it's simply not getting served.
Here are things I have tried:
Force Rails 4 to precompile images
If I run rake assets:precompile I only see 2 files inside public/assets - a css file and a javascript file. I'm assuming this is wrong and that Rails should actually put my images there as well.
According to this question - rails 4 asset pipeline vendor assets images are not being precompiled - you need to explicitly tell Rails that you want images to be precompiled. (This seems rather insane to me, since I am pretty sure I am not the only Rails 4 site on the internet serving images. Is everyone else just using text and ASCII art?)
So I added this to my application.rb:
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Now when I run rake assets:precompile all my vendor assets are being compiled, fingerprinted and put in public/assets/images. This has no effect in production though, I suspect that Rails is simply refusing to serve the default assets and will only serve the fingerprinted assets.
Manually include the vendor images path
Some of the other things I read suggested that you need to manually specify the images path if it is outside of app/assets (since mine is in vendor/assets this seems to qualify).
config.assets.paths << Rails.root.join('vendor', 'assets', 'stylesheets', 'images')
When I now run rake assets:precompile my images are no longer being precompiled or fingerprinted, but they are also not being served in production.
According to this blog post - JQuery-UI css and images, and Rails Asset Pipeline - this is because Sprockets will see that a path is already included and will exclude it and you can fix it by prepending the path in application.rb.
initializer :after_append_asset_paths,
:group => :all,
:after => :append_assets_path do
config.assets.paths.unshift Rails.root.join("vendor", "assets", "stylesheets", "images").to_s
end
This also had no effect. When I run rake assets:precompile it doesn't compile or fingerprint my images and it doesn't show up in production. That post is targeted at Rails 3 so I didn't really have high hopes.
Move all images to app/assets/images
Even though this seems wrong to me (in the Rails sense) I moved all the images to app/assets/images. This still had the same result - images are not showing up in production. I also tried combining this with the trick of forcing images to be included in compilation:
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
But it didn't have any effect. I suspect Rails is simply being stubborn and not serving the non-fingerprinted assets.
Other things I have tried
The images being requested are done via css, so if I look in the actual theme's css file there are lines like this:
background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
Some things I read (mostly in the comments/complaints on Github and blog posts) suggested that the /images at the beginning of the url is screwing with me. So I manually went into the file and removed it everywhere, which had no effect - meaning images still didn't show up in production.
Things I don't want to try
According to this post - Rails 4: How To Fix The Heroku Assets Not Found CSS Image Issue - I should add this to my production.rb
config.assets.compile = true
I really don't want to do that since the asset pipeline does it by default and according to my knowledge (which might be completely wrong) it would be really bad for performance. For the same reason I don't want to just go ahead and add
config.serve_static_assets = false
to my production.rb since I don't want Rails serving static assets in production - I want Apache/nginx to do it.
How are you supposed to do this in Rails 4? Please help!
I finally managed to fix this issue. There are 2 parts to the solution. Firstly, you need to tell Rails to precompile images. As far as I can tell Rails (since 4.0) will no longer do this automatically to prevent gems you include from having all their assets precompiled when you don't really want this.
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
Now your images should be getting precompiled (you can check this by running rake assets:precompile and looking at the results in public/assets).
Now you need to change your JQuery UI theme to reference the fingerprinted images instead of the plain image URL. So change the theme's filename extension to .scss (in my case it was jquery-ui-1.10.4.custom.css.scss) and do a find and replace in your theme - changing url to the SASS helper image-url. So, as an example,
url(images/ui-bg_glass_65_ffffff_1x400.png)
becomes
image-url('images/ui-bg_glass_65_ffffff_1x400.png')
I'm new to coding and to Rails and I've run into this issue for the first time - the local development version of my app is differing in a detrimental way from the production version.
I'm using Zurb Foundation on my Rails app and deploying to Heroku to see it in production.The issue that I am facing is that locally, the CSS I wrote to get the padding between the navbar and the rest of the page is working correctly, but when I deploy to Heroku the CSS is not rendering correctly and the padding is missing.
I wrapped the yield in application.html.erb with a div of a class I named "fixednavbar" and wrote the following css:
.fixednavbar {
padding-top: 60px;
}
I put this css in a layouts.css.scss file in the asset pipeline (Rails 3.2.13). The code in the application.html.erb file is as follows:
<div class="row fixednavbar">
<%= yield %>
</div>
I have checked the code locally and on github to make sure they match up and they do. I took a drastic step and started a new repository, then removed the local git repository and started a new one and pushed all the current files there (I created a new repository on github so that all of my previous versions are still in the original repository).
After doing this, I created a new Heroku app and deployed and still the production version is not rendering the CSS the same as the development version.
I'm at a complete loss as to why these versions would differ when the code is the same (unless there is something lurking somewhere else that I have not thought to check).
Any and all help is much appreciated. As I said, I'm knew to Rails (and coding for the most part) and this is the first time I've run into an issue like this.
Thank you!
Update:
I have continued to try to sort this out. I did other work on the application and then came back to this issue. I want to get the production version to reflect what is in development, so any help at all would be amazing.
To describe the issue further: It is almost as if my production deployment to Heroku is stuck in an old version of the app when the css wasn't worked out yet. The navbar color is stuck on the first color I changed it to and will not update to the new color. The sticky nav is still causing an issue in production where the body is partially hidden behind the nav.
Now, in development running the local server, I have fixed all these issues. The changes are reflected in development and everything is as it is intended to be.
After the changes, I commit to the git, then I push to github. After pushing to github, I push to Heroku.
The github files reflect the changes and the code is as it should be. Still, Heroku is not reflecting this.. I'm honestly stumped here and need some help please.
With some help from the users who responded, I was able to identify the error and search for the solution. I found it HERE.
The solution is to look in the production.rb file and find the line where it says
config.assets.compile = false
and change "false" to true.
config.assets.compile = true
Then run
rake assets:precompile RAILS_ENV='production'
After deploying to Heroku, you may need to run
heroku run rake db:migrate
This got everything working correctly upon deployment to Heroku.
How have you included this plugin? Instead of adding the js and css directly, try using their gem from https://github.com/zurb/foundation-rails and remove any direct references from your app. I've faced similar issues with other plugins like bootstrap, bxslider etc.
As a beginner, I was having a difficult time with the same issue. Because I'm using Rails 4, the simple step of removing this line from config/application.rb did the trick.
config.assets.initialize_on_precompile = false
https://devcenter.heroku.com/articles/rails-asset-pipeline
Granted, I troubleshot all the above steps and a few others from other postings.
This is an app that I am upgrading to Rails 3.1, along with the asset pipeline. Everything looks peachy in development, but when I push to heroku, the images in my css are not displaying.
Couple of questions. First, should I leave these files with the css extention, or should they be renamed to either scss, or css.scss.erb?
The other question I have is how should I reference images in the css. Currently I have...
background: #B4F4FF url(/assets/img01.jpg) repeat-x left top;^M
I am pretty sure I need to replace url with either 'image_tag' or 'asset_tag'...looks like there are a few options available. Also, what should the path be?...../assets, assets/images, just the file name???
I've tried all manner of methods, and paths, and can't get this to work in Heroku. Any help appreciated!
Wow! This was a real pain to figure out.
For me the issue centered around static pages that I had in my app. I had to add the line...
config.assets.precompile += ['static_pages.css']
to config/environments/production.rb, then compile my assets locally with
RAILS_ENV=production bundle exec rake assets:precompile
then push all that to heroku.
I was running into issues with Heroku showing my 'places.js' was not precompiled, even though im running on the cedar stack, and during the slug compilation it is running the rake precompile task. so i tried running it locally with rake assets:precompile RAILS_ENV=production and indeed rails was not precompiling my /app/assets/javascripts/places.js.coffee.erb asset.
my production.rb is using default rails 3.1 configuration, and i even tried removing the .erb from the asset, but to no avail.
I also thought since my places.js.coffee.erb asset is NOT included in the sprockets manifest (i include it manually in my app), perhaps it only precompiles assets in the manifest. Requiring it in the manifest didn't work either.
only my application.js.coffee and `application.css are precompiling (with and without a digest).
the only issue i found was possibly poor regex being used to match assets, but the default of (?:\/|\\|\A)application\.(css|js)$ does not match my asset, so it should be included.
i am not sure how to troubleshoot from here. everything is pretty much default. any thoughts on what could be happening here?
Firstly, if you want a file to compile when it is not in a manifest, you need to add it to the precompile config option:
config.assets.precompile += ['places.js']
Secondly, can you edit your question to include your manifest - it may be a syntax issue. I will edit this answer if I can see what the issue might be.
I had the same issue and resolved it like this:
# add new file /app/assets/javascripts/places_manifest.js
//= require places
# add a line to config/application.rb
config.assets.precompile += ['places_manifest.js']
# in your views include places_manifest, not places
javascript_include_tag 'places_manifest'
While the above solutions seem fine, I wondered why do I have to do this?
Like everyone else, I got the error in production stating that my newly added javascript file was not pre-compiled. It was however, I found it's code in the minified application.css file that Rails had generated on my production server.
The problem was that while developing, I thought I would need to add a javascript_include_tag helper to load my new javascript file. Adding that helper was the source of my particular error. I just removed it, and everything worked fine in both development and production environments.
So my suggestion to you is look for signs of your new .js file in your minified application.js and don't modify any other files as the above solutions suggest. Please point out the error in my ways if necessary ;)