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.
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 was developing this rails app that has mostly static pages. I downloaded a template from bootstrapicious and created a pages controller to hold all my static pages, changed the file names to have a .html.erb extension and the routes. Everything was working out fine in the index page; all images, css and js were working fine. But other pages aren't loading the animate js and images. I created a link of the home pages without using root_path and it behaved the same. I'm stranded and don't know what to do. Please help. quite a newbie in rails.
Stop the Rails server and try this command
rake assets:precompile
After this re-start your rails server!! Let me know if this what you wanted.
I've installed pdfkit and everything seems to be working fine. However, the PDF doesn't look quite like the page i'm trying to have rendered as a PDF. I've tried to make sure that the css files are being loaded properly but I'm not sure how to confirm that. I loaded them inline on the view and also tried specifying the pathname for the pdf object. FYI i'm using bootstrap.
However, all elements on the page are pretty much pulled all the way to the left of the page. I also tried adding %i.icon-user to test if that asset is loading on the pdf and it doesn't. but i'm not sure if that means the css isn't loading or not.
Lastly, I'm using fluid design (responsive) completely for the view, could that be causing the issue?
here's the controller for the view i'm loading:
def client_view
#invoice = Invoice.find_by_public_id(params[:public_id])
kit = PDFKit.new(render_to_string(:client_view, :layout => false))
kit.stylesheets << Rails.application.assets['application.css'].pathname
kit.to_file("#{#invoice.public_id}.pdf")
end
Finally got it to work. Turns out, PDFkit wasn't playing nicely with pre-compiled assets. Since I was just pointing PDFkit to the assets pipeline folder, it wasn't rendering the assets. So, I precompiled them (locally) and linked the PDFkit object to the locally rendered css file and everything looks great now (even with responsive design). However, I haven't pushed to heroku yet so I'm not sure how that's going to react.
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!
I'm learning to develop a web app using Rails on mac osx. I just added some css styling to my webpage. But every time I edit it and save it, and run rails s I cannot see the changes I made in the CSS on my webpage. I tried doing a hard refresh using COMMAND+SHIFT+R as well, but no luck. Any one know what's going on? I'm using firefox by the way.
Most likely, the css is being cached by the the web server. In your view, you need to add an autogenerated timestamp at the end of the css file name like so:
app.css?t=12044402444
or disable caching in your web server of choice.