Public (Static Assets)

Public folder → /_public/ route

Static assets like CSS, images, and scripts are a vital part of any web application. Enhance provides a convention for fingerprinting and serving assets from the root public directory via the convenient /_public/ route.

Adding files

Simply drop files in your Enhance project’s public folder. Assets can be organized with any sort of directory structure you’d like.

.
├── app/ ............... dynamic app features
└── public ............. static assets
    ├── blog-comment.mjs
    ├── docs.css
    └── img
        └── logo.png

Referencing files

Given the structure above, your application can include assets from the /_public/ route:

<script type="module">
  import BlogComment from '/_public/blog-comment.mjs'
  // ...
</script>

<link rel="stylesheet" href="/_public/docs.css">

<img src="/_public/img/logo.png" />

Automatic “fingerprinting”

Under the hood, Enhance will dynamically fingerprint each file based on its contents. As a developer, you don’t need to worry about creating hashed file names, keeping a reference to each file’s actual name on disk, etc. Enhance (via Architect) will create and track fingerprinted files for you.

Further, when your project code uses the /_public/ route to reference files, Enhance will help update references with the fingerprinted filename.

Caching & Cache-invalidation

The purpose of fingerprinting static files is to provide long cache times to clients (browser’s, CDNs, etc.) while still allowing for those assets to be replaced by newer versions. New file contents == new file name. This way clients know to keep their downloaded copy of a file and re-use it on subsequent requests. When the content of that file changes, the references to that file change, and the browser downloads and caches the new asset.

Configuration

Static asset fingerprinting can be controlled in your project’s .arc file:

@static
fingerprint true # or false

If the setting is not present, fingerprinting is disabled. However, all new Enhance projects created with npx "@enhance/cli@latest" new automatically get the above configuration.

Combining with @bundles

The /_public route does not provide any sort of concatenation or compilation of assets. However, it does play nicely with another Enhance feature: the @bundles pragma.

If the following is specified in your .arc file:

@bundles
todos '/components/index.mjs'

The bundled and fingerprinted asset will be available like

import { TodoList, TodoItem } from '/_public/bundles/todos.mjs'