JavaScript & Assets
Assets require a Custom Domain Name to link properly when using API Gateway. For Function URLs, the work out of the box. Both API Gateway and Function URLs can benefit from a CloudFront CDN to cache /assets
and avoid hitting your backend function on each request.
Serving Static Assets
Our Quick Start cookiecutter project leverages Rails' built in ability to serve static assets. We do this by setting this environment variable in your Dockerfile
.
ENV RAILS_SERVE_STATIC_FILES=1
We also add this configuration to your config/environments/production.rb
file. In this case we are setting the cache control to 30 days, which you can change. The X-Lamby-Base64
header signals to the Lamby rack adapter that the content requires base64 binary encoding.
config.public_file_server.headers = {
'Cache-Control' => "public, max-age=#{30.days.seconds.to_i}",
'X-Lamby-Base64' => '1'
}
Adding CloudFront
CloudFront is an amazing CDN and is pretty easy to setup with Rails. Simply point CloudFront to your Rails app and allow the origin to set the cache headers. Because we set the public_file_server
headers above, everything should work out perfectly. Assuming you have setup a Custom Domain Name via CloudFront, here is how to setup an behavior for your /assets
path. From your CloudFront distribution
- Click the "Behaviors" tab
- Click "Create Behavior" button
- Path Pattern:
/assets/*
- Select your API Gateway or Function URL origin.
- Compress objects automatically: Yes
- Viewer protocol policy: Redirect HTTP to HTTPS
- Allowed HTTP Methods: GET, HEAD
- Restrict viewer access: No
- 🔘 Cache policy and origin request policy (recommended)
- Cache policy: CachingOptimized
- Origin request policy: None
JavaScript Ready
Our Quick Start cookiecutter project is ready to hit the ground running with all the latest Rails defaults for JavaScript & CSS development. We do this by adding Node.js to the development container which is also used to build your production image. See our How Lamby Works guide for details.
For example, we can add the TailwindCSS Rails gem, run the ./bin/rails tailwindcss:install
command, and edit the temporary starter index page like so. Once redeployed, we should see our Hello TailwindCSS page working correctly.
gem 'tailwindcss-rails'
<h1 class="
text-center
text-9xl
text-blue-400
mt-5
">Hello TailwindCSS</h1>