Quick Start

Build your first Bunbox application in 5 minutes

Create a Project

bun create bunbox my-blog
cd my-blog

Create a Home Page

The home page is already created at app/page.tsx. Let's update it:

// app/page.tsx
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to My Blog</h1>
      <p>A simple blog built with Bunbox</p>
    </div>
  );
}

Add a Blog Post Page

Create a dynamic route for blog posts:

// app/blog/[slug]/page.tsx
interface BlogPostProps {
  params: { slug: string };
}

export default function BlogPost({ params }: BlogPostProps) {
  return (
    <article>
      <h1>Blog Post: {params.slug}</h1>
      <p>This is the blog post content.</p>
    </article>
  );
}

Now you can visit /blog/hello-world or any other slug!

Create an API Route

Add an API endpoint to fetch posts:

// app/api/posts/route.ts
import { route } from "@ademattos/bunbox";

const posts = [
  { id: 1, title: "First Post", slug: "first-post" },
  { id: 2, title: "Second Post", slug: "second-post" },
];

export const listPosts = route.get().handle(async () => {
  return { posts };
});

The API is available at http://localhost:3000/api/posts and can be called via the type-safe client as api.posts.listPosts().

Add a Layout

Create a layout to wrap all pages:

// app/layout.tsx
import React from "react";
import type { PageMetadata } from "@ademattos/bunbox";

export const metadata: PageMetadata = {
  title: "My Blog",
  description: "A simple blog built with Bunbox",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <header>
        <nav>
          <a href="/">Home</a>
          <a href="/blog/first-post">Blog</a>
        </nav>
      </header>
      <main>{children}</main>
    </div>
  );
}

Start the Server

bun dev

Visit http://localhost:3000 to see your blog!

What's Next?

Learn more about Pages and Routing
Explore API Routes in depth
Add WebSocket support for real-time features