Assets Serving
Jets handles asset serving by uploading asset files to s3 and serving them directly from s3. This is particularly beneficial for binary assets like images as s3 is better suited for serving them.
Using the asset_path
helper will serve the assets in the public folder from the filesystem locally and from s3 remotely. By default, the public
folder is automatically uploaded to s3 as part of the jets deploy
command. Here are some notable folders within the public
folder.
Folder | Description | Checksum |
---|---|---|
public/packs | Where webpacker assets are compiled to. You defined js and css files in app/javascript/packs and webpacker will compile, add checksums to the file names and save them to public/packs . You can also create images in app/javascript/images and have webpacker add the checksum to the images files. |
Yes |
public/assets | Additional custom assets you might have. | No |
public/images | Public images. | No |
Example with asset_path
app/views/layouts/application.html:
<link rel="stylesheet" href="<%= asset_path("/assets/my-min-asset.css") %>">
When deployed to lambda, the file is served out of s3 and looks like this:
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/demo-dev-s3bucket-6nnjmcsxgjrx/jets/public/assets/my-min-asset.css">
Caching Considerations
Even though public/assets
and public/images
files are uploaded and served for convenience. There’s a cavaet with the approach. The files in the public/assets
and public/images
do not get sha checksum added to their paths. This makes it more difficult to cache the assets with longer TTLs. Even with short TTLs, some browsers and devices like iPhone seem to cache images indefinitely. Consider using webpacker for your assets so that sha checksum are include as part of the path. Note, webpacker has it’s own cavaets. See: Assets Serving: Webpack.
Configure Settings
You can override the setting and configure the folders with the Application Configuration.
Jets.application.configure do
# ...
# Default assets settings
config.assets.folders = %w[assets images packs]
config.assets.max_age = 3600 # max_age is a short way to set cache_control and expands to cache_control="public, max-age=3600"
# config.assets.cache_control = nil # IE: "public, max-age=3600" # override max_age for more fine-grain control.
# config.assets.base_url = nil # IE: https://cloudfront.com/my/base/path, defaults to the s3 bucket url
# IE: https://s3-us-west-2.amazonaws.com/demo-dev-s3bucket-1inlzkvujq8zb
end