Part 7 · 1 chapters · ~11 min

Shipping the Frontend

Deploy infrastructure for web frontends: content-hashed immutable assets, atomic deploys and instant rollback by repointing, preview environments per pull request, version skew between old clients and new servers and how to handle it deliberately, and small stateless logic at the edge.

From build output to every browser

code

# cache headers per path
/assets/*        Cache-Control: public, max-age=31536000, immutable      # hashed names, never change
/index.html      Cache-Control: no-cache                                  # revalidate every time
/sw.js           Cache-Control: no-cache                                  # service worker updates promptly

code

// recover from version skew instead of showing a broken screen
window.addEventListener('vite:preloadError', () => {                  // a lazy chunk of the old build is gone
  if (!sessionStorage.getItem('reloaded-for-skew')) {
    sessionStorage.setItem('reloaded-for-skew', '1');
    location.reload();
  }
});

api.interceptors.request.use(cfg => ({ ...cfg, headers: { ...cfg.headers, 'X-Client-Version': BUILD_VERSION } }));
api.interceptors.response.use(undefined, err => {
  if (err.response?.status === 426) showUpdatePrompt();                // the BFF says: too old, please reload
  throw err;
});

decision	default
how long to keep old assets	at least the longest realistic session plus a margin (days; weeks if WebViews cache aggressively)
API compatibility window	as long as the oldest supported client version; enforce with a minimum-version check
deploy order for a breaking change	backend accepts both shapes → frontend switches → backend removes the old shape
rollback	repoint to the previous manifest; never rebuild to roll back

SHIPPING THE FRONTEND

immutable assets, atomic deploys, preview environments, version skew and the edge

swipe the figure sideways, or tap expand for full screen

1/6

immutable assets

Immutable, content-hashed assets: the build names every file by a hash of its contents (app.3f9a1c.js) and uploads it to object storage behind a CDN with a cache lifetime of a year and immutable. Only the HTML entry point (or a small manifest) is short-lived. A new deploy adds files; it never overwrites one.