Preview guide · v0.5.1

Build a contact inbox

This path creates a server-rendered page, validated API route, middleware, and realtime next step. It requires approved registry access and Bun 1.3.x; this site was verified with Bun 1.3.14.

1. Create the project

bunx @wrnexus/cli@0.5.1 create my-app
cd my-app
bun install
bun run dev

2. Know the structure

app/pages/       # file-based .wrn routes
app/components/  # reusable .wrn components
app/api/         # TypeScript request handlers
app/middleware/  # ordered request middleware
app/schemas/     # shared validation
app/realtime/    # realtime rooms
wrnexus.config.ts

3. Add a page

page Contacts {
  view {
    <main><h1>Contact inbox</h1>
      <form data-schema="contact" action="/api/contacts" method="post">
        <input name="email" type="email" /><span data-error="email"></span>
        <textarea name="message"></textarea><span data-error="message"></span>
        <button type="submit">Send</button>
      </form>
    </main>
  }
}

4. Validate an API route

import schema from "../schemas/contact";
import { parseBody } from "@wrnexus/validation";
export const POST = async (ctx) => {
  const result = await parseBody(schema, ctx.req);
  return result.ok ? Response.json({ ok: true }, { status: 201 }) : result.response;
};

5. Load server data

Use an ssr API binding and a server {#each} block. See Server data for the complete verified pattern.

6. Add middleware

export default async function logger(ctx, next) {
  console.log(ctx.req.method, ctx.url.pathname);
  return next();
}

7. Test and ship

bun run test
bun run build
bun dist/server.js

Next: deployment, database, authentication, and workspaces.