Overview

Anything inside of /assets/publicare automatically hosted in your stage's public s3 bucket.

The "public" bucket is not actually public, but it sits behind cloudfront at cdn-<stage>.live.modelmatch.com or whatever stage we are talking about

Backend

There is a multiplexer watcher that watches for updates to these files and updates the exported method types that become available. You can use this to get the type safe url for assets.

import { asset } from "@mmv3/assets"

// will return `https://cdn-<stage>.live.modelmatch.com/some/file.jpg`
asset('/some/file.jpg')

This also happens during CI/CD.

It would be better, I think, to compile this at build time, but we don't have as much control, at this point, and to my knowledge, of the build of our lambdas and backend code in general.

Front end

For front end code there is a vite plugin to do this at build time, not run time.

// vite.config.ts
import assetPlugin from "@mmv3/vite"

...
plugins: [
  ...,
  assetPlugin(`https://${Resource.DomainMap.assets}/`)
]

This means that inside of your frontend code you can import assets directly from the public folder and it will resolve to the proper cdn url.

import moonGoat from "@mmv3/assets/public/moon-goat.png"


<img src={moonGoat} />

The value here, over just letting vite roll it up into the cdn that will host the site, is that we might have multiple versions of the same image hosted across many sites, and a central location for common static assets will become useful over time, I am sure.