Documentation

Everything you need to build with Oven

เอกสารการใช้งาน Oven Framework

01. Installation

Create a new Oven project with a single command:

# Using npx

npx create-oven my-app

# Or using bunx

bunx create-oven my-app

02. Quick Start

Get up and running in seconds:

# Create project
npx create-oven my-app

# Navigate to project
cd my-app

# Install dependencies
bun install

# Start development server
bun run dev

# Open http://localhost:3000

03. Project Structure

Oven uses a file-based routing system similar to Next.js:

my-app/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Home page (/)
│   ├── loading.tsx         # Loading UI
│   ├── error.tsx           # Error boundary
│   │
│   ├── about/
│   │   └── page.tsx        # /about
│   │
│   ├── blog/
│   │   ├── page.tsx        # /blog
│   │   └── [slug]/
│   │       └── page.tsx    # /blog/:slug
│   │
│   ├── api/
│   │   └── users/
│   │       └── route.ts    # /api/users
│   │
│   └── (dashboard)/        # Route group
│       └── dashboard/
│           └── page.tsx    # /dashboard
│
├── public/                 # Static files
└── oven.config.ts          # Configuration

File Conventions:

`page.tsx`	Page component for a route
`layout.tsx`	Shared wrapper for pages
`route.ts`	API endpoint handler
`loading.tsx`	Loading UI
`error.tsx`	Error boundary

04. Routing

Static Routes

app/about/page.tsx → /about

Dynamic Routes

app/blog/[slug]/page.tsx → /blog/:slug

Catch-All Routes

app/docs/[...path]/page.tsx → /docs/*

Route Groups

app/(dashboard)/settings/page.tsx → /settings

Parentheses are excluded from URL

05. Pages

Create pages by adding page.tsx files:

// app/page.tsx

import type { PageProps, Metadata } from './types';

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to my app',
};

export default function HomePage({ searchParams }: PageProps) {
  return `
    <div>
      <h1>Hello, Oven! 🔥</h1>
      <p>Build amazing apps with Bun</p>
    </div>
  `;
}

06. Layouts

Layouts wrap pages and persist across navigations:

// app/layout.tsx

import type { LayoutProps } from './types';

export default function RootLayout({ children }: LayoutProps) {
  return `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>My App</title>
      </head>
      <body>
        <nav>...</nav>
        <main>${children}</main>
        <footer>...</footer>
      </body>
    </html>
  `;
}

07. API Routes

Create RESTful APIs with route.ts files:

// app/api/users/route.ts

// GET /api/users
export async function GET(request: Request) {
  const users = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
  ];
  return Response.json(users);
}

// POST /api/users
export async function POST(request: Request) {
  const body = await request.json();
  return Response.json(body, { status: 201 });
}

// DELETE, PUT, PATCH also supported

08. Docker Deployment

Deploy with Docker in production:

# docker-compose.yml

version: '3.8'
services:
  oven:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production

docker-compose up -d

09. Vercel Deployment

Deploy to Vercel with one command:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

Demo: https://oven-drab.vercel.app

Ready to Build?

Start building with Oven today

📦 npm ⭐ GitHub ← Home