I am trying to figure out where my issue is for when I try to use aws cloudfront to render the rails assets. Not sure if there is a tool that will determine if my whole app is rails asset pipeline compliant (whether it meets its standards, etc). Any help would be appreciated, even helping me figure out how do I know for sure that my assets are coming from CloudFront and not from my app.
Here's a good tutorial to do that
https://ruby.awsblog.com/post/Tx3VS6Q2Q2K0LJR/Caching-the-Rails-Asset-Pipeline-with-Amazon-CloudFront
You can tell if serving your assets from cloudfront worked or not by viewing the page source of your production environment and see where are your css and js files served from, if it's working you'll find something like this
<link data-turbolinks-track="true" href="http://your-distribution-url.cloudfront.net/assets/application-bfe54945dee8eb9f51b20d52b93aa177.css" media="all" rel="stylesheet" />
Or if you configured a domain for your assets cdn.myapp.com for example you'll find that the assets are served from it
---------------- Update -----------------
Generally you want to organize your assets first before moving them on to a CDN, for the img tag it doesn't matter if you use image_tag or not what matters is the url of the image; if it's an asset image (that can be found in app/assets/images for example use the asset_url helper so that it is served through your asset pipeline (that doesn't apply to you application's images like user profile images).
Also in your CSS files when you use assets (background images for example) use the asset-url helper to get the image through asset pipeline.
Also it's a bad practice to add javascript into your views because you won't be able to server this javascript from your assets pipeline, try to have all your javascript in separate js or coffescript files and use the "Unobtrusive Javascript" practice (more about that in this answer What's the best way to embed a small chunk of javascript in Rails?).
Related
I use to host my CSS files in the rails asset pipeline and JS on webpacker. I recently realize my webpage has been loading slower and slower.
I ran Chrome lighthouse on my site and found that my CSS and JS assets are "render-blocking resources" and causing my page to load slower.
I've already tried moving all of my CSS and JS over to webpacker (semantic-ui css is still being imported by the rails asset pipeline, had lots of problems trying to make this work but couldnt still)
I notice on Chrome lighthouse that my load time improved marginally, I guess its from the minification of CSS and JS by webpacker but it's no where near the improvements I was looking for.
So my question here is, what is the most efficient method to serve CSS and JS files for rails app?
My app is hosted on Heroku's Hobby Tier.. could this be a factor as well?
Both approaches should allow you to achieve similar results. I don't know rails asset pipeline, but if it's used similarly to webpack it just changes your files on the build time & it's up to you how much code the user gets to download.
First of all, you can check the output size - in webpack, you can check the build standard output, or directly check the files it creates.
One trap you could be failing into with webpack is to have it set up wrongly. It could anything, from not minimizing code when for production build to having loades set up in a way that makes your images included directly inside js as data URL.
One advantage of using webpack, is that allows you to set up more complicated loading logic - for example lazy loading. Here something more about lazy load:
https://dev.to/marcinwosinek/lazy-load-library-in-application-build-with-webpack-5757
I have a problem with certain assets on heroku. (local environment is working fine)
The assets are in the pipeline. If I execute in the heroku rails console:
helper.asset_path("typicons.woff")
helper.asset_path("backgrounds/1.jpg")
I get the following response:
/assets/typicons-c2430aad2b6a33948dc064cfaee8ad65ff9e3ca439834f3aaa84abec3d10dea8.woff
/assets/backgrounds/1-c2098ff7e7fbb89b2d18e9cd9089f712f2b837265d1d2e4182c36c23392760c6.jpg
So I assume that the assets are in the heroku asset pipeline. As well by opening the url directly with the digest in it, I receive the file.
However if I try to reference the files in css or javascript like this:
$('.top-content').backstretch("/assets/backgrounds/1.jpg");
The file does not load. As well opening /assets/backgrounds/1.jpg directly does not work. Referencing assets from .rb or .erb files works.
Please can someone tell me, what kind of config I have to change, so the URLs for assets work as well without the digest?
Thank you!
Assuming you are using a fairly standard asset pipeline setup, this passage from the Rails Guides should help:
If you add an erb extension to a JavaScript asset, making it something such as application.js.erb, you can then use the asset_path helper in your JavaScript code:
-- http://guides.rubyonrails.org/asset_pipeline.html (section 2.3.3)
In your example, add the erb extension to your JS file and then change the line to
$('.top-content').backstretch(<%= asset_path("backgrounds/1.jpg") %>);
The problem is that Rails 4 does not support non-digested assets at all.(For whatever reason)
Here is a more thorough explanation on the issue: Non Digested Asset Names in Rails 4
My personal workaround was to add a public asset folder to my app:
public/assets/static/
and upload the assets required there. Since it was only about fonts and background images, which do not change often, it does not seem to be a problem. In the link above there are several other solutions proposed.
Why is it so forbidden to add line like <link href="/assets/stylesheets/bootstrap/bootstrap.css" rel="stylesheet"> in my application.html.erb file. How else do I insert it?
It's not "forbidden" outright - it just skirts a lot of important Rails conventions which will likely create problems & inconsistencies down the line
There are several elements to what you're asking. Here they are:
Layout
Firstly, you need to use the correct helpers in your layout:
#app/views/layout/application.html.erb
<%= stylesheet_link_tag "bootstrap/bootsrap" %>
The reason for this is the same as using helpers in other parts of your Rails application - as paths change between environments & certain "backend" functionalities of the system evolve, you can't rely on using vanilla HTML to call "Rails-centric" methods
A pro tip is that if there is any reference to a path, or an asset, you need to use the helpers which Rails provides
Asset Pipeline
Further to this, you need to appreciate how the "asset pipeline" works.
One of the big benefits of the Rails framework is that it gives you the ability to organize your assets in the most effective way - by keeping them in the /assets folder.
Whilst great for development, your problem will arise when you go into a production environment - Rails prefers to serve static assets in production, which means that the assets will be pre-compiled & access in the public folder:
In the production environment Sprockets uses the fingerprinting scheme
outlined above. By default Rails assumes assets have been precompiled
and will be served as static assets by your web server.
To make sure this works properly, you need to use the path helpers to load the files dynamically; hence allowing Rails to access the files wherever they are on the system
--
Manifest
I would strongly recommend you look into the "manifest" feature of the asset pipeline:
#app/assets/stylesheets/application.css
/*
*= require bootstrap/bootstrap
*/
I am wondering if it is just my lack of understanding. I have a action mailer that using a bunch of asset via the image_tag and config.action_mailer.asset_host in the config. As I am using the assets pipline for my javascripts (with the necessary config) -- and not images and css. ActionMailer views complains that I do not have them pre-compile, which is correct as I don't want to, for various reason. One of which my designer just don't want to embed tags in the css as they do not work with his adobe tools.
So is there a way to to switch off CSS and image processing form sprockets?
Thanks
Charlie
Even if you don't want precompiled assets on your mailing machine, could you transfer public/assets/manifest.yml to it? Otherwise the view helpers won't know where your image path will end up.
I'm using rails 3 in production and development.
How do I use the asset_host path in css, for example with background-images?
I've tried:
.blerg{ background-image:url({asset_host}/images/blerg.gif); }
But it just comes out as that in the rendered document, is there anything special you have to do when including the css to get this to work?
If you are using Rails 3.1 Asset Pipline you can use the following in sass/scss
.blerg{ background-image: image-url(blerg.gif); }
The added advantage of this approach is that in production the css image will also contain the MD5 fingerprinting so you can setup a far future expires header on your background images and still have them expire if you make changes to them.
If you are serving css files from asset host all relative linked images in your css file are served from the same host.
If you just do /assets/blerg.gif it should work fine.