Skip to content
/ blehprint Public template

A minimal React Router + Cloudflare Workers template

License

Notifications You must be signed in to change notification settings

gielcobben/blehprint

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blehprint

A modern full-stack TypeScript monorepo template for building applications on Cloudflare's edge platform.

Auth, database, UI components, dark mode — all wired up and ready to deploy.

Use This Template

Prerequisites: Bun and a Cloudflare account

1. Clone and rename

bunx degit gielcobben/blehprint my-app
cd my-app
bun run rename my-app

degit downloads the template without git history, giving you a clean slate. The rename script updates all packages from @blehprint/* to @my-app/*.

2. Install dependencies

bun install

3. Configure authentication

cp workers/web/.dev.vars.example workers/web/.dev.vars
openssl rand -base64 32

Add the output to .dev.vars as BETTER_AUTH_SECRET.

4. Run migrations

bun run db:migrate:local

5. Start development

bun run dev:web

Open http://localhost:3000.

Tech Stack

Packages

Package Description Docs
@blehprint/auth BetterAuth authentication README
@blehprint/database Drizzle ORM + D1 database README
@blehprint/ui shadcn/ui component library README
workers/web Main web application README

Scripts

Command Description
bun run dev:web Start development server
bun run build:web Build for production
bun run deploy:web Build and deploy to Workers
bun run deploy:all Deploy everything
bun run db:generate Generate Drizzle migrations
bun run db:migrate:local Apply migrations locally
bun run db:migrate:remote Apply migrations to production
bun run db:studio Open Drizzle Studio
bun run typecheck Run TypeScript checks
bun run rename <name> Rename the project (one-time)

Quick Reference

Authentication

import { getSession, requireAuth } from "@blehprint/auth";
import { env } from "cloudflare:workers";

// Check if authenticated
const session = await getSession(request, env.DB, env.BETTER_AUTH_SECRET);

// Require authentication (redirects to /login)
const session = await requireAuth(request, env.DB, env.BETTER_AUTH_SECRET);

Full auth documentation

Database

import { database } from "@blehprint/database";
import { env } from "cloudflare:workers";

const db = database(env.DB);
const users = await db.query.user.findMany();

Full database documentation

UI Components

cd packages/ui && bunx shadcn@latest add button
import { Button } from "@blehprint/ui/components/button";

Full UI documentation

Icons

Icons are provided by Lucide. The package is available in both @blehprint/ui and workers/web so you can import icons directly where you need them without re-exporting through the UI package:

import { ArrowRight, Loader2, Menu } from "lucide-react";

<ArrowRight className="size-4" />

Browse all available icons at lucide.dev/icons. Only the icons you import are included in the bundle.

Theming

Dark/light mode powered by remix-themes.

Setup — The theme is configured in workers/web/app/root.tsx:

  • ThemeProvider wraps the app and syncs theme state
  • PreventFlashOnWrongTheme prevents flash of wrong theme on SSR
  • Theme class (dark/light) is applied to <html>
  • Theme action endpoint at /api/theme handles persistence

Usage — Toggle theme anywhere with the useTheme hook:

import { useTheme } from "remix-themes";

function ThemeToggle() {
  const [theme, setTheme] = useTheme();

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle theme
    </button>
  );
}

Configuration — Cookie settings are in workers/web/app/utils/theme.server.ts. Update the domain for production.

Deployment

1. Create the D1 database

bunx wrangler d1 create my-app-database

Copy the database_id into packages/database/wrangler.jsonc and workers/web/wrangler.jsonc.

2. Run remote migrations

bun run db:migrate:remote

3. Set production secrets

bunx wrangler secret put BETTER_AUTH_SECRET

4. Deploy

bun run deploy:web      # Deploy web worker
bun run deploy:all      # Deploy everything

Project Structure

blehprint/
├── packages/
│   ├── auth/           # @blehprint/auth
│   ├── database/       # @blehprint/database
│   └── ui/             # @blehprint/ui
├── workers/
│   └── web/            # Main application
└── .wrangler/state/    # Local D1 state (gitignored)

Author

Giel Cobben

License

This project is open source and available under the MIT License.

About

A minimal React Router + Cloudflare Workers template

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published