45 lines
954 B
Markdown
45 lines
954 B
Markdown
# 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
|
|
|
|
```sh
|
|
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 `/`:
|
|
|
|
```html
|
|
<!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.
|