History

Chris Wanstrath f96acbd17e spa shell mode		2026-01-27 23:15:27 -08:00
..
src	spa shell mode	2026-01-27 23:15:27 -08:00
package.json	spa shell mode	2026-01-27 23:15:27 -08:00
README.md	spa shell mode	2026-01-27 23:15:27 -08:00
tsconfig.json	spa shell mode	2026-01-27 23:15:27 -08:00

README.md

SPA Shell Mode Example

This example demonstrates the SPA shell mode feature. When src/client/index.tsx (or .ts) exists, hype automatically serves a minimal HTML shell at / - no src/pages/index.tsx needed.

Structure

src/
  client/
    index.tsx   <- This triggers SPA shell mode!
  server/
    index.ts

Run

bun install
bun dev

Visit http://localhost:3000 to see the SPA in action.

How it works

When hype detects src/client/index.tsx or src/client/index.ts, it serves this HTML at /:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/client/index.js"></script>
  </body>
</html>

Your client code mounts to #app and takes over from there.