I have a ruby on rails app that uses highcharts.
Locally it works like a charm, however when I push the app to Heroku, Highcharts stops working and the div tag that is supposed to contain the chart appears empty.
I even tested it with one of the Highcharts examples (which has only hardcoded data), and still nothing.
Figured it out: The problem was in the precompiling of assets. Turned out that highcharts was not precompiled
Added :
config.assets.precompile += ['rollover.js', 'highcharts.js']
to production.rb (i suppose application.rb should work as well)
and
to layout file.
(since i expected all javascript files gets compiled in application.jss i only had <%= javascript_include_tag "application" %> in my layout file)
Sounds like Highcharts is not loading - either because it isn't being pushed to Heroku or because it isn't being served properly. Go to the URL where highcharts.js should be and see if you get the JavaScript or a 404.
If you can reach highcharts.js without issue then the problem is most likely in the setup code. Check and see if the appropriate variables are loaded onto the page (using the web developer tools for the browser you are testing in) and if there are any JavaScript errors showing up when the page is loaded.
Using lazy highcharts gem. Googled for an hour Nothing worked out for me.
Finally I've copied highcharts.js from Vendor directory and pasted it to assets.
Viola!
Related
I have a very frustrating issue with a Rails 7 app after migrating to Ruby 3.2 with Esbuild.
Basically there is a few specific images that simply will not load, however, there are many others that load just fine that live in the same location, and are accessed the exact same way. It's driving me nuts.
I have cleared cached, restarted servers, cleared all the local build files, everything I can think of. This is also happening in both dev and production.
My Esbuild is running just fine, it is finding the files and compiling them with a finger print. The files all exist and are in the right location. (all sitting under app/assets/builds)
Accessing the file direcly in the browser, ie
http://localhost:4000/assets/logo_white_trans-QEBURZJB.png
Fails with a 404, cannot find the image. This file however exists with the correct name in the app/assets/builds folder.
Accessing another image from the page ie
http://localhost:4000/assets/leadstory-symbol-B5T7OIJB.png
Loads just fine.
It's almost like there is a static list of rails routes that match the images and it is not generating the route for some of these specific images, hence the 404, even though the file exists.
Some screenshots that highlight the odd behaviour
and the files listed in the directory, showing the file clearly exists
My package.json build step is
esbuild app/javascript/bundles/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --minify --log-limit=0 --loader:.js=jsx --loader:.png=file --loader:.svg=file
And a snip from the app of how its being loaded.
import LogoWhiteTrans from "../../assets/images/logo_white_trans.png";
<img src={LogoWhiteTrans} className="logo" alt="logo" />
Which looks to be working fine, the HTML outputs
<img src="/assets/logo_white_trans-QEBURZJB.png" class="logo" alt="logo">
The image can be loaded fine, from elsewhere in the app in a regular rails view using asset helpers (not from within the React app)
ie <%= asset_path('logo_white_trans.png') %>
Something I have noticed is in the logs, I see
ActionController::RoutingError (No route matches [GET] "/logo_white_trans-QEBURZJB.png"):
Notice there it does not say "/assets/logo_white_trans..."? I thought that was weird, as the URL in the image tag clearly has a /assets at the start. Trying either path does not work, with or without /assets directly in the browser. Just seems odd rails would see it that way
Im going nuts here, what am I missing. Its not a png specific issue, as other pngs are loading fine in the same way, nor is it an image issue the file exists and the naming is fine.
Is there some sort of manifest thats not being updated? An internal asset route list or something along those lines?
Im running Rails 7
Ruby 3.2
ESBuild
This isn't really an answer, but what I have ended up doing is moving all image assets out of the asset pipeline and into the public folder. I noticed that my assets were being duplicated by esbuilt and the rails asset precompile process, and basically the javascript build and rails eco system just do not work well together.
For anyone else having issues like this, we've just moved all our static assets in the public/images folder and we refernce the path /images/blah.png the same way in both React and Ruby now.
All image tags in either React or standard .erb views are just <img src="/images/blah.png/>. Its a lot cleaner.
Yes, we have given up asset finger printing, but its a small loss, considering most images never change and It's dramatically simplified things and sped up our build process considerably as it does not have to touch each file during precompilation.
Our views now also just have standard tags, instead of <asset_path> tags, which im sure is just quicker in general instead of ruby generating these asset strings all the time.
So, not really and answer to the initial question but it is a solution, and one i think anyone who is fusing modern javascript, react, typescript etc into a Rails app.
I'm having trouble getting Rails Real Favicon to work in my application and I think the problem is the way I'm trying to display the favicon in the head of the app/views/layouts/angular.html.haml, app/views/layouts/application.html.haml, and app/views/layouts/devise.html.haml files. Right now all of them have the line:
= render '/application/favicon’
I understand that when using Rails Real Favicon /application/favicon isn't a partial (it's a folder filled with the different favicon images), so render wouldn't work. Please excuse me for my weak Haml, but I’m not sure how to include that folder in the head of those three haml files. Any suggestions?
UPDATE
This was an issue with Chrome. Favicon generates properly in Firefox and Safari, but for some reason not on Chrome when testing locally, not even after clearing my cache and cookies. Works on Chrome after pushed to staging and production. Thanks all for your help and suggestions.
1.- first go to this site if you need to generate favicon in many
dimensions: https://www.favicon-generator.org/
2.- second go to this site and convert html generated in first
step to haml http://htmltohaml.com/
3.- third create partial and call it in header of your layout file
I am sure that will work.
This is way beyond my knowledge..
I was migrating my rails 3 application from Bootstrap 2 to Bootstrap 3. I downloaded Bootstrap 3 and FontAwesome, put them into my assets folder. Then I tried to modify the font path. I change #FontAwesomePath in font-awesome/variables.less several times, however it still don't points to the correct path. (I put font files in ./app/assets/fonts/font-awesome/)
#FontAwesomePath: "fonts/font-awesome"
It's ok, cuz I saw the line below this one is a cdn path to font files:
//#FontAwesomePath: "//netdna.bootstrapcdn.com/font-awesome/3.2.1/font"; // for referencing Bootstrap CDN font files directly
I uncomment this line, everything seems fine. The compiled css file load the font from cdn and all icons are displaying.
Then I delete this line, try to point #FontAwesomePath back to local server again. STRANGE thing happened! No matter what I did, the compiled css file points it to the CDN path! I tried to clear browser cache, reboot rails server (I was using development mode of rails server), even to load the website from other computers, nothing changes. It insisting point #FontAwesomePath to the CDN path even no where in the whole application code exists the url! I can only image there is some kind of variable cache in less compiler. Can anybody tell me what's happened inside this? It's driven me crazy.
edit: I'm using less gem (v 2.3.2), which includes lesscss v 1.3.3.
I had issues with CSS updates, these where only solved by going to tmp > cache and deleting the assets folder then restarting the server. The CSS was then updated.
Hope this helps.
Steph
I have started development of simple rails application. After several hours work I have notices that somehow the deleted css is still applied to the web pages.
In order to fix the issue I executed the following actions several times:
stop/start server
use rails server
use torquebox server
delete browser cache
but nothing changes. It was very strange - the new css definitions were applied, but those that I have deleted were still there. So, I gave up and decided to create new project.
I have setup the new project (its scaffold is the same as the first one) and when I open one of the views, the styles from the old project were applied too. I have decided to look again into http://guides.rubyonrails.org/asset_pipeline.html and find out that setting
#Expands the lines which load the assets
config.assets.debug = false
solves the issue. But what is this option doing exactly? Why the old projects css were applied when this was true?
This option's effect is well described in this post, but I'll summarize it here as well. The value of changing config.assets.debug lies in a compromise between page load time in development and ease of debugging.
Basically:
config.assets.debug = true: assets are served individually, organized just as you see them in development. Preprocessed languages like SASS or CoffeeScript will still show up as their target languages (i.e., CSS and JS, respectively).
config.assets.debug = false: assets are bundled into files like application.css and application.js. Error stack traces will likely not have the correct line number any more and it is harder to map those back to your original code.
If you get to this web page, there is a possibility you are here because you are using the Rails Asset Pipeline and you made changes to one of the javascript files and reloaded the page and the change is not reflected when you search in the Sources tab in Chrome.
As stated above, config.assets.debug = false prompts the Sprockets gem to bundle all the individual javascript and css files into one application.js and application.css respectively. Also Sprockets runs the the SASS and CoffeeScript (if you did not use --skip-coffee) preprocessors on all associated files to generate css and javascript files that the browser can understand.
One important note is the following. Ruby Guides says this about debug = false:
Assets are cached on the first request after the server is started. If
any of the files in the manifest have changed between requests, the
server responds with a new compiled file.
This means if you do not change the css or javascript files between requests, then a cache will be used. As soon as you change a file, the cache is invalidated and a new cache is created for subsequent requests.
Consequently, if you made changes to a javascript file and the change is not reflected on page reload, it has nothing to do with this option config.assets.debug.
There is this other option called
config.action_controller.perform_caching.
But by default this option defaults to false in development. That is, by default, caching is only enabled in your production environment. And in current versions, Rails only ships with Fragment Caching by default. You have to install separate gems for Page and Action caching.
Fragment Caching allows a fragment of view logic to be wrapped in a cache block and served out of the cache store when the next request comes in. But then again, cache fragments will also be expired when the view fragment changes (e.g., the HTML in the view changes).
So the question remains why is the change of your javascript not reflected? The answer is Google Chrome, the browser itself, is caching the page despite your Rails settings. To remove the cache, close the current tab, open a new tab, and visit the site again.
I am quite new with Rails and I am having some irritating problems with caching of css files.
I have a .css.less file with imports inside it. It's the only stylesheet the app includes, so the other files get imported only once and by this unique stylesheet.
One of those imported .css.less stylesheets seems to be cached somewhere, because does not change in the browser when I change it's source.
I can only see the changes I made if I change something in the root stylesheet.
I have the server in development mode, so the caching should be off. I have also used <%= stylesheet_include_tag "style", :cache => false %>
I tried with Chrome and Firefox, with and without clearing their cache too. Always the same result, if I work only on that file the css the page receives when reloaded doesn't have the changes...
I also stopped the server and rm everything in the tmp folder of the app. No changes.
I am using Rails 3.1 with Ruby 1.9.3, with the less-bootstrap-rails gem. Both the root stylesheet and the imported one have .css.less extension.
What am I missing?
Thank you!
This is an area where I think the asset pipeline is broken, but I don't think there's a good fix.
If I remember correctly, to get changes in files you've included/required in your .css.less file, you need to change the .css.less file itself.
I had this on Rails 4.0.8, infuriating. The config changes mentioned above didn't help. Here's what seems to have fixed it for me:
Ensure NO FILES share a base name. For example, you have a reports.css.less and a reports.js.coffee? Doesn't matter if they're in the same directory or not. Rename or delete one of them. (I changed it to reports-styles.css.less).
Blow away your cache: rm -rf tmp/cache
Restart your Rails app.
This appears to be a decent fix but, since I don't know what's actually going on, this could be totally false and it's just working by coincidence now. Sorry this answer isn't more rigorous!
I've just came across the exact same problem.
I found that if you rename your *.css.less file (the one with the imports inside) to *.less, then this weird cacheing problem gets resolved.
Add this to your config/application.rb
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
See more at: Ruby on Rails Guide: Asset Pipeline