I am having a problem with CSS3 code and heroku. I am currently hosting my website temporary on heroku, and this piece of code doesn't not seem to work:
#my_footer
{
margin-top:170px;
background-color:rgba(17,142,36,0.3); /* added this because of the backgroud */
border-radius: 3px 3px 3px 3px;
}
especially this line of code: background-color:rgba(17,142,36,0.3);
the strange part is that it works on my localhost, but not on heroku! and i am using the same browser!
btw I have this in my config/environments/production.rb
...
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = true #changed to true!
...
otherwise heroku returns me an error, and does not display the page if it is 'false'
I am using twitter bootstrap btw!
Thanks!
You can try compile localy and then try to push it,
from heroku
RAILS_ENV=production bundle exec rake assets:precompile
If you use the twitter bootstrap gem I think it should be grouped in assets
group :assets do
gem 'twitter ...'
end
Related
I'm using Rails 3.2.9 and I precompiled my asset pipeline locally before the application deploy (with Capistrano) and it works good. I used:
bundle exec rake assets:precompile
In "config" directory I only modified deploy.rb and production.rb. Now, in development mode, when I put new code in /app/assets/javascripts/application.js I can't see changes in my application.
For example, I use jQuery multiselect in this way:
$("#question_number").multiselect({
multiple: false,
header: false,
show: "blind",
hide: "blind",
minWidth: "200",
selectedList: 1
});
Before precompilation, the select change graphic, but now remain a classic html select. I think that the problem is the precompilation, because I took source code precompilation and a new jQuery multiselect works. I tried to do a new precompilation, but nothing change.
Run rake assets:clean, clean your browser cache and reload the page. That should solve the problem for you.
Also, look at: Rails won't load asset pipeline for more details.
Command rake assets:clean works good, thanks so much Puneet.
In the future, pay more attention to change nothing into asset pipeline files, such as application.js.
For me, only a change gave problems.
Buttons generated by link_to_add are clickable but no partial form is generated for them on the screen after being clicked. The issue started after adding the modal.js from bootstrap. Currently the javascript is loaded using:
In the layout, along with:
gem 'jquery-rails', '~> 2.1.4'
gem 'nested_form'
In the gem file, using rails 3.0.9.
Locally using development mode there is no issue, the issue only arises once pushed to Heroku.
Tracing what's happening I see no errors occuring in any javascript, but I do notice that this happens at the bottom of any source involving add_to_link:
<div data-blueprint="<div class="fields"> <div class="w450 eboxw">
<table style="width:100%;" class="copy reg">
<tr>
<td><label class="copy
I believe that this is meant to be the target of the link_to_add action and the fact that it contains so many seemingly incorrect characters is troubling to me.
I've read about asset pipelines which I don't believe I have set up for the application, any configuration tips or possible reasons this could happen are appreciated.
I think you need to precompile the assets before uploading to Heroku. Did you do that? Can you use Rails 3.2, then precompile, then upload?
I've got 3 Rails 3.2 applications using the gem jquery-ui-themes. jquery-ui-themes uses scss for the image-path helper.
It works great on two of my applications, but the 3rd doesn't seem to compile the scss files in either development or production modes.
IOW, it sends this to the browser
background: #fcfdfd url(image-path("jquery-ui/redmond/ui-bg_inset-hard_100_fcfdfd_1x100.png")) 50% bottom repeat-x;
whereas the two working apps properly send
background: #fcfdfd url("/assets/jquery-ui/redmond/ui-bg_inset-hard_100_fcfdfd_1x100.png") 50% bottom repeat-x;
I've spent many hours trying to make the app that's broken as similar to possible to the two working apps as I can, but it's still failing.
My theory is that SASS is choking on something previous to redmond.css.scss. If so, there should be an error logged somewhere. Where do I find the error output from SASS?
Update:
I introduced a deliberate error into redmond.css.scss and I got a proper error dump. So I know that I'm correctly clearing the cache and actually running sass. Now to figure out why it's ignoring the image-path directives.
If you're looking for the answer to the question in the title, the answer is "the same way you get any other errors: they're in your log". To get a full backtrace, just point your browser at the asset: ie http://localhost:3000/assets/jquery-ui/redmond.css in my case.
Make sure you clear all your caches: rm -rf .sass-cache/ && rm -rf public/assets && rake tmp:cache:clear, as well as using ctrl-shift-r in your browser.
If you're looking for the answer for my real problem (image-path not working), make sure you have the proper Bundler.require line in your application.rb. The old Rails 3.0 doesn't work.
replace:
# If you have a Gemfile, require the gems listed there, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env) if defined?(Bundler)
with:
if defined?(Bundler)
# If you precompile assets before deploying to production, use this line
Bundler.require(*Rails.groups(:assets => %w(development test)))
# If you want your assets lazily compiled in production, use this line
# Bundler.require(:default, :assets, Rails.env)
end
I started using the asset_sync gem in order to use Amazon S3 as a CDN asset host (I am using Heroku and RoR). All of my assets are loading correctly, except for the icons I am using through Twitter Bootstrap (There is just a blank space where the icon should be).
I tried using Heroku's multiple asset pre-processor support:
app/assets/stylesheets/custom.css.scss.erb
background-image: url(<%= asset_path "../img/glyphicons-halflings.png"%>);
I also tried moving the glyphicons-halflings.png directly into the images folder and referencing it there:
app/assets/stylesheets/custom.css.scss.erb
background-image: url(<%= asset_path "/assets/glyphicons-halflings.png"%>);
app/assets/stylesheets/custom.css.scss
background-image: url("/assets/glyphicons-halflings.png");
However, I've haven't found a way to make it work. Any suggestions on how to get the Twitter Bootstrap icons to work successfully with S3/Heroku would be greatly appreciated.
EDIT: I am using: gem 'bootstrap-sass', '~> 2.0.2'
If you are using gem 'bootstrap-sass', the following is a solution that worked for me.
First, download bootstrap from the bootstrap website. Extract the two icon .png files (glyphicons-halflings.png and glyphicons-halflings-white.png) and copy them into your apps image directory (app/images).
In your custom.css.scss file (this could be a different name depending on your app) enter the following at the top of your stylesheet (before you import bootstrap) to override the icon image path:
$iconSpritePath: url('/assets/glyphicons-halflings.png');
$iconWhiteSpritePath: url('/assets/glyphicons-halflings-white.png');
#import "bootstrap";
Use the Rails image helper for example:
background-image: image-url("glyphicons-halflings.png");
You can also check your search path in the Rails console with:
Rails.application.config.assets.paths
Good luck!
Have you set your asset host?
https://devcenter.heroku.com/articles/cdn-asset-host-rails31#configuration
Did you check the background-image URL that is actually used? I had the same behavior when I tried to test the CDN in my development enviroment. Turns out, somehow the wrong bucket was used in the application.css
For anyone not using the bootstrap-sass gem I finally got mine working by changing the default bootstrap css file extension to scss and editing the following piece of code to use the rails asset_url method. Just search for #font-face in the code and try this.
#font-face {
font-family: 'Glyphicons Halflings';
src: asset_url('glyphicons-halflings-regular.eot');
src: asset_url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), asset_url('glyphicons-halflings-regular.woff') format('woff'), asset_url('glyphicons-halflings-regular.ttf') format('truetype'), asset_url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Commit and push to heroku. Worked for me. Hope this helps someone
I have a sample app that is using compass gem including blueprint. I just deployed this app on heroku for the first time and I'm seeing the following error in heroku logs
Errno::EACCES (Permission denied - /app/public/stylesheets/ie.css):
Is there something special required in my rails app that will make this error go away? I'm assuming it's coming because I'm using the compass gem...
Do a compass compile before deploying to heroku.
Also, in your production.rb, add the following line:
Sass::Plugin.options[:never_update] = true
This will prevent compass from compiling css at runtime (since heroku does not allow writes on filesystem)
Just set this option to true in config/environments/production.rb and everything will work fine:
config.assets.compile = true
Save ie.css from your local machine, add it into your public/stylesheets folder, and push it up to heroku.