Ignore

Please note that your browser is not supported.

We recommend upgrading to the latest Firefox or Google Chrome.

Frontend: Production Notes

Pakyow makes it easy to serve assets in a production environment, automatically applying best practices like fingerprinting, minification, and caching. In this guide we'll cover the key differences between serving assets in development and production environments.

Compiling assets during prelaunch

In a local development environment, Pakyow compiles and serves assets on demand. When an asset changes, the change is automatically included the next time the asset is requested. This is useful for development but isn't performant enough for a production environment.

When running in production the asset pipeline should be built before the project boots, with compiled assets served from the public directory. Builds can be initiated with the pakyow assets:precompile task.

Most projects will use the prelaunch pattern to perform all the tasks required before the project boots in production. For convenience, the precompile task is automatically added as a prelaunch command.

Fingerprinting assets

Assets are fingerprinted when built in production. Fingerprints allow assets to be cached by browsers indefinitely by attaching a fingerprint, or unique identifier based on the asset content, to the name of the asset. When the content of an asset changes the fingerprint changes along with it, causing the browser to replace the cached version with the updated asset.

Each fingerprint is a unique identifier generated from the contents of an asset's source files. Let's look at an example based on this stylesheet:

frontend/assets/stylesheets/example.css
p {
  color: red;
}

Here's the unique fingerprint that Pakyow will generate for the stylesheet:

3613c173b8f70052c8d86d555dfad0ea

This identifier is added to each asset reference in the view templates. Assume the stylesheet is loaded into a view template like this:

<link rel="stylesheet" type="text/css" href="/stylesheets/example.css">

In production, the asset href will be updated to include the fingerprint:

<link rel="stylesheet" type="text/css" href="/assets/stylesheets/example__3613c173b8f70052c8d86d555dfad0ea.css">

Pakyow will instruct the browser to cache the stylesheet so that it doesn't need to be fetched on subsequent requests. When the stylesheet changes it will receive a new fingerprint and the browser will download the updated version of the stylesheet.

Disable fingerprinting

To disable fingerprinting, just set the assets.fingerprint configuration option for the production environment:

config/application.rb
Pakyow.app do
  configure :production do
    config.assets.fingerprint = false
  end
end

Caching assets

When Pakyow fulfills a request for a fingerprinted asset, it responds with several cache headers that tell the browser how to cache the asset.

Here's a list of headers that are set:

Header Value
Age The number of seconds since the asset was modified.
Cache-Control public, max-age=31536000; tells the browser to cache the asset for one year.
Vary Accept-Encoding; read more about this header →
Last-Modified The date the asset was last modified.

These settings are appropriate for most applications.

Disable caching

Caching can be disabled by setting the assets.cache configuration option for the production environment:

config/application.rb
Pakyow.app do
  configure :production do
    config.assets.cache = false
  end
end

Minifying assets

Pakyow automatically minifies stylesheets and scripts in production. This can reduces the file sizes significantly, improving the performance of your application for end users.

Scripts are minified with Uglifier, while stylesheets are always minified with the Scss preprocessor (even if your stylesheets are written in plain css).

Disable minification

Minification can be disabled by setting the assets.minify configuration option for the production environment:

config/application.rb
Pakyow.app do
  configure :production do
    config.assets.minify = false
  end
end
Next Up: Asset Types