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.
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.
In my index.html.erb in the Public folder, I hold the landing page to my website. I don't yet have a true website, so there only needs to be a landing page.
This landing page has many images. The images are all stored in app/assets/images. When I run git push heroku, my assets get pre-compiled, and from that point on all of my images are in the public/assets folder following a imagename-hash.png format.
In my index.html.erb, the one I use as the landing page, I attempt to access these images through <img class="android-device" src=<%= asset_path("nexus_large.png")%> > and I expect asset_path to return to me nexus_large-hash.png. For some reason, it does not. When I go to the webpage, none of my images are loaded up. I get 404 errors when trying to retrieve the assets.
I have rails-12factor as a gem in my Gemfile. I don't understand what I'm doing wrong.
Through heroku run bash I confirmed that the assets were precompiled and placed into public/assets. Through helper.asset_path("nexus_large.png") in the Rails console, I confirmed that it should return /assets/nexus_large-hash.png
What am I doing wrong?
Edit: Upon further inspection, if I were to go to mywebsite.com/assets/nexus_large-hash.png I would see the appropriate image. So 100% precompilation is successful. It's linking to the images that is failing.
I figured it out. This comes down to wanting to over-optimize and not do things the simple way.
I didn't want to create another controller to house an empty action that would render my landing page. I felt that there was a better way. So, what I did was I used Rails mechanism to render the Public index.html when it is present and you're at the root. In a sense, it is a landing page. The problem is it doesn't react to Ruby. Even if you change it to index.html.erb, it simply won't respond to the changes you requested.
So, the solution is quite simply to use a controller action and have root to: 'controller#action' in your routes.rb. Then, all the helpers work perfectly.
I just figured out how to create custom error pages in the public folder using I18n. Those error pages have links that will return the user to a page in the application such as the home page.
When my application was running 3.2.13 I had the custom error pages in the app folder using config.exceptions_app = self.routes in application.rb. When I had that code all I had to do was use a link_to statement pointing to the route I wanted the user to return to. If I was in the development environment it would go to http://localhost:3000/somelink and in production it would go to http://myrailsapp.com/somelink. I replaced these with the ones in the public folder after rewriting them in Rails 4 because it appears that config.exceptions_app = self.routes is ignored in Rails 4.
My error pages in the public folder are html, not html.erb so there is no ruby/rails code. I would like to replicate what I had previously where I can check the environment in my error pages and point to localhost for development or my domain URL for production. I currently have code in my error page similar to this:
My Link Text
I'm definitely open to changing these to html.erb files. I initially thought about that but from my research and trying what I found nothing is working for Rails 4.
Any help would be appreciated.
You don't need any "autodetection" in html, just cut the domain part from the url and use a local path instead.
Just change http://myrailsapp.com/en/home to /en/home.
And yes, you do need the opening slash to be independent from the current_url in your link.
I have put all my images for my admin theme in the assets folder within a folder called admin. Then I link to it like normal ie.
# Ruby
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');
FYI. Just for testing I am not using the asset_path tag just yet as I have not compiled my assets.
Ok all good so far until I decided to update an image. I replaced some colors but on reload the new styled image is not showing. If I view the image directly in the browser its still showing the old image. Going one step further I destroyed the admin images folder. But it has broken nothing all the images are still being displayed. And yes I have cleared my cache and have tried on multiple browsers.
Is there some sort of image caching going on? This is just local development using pow to serve the pages.
Even destroying the whole images folder the images are still being served.
Am I missing something?
In 3.1 you just get rid of the 'images' part of the path. So an image that lives in /assets/images/example.png will actually be accessible in a get request at this url - /assets/example.png
Because the assets/images folder gets generated along with a new 3.1 app, this is the convention that they probably want you to follow. I think that's where image_tag will look for it, but I haven't tested that yet.
Also, during the RailsConf keynote, I remember D2h saying the the public folder should not have much in it anymore, mostly just error pages and a favicon.
You'll want to change the extension of your css file from .css.scss to .css.scss.erb and do:
background-image:url(<%=asset_path "admin/logo.png"%>);
You may need to do a "hard refresh" to see changes. CMD+SHIFT+R on OSX browsers.
In production, make sure
rm -rf public/assets
bundle exec rake assets:precompile RAILS_ENV=production
happens upon deployment.
For what it's worth, when I did this I found that no folder should be include in the path in the css file. For instance if I have app/assets/images/example.png, and I put this in my css file...
div.example { background: url('example.png'); }
... then somehow it magically works. I figured this out by running the rake assets:precompile task, which just sucks everything out of all your load paths and dumps it in a junk drawer folder: public/assets. That's ironic, IMO...
In any case this means you don't need to put any folder paths, everything in your assets folders will all end up living in one huge directory. How this system resolves file name conflicts is unclear, you may need to be careful about that.
Kind of frustrating there aren't better docs out there for this big of a change.
In rails 4 you can now use a css and sass helper image-url:
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your stylesheets.
when referencing images in CSS or in an IMG tag, use image-name.jpg
while the image is really located under ./assets/images/image-name.jpg
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
This railscast (Rails Tutorial video on asset pipeline) helps a lot to explain the paths in assets pipeline as well. I found it pretty useful, and actually watched it a few times.
The solution I chose is #Lee McAlilly's above, but this railscast helped me to understand why it works. Hope it helps!
The asset pipeline in rails offers a method for this exact thing.
You simply add image_path('image filename') to your css or scss file and rails takes care of everything. For example:
.logo{ background:url(image_path('admin/logo.png'));
(note that it works just like in a .erb view, and you don't use "/assets" or "/assets/images" in the path)
Rails also offers other helper methods, and there's another answer here: How do I use reference images in Sass when using Rails 3.1?