# Host on Vercel

A Creo app built with [`creo-create-app`](#/create-app) is a standard Vite project, so Vercel deploys it with zero configuration. This recipe covers both variants:

- **Client-only** — static site, served from Vercel's edge.
- **With Hono server** — static frontend plus a serverless API function.

## Client-only (static)

### 1. Push the project to GitHub

```bash
git init
git add .
git commit -m "init"
git remote add origin git@github.com:you/my-app.git
git push -u origin main
```

### 2. Import it on Vercel

Go to [vercel.com/new](https://vercel.com/new), pick the repo, and accept the defaults. Vercel auto-detects Vite:

| Setting | Value |
|---|---|
| Framework preset | **Vite** |
| Build command | `vite build` (or `bun run build`) |
| Output directory | `dist` |
| Install command | `bun install` (or your preferred package manager) |

No `vercel.json` needed.

### 3. (Optional) pin it in a config file

If you want the settings committed to the repo, add a `vercel.json`:

```json
{
  "buildCommand": "bun run build",
  "outputDirectory": "dist",
  "installCommand": "bun install"
}
```

### Hash routes work out of the box

`creo-router` is hash-based (`/#/about`), so every request is served `index.html` — no rewrite rules needed. If you later move to path-based routing, add this to `vercel.json` so deep links resolve:

```json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
```

## With Hono server (API routes)

The Hono server generated by `creo-create-app` runs as a Vercel **Serverless Function**. You keep Vite for the frontend and expose the Hono app under `/api/*`.

### 1. Install the Vercel adapter

```bash
bun add @hono/node-server
```

### 2. Create `api/[[...route]].ts`

Vercel treats files in `/api` as serverless functions. The `[[...route]]` catch-all forwards everything to your Hono app:

```ts
// api/[[...route]].ts
import { handle } from "hono/vercel";
import app from "../src/server";

export const config = { runtime: "nodejs" };
export default handle(app);
```

Make sure `src/server.ts` exports the Hono `app` as its default export:

```ts
// src/server.ts
import { Hono } from "hono";

const app = new Hono();
app.get("/api/health", (c) => c.json({ ok: true }));

// Still runnable locally as a Bun server:
export default { port: 3000, fetch: app.fetch };
```

> **Tip.** Keep both exports — the `{ port, fetch }` default lets `bun run src/server.ts` keep working locally; Vercel uses the named `app` import.

### 3. Configure `vercel.json`

```json
{
  "buildCommand": "bun run build",
  "outputDirectory": "dist",
  "installCommand": "bun install",
  "rewrites": [
    { "source": "/api/:path*", "destination": "/api/[[...route]]" }
  ]
}
```

### 4. Deploy

```bash
bunx vercel
```

On push, Vercel builds the frontend with Vite and deploys `api/[[...route]].ts` as a function. The static site and the API share one domain — no CORS, no proxy config.

## Environment variables

Set them in **Project Settings → Environment Variables**. In your code, read them the same way as any Vite / Node app:

```ts
// Client (Vite inlines at build time):
const apiKey = import.meta.env.VITE_API_KEY;

// Server function:
const secret = process.env.SESSION_SECRET;
```

## Troubleshooting

- **404 on `/foo` after refresh** — you're on path-based routing without the SPA rewrite. Add the `rewrites` rule from the client-only section.
- **`Cannot find module 'hono/vercel'`** — install `@hono/node-server` (it ships the Vercel handler) and redeploy.
- **API routes hit `/api/[[...route]]` literally** — confirm the `rewrites` entry is present and that the filename uses **double square brackets**.