create-workerstack 0.1.0

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-workerstack",
+  "version": "0.1.0",
+  "description": "Scaffold a full-stack Cloudflare Workers app with Hono, React, MUI, Better Auth, and Drizzle",
+  "type": "module",
+  "bin": {
+    "create-workerstack": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "scripts": {
+    "build": "bun build src/index.ts --target node --outfile bin/index.js",
+    "prepublishOnly": "rm -rf template && cp -r ../template ./template && bun run build"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.9.3"
+  }
+}

package/template/.env.example

@@ -0,0 +1,6 @@
+DATABASE_URL=
+
+BETTER_AUTH_URL=
+BETTER_AUTH_SECRET=
+
+RESEND_API_KEY=

package/template/better-auth.config.ts

@@ -0,0 +1,23 @@
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { betterAuthOptions } from '@/lib/better-auth/options';
+import { initDB } from "@/database/db";
+
+import * as schema from "@/database/schema";
+
+const db = initDB(process.env.DATABASE_URL!)
+const env = process.env;
+
+
+/**
+ * Better Auth Instance
+ */
+export const auth = betterAuth({
+    ...betterAuthOptions(env as unknown as CloudflareBindings),
+    database: drizzleAdapter(db, {
+        provider: "pg",
+        schema,
+    }),
+    baseURL: env.BETTER_AUTH_URL!,
+    secret: env.BETTER_AUTH_SECRET!,
+  });

package/template/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+  schema: './src/database/schema.ts',
+  out: './src/database/migrations',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+});

package/template/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "{{projectName}}",
+  "description": "{{description}}",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "$npm_execpath run build && vite preview",
+    "deploy": "$npm_execpath run build && wrangler deploy",
+    "deploy:dev": "CLOUDFLARE_ENV=dev $npm_execpath run build && wrangler deploy",
+    "cf-typegen": "wrangler types --env-interface CloudflareBindings",
+    "typecheck:client": "tsc --noEmit -p src/client/tsconfig.json",
+    "typecheck:server": "tsc --noEmit",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "bunx drizzle-kit migrate",
+    "ba:schema": "bun x auth@latest generate --config better-auth.config.ts --output src/database/auth-schema.ts"
+  },
+  "dependencies": {
+    "@mui/material": "^7.3.9",
+    "better-auth": "^1.5.5",
+    "drizzle-orm": "^0.45.1",
+    "hono": "^4.12.8",
+    "postgres": "^3.4.8",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "resend": "^6.9.4"
+  },
+  "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.2.3",
+    "@types/bun": "^1.3.11",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "drizzle-kit": "^0.31.10",
+    "typescript": "^5.9.3",
+    "vite": "^8",
+    "vite-ssr-components": "^0.5.2",
+    "wrangler": "^4.17.0"
+  }
+}

package/template/public/.assetsignore

@@ -0,0 +1 @@
+.vite

package/template/src/api/index.ts

@@ -0,0 +1,22 @@
+import { Hono } from 'hono'
+import { auth, type AuthType } from '@/lib/better-auth'
+import { authMiddleware } from './middlewares/auth'
+
+
+const server = new Hono<{ Bindings: CloudflareBindings, Variables: AuthType }>()
+
+server.on(['POST', 'GET'], '/auth/*', (c) => {
+  return auth(c.var.db, c.env).handler(c.req.raw);
+})
+
+server.use('*', authMiddleware)
+
+server.get('/health', (c) => {
+  return c.json({ status: 'ok' })
+})
+
+server.all('/*', (c) => {
+  return c.json({ error: 'Not Found' }, 404)
+})
+
+export default server

package/template/src/api/middlewares/auth.ts

@@ -0,0 +1,15 @@
+import { createMiddleware } from 'hono/factory'
+import { auth, type AuthType } from '@/lib/better-auth'
+
+export const authMiddleware = createMiddleware<{ Bindings: CloudflareBindings, Variables: AuthType }>(async (c, next) => {
+  const authInstance = auth(c.var.db, c.env)
+
+  const session = await authInstance.api.getSession({
+    headers: c.req.raw.headers,
+  })
+
+  c.set('user', session?.user ?? null)
+  c.set('session', session?.session ?? null)
+
+  await next()
+})

package/template/src/client/App.tsx

@@ -0,0 +1,316 @@
+import {
+  ThemeProvider,
+  createTheme,
+  CssBaseline,
+  Container,
+  Typography,
+  Box,
+  Card,
+  CardContent,
+  Chip,
+  Stack,
+  Grid,
+} from '@mui/material';
+
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    background: { default: '#0A0A0F', paper: '#12121A' },
+    text: { primary: '#F1F5F9', secondary: '#94A3B8' },
+    primary: { main: '#7C3AED' },
+  },
+  typography: {
+    fontFamily: "'Plus Jakarta Sans', sans-serif",
+    h1: { fontFamily: "'Sora', sans-serif" },
+    h2: { fontFamily: "'Sora', sans-serif" },
+  },
+  shape: { borderRadius: 12 },
+});
+
+const stackItems = [
+  {
+    name: 'Cloudflare Workers',
+    description: 'Edge-first serverless runtime. Your code runs in 300+ locations worldwide.',
+    icon: '\u2601\uFE0F',
+    url: 'https://developers.cloudflare.com/workers/',
+  },
+  {
+    name: 'Hono',
+    description: 'Ultrafast web framework built for the edge. Handles routing, middleware, and more.',
+    icon: '\uD83D\uDD25',
+    url: 'https://hono.dev/',
+  },
+  {
+    name: 'React 19',
+    description: 'The library for building user interfaces. Server and client rendering ready.',
+    icon: '\u269B\uFE0F',
+    url: 'https://react.dev/',
+  },
+  {
+    name: 'MUI Material',
+    description: 'Production-grade React component library with a comprehensive design system.',
+    icon: '\uD83C\uDFA8',
+    url: 'https://mui.com/',
+  },
+  {
+    name: 'Better Auth',
+    description: 'Authentication for modern apps. Email/password, OAuth, sessions, and admin.',
+    icon: '\uD83D\uDD10',
+    url: 'https://www.better-auth.com/',
+  },
+  {
+    name: 'Drizzle ORM',
+    description: 'Type-safe SQL ORM with zero dependencies. Migrations and schema management built-in.',
+    icon: '\uD83D\uDDC4\uFE0F',
+    url: 'https://orm.drizzle.team/',
+  },
+];
+
+const quickStartSteps = [
+  { cmd: 'src/client/App.tsx', desc: 'Edit this file to start building your UI' },
+  { cmd: 'src/api/index.ts', desc: 'Add your API routes here' },
+  { cmd: 'bun run dev', desc: 'Start the development server' },
+  { cmd: 'bun run deploy', desc: 'Deploy to Cloudflare Workers' },
+];
+
+function App() {
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <Box
+        sx={{
+          minHeight: '100vh',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Background glow */}
+        <Box
+          sx={{
+            position: 'absolute',
+            top: '-20%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: '600px',
+            height: '600px',
+            borderRadius: '50%',
+            background: 'radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%)',
+            filter: 'blur(80px)',
+            pointerEvents: 'none',
+            animation: 'pulse 6s ease-in-out infinite',
+          }}
+        />
+
+        <Container maxWidth="md" sx={{ position: 'relative', py: 8 }}>
+          {/* Hero */}
+          <Box
+            sx={{
+              textAlign: 'center',
+              mb: 8,
+              animation: 'fadeInUp 0.8s ease-out',
+            }}
+          >
+            <Typography
+              variant="h1"
+              sx={{
+                fontSize: { xs: '2.5rem', md: '4rem' },
+                fontWeight: 800,
+                background: 'linear-gradient(135deg, #7C3AED 0%, #A78BFA 50%, #C4B5FD 100%)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                mb: 2,
+                letterSpacing: '-0.02em',
+              }}
+            >
+              WorkerStack
+            </Typography>
+            <Typography
+              variant="h5"
+              sx={{
+                color: 'text.secondary',
+                fontWeight: 400,
+                maxWidth: '500px',
+                mx: 'auto',
+                lineHeight: 1.6,
+              }}
+            >
+              Full-stack Cloudflare Workers starter with everything you need to ship fast.
+            </Typography>
+          </Box>
+
+          {/* Stack Grid */}
+          <Box sx={{ mb: 8 }}>
+            <Grid container spacing={2}>
+              {stackItems.map((item) => (
+                <Grid size={{ xs: 12, sm: 6 }} key={item.name}>
+                  <Card
+                    component="a"
+                    href={item.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    sx={{
+                      height: '100%',
+                      display: 'flex',
+                      bgcolor: 'background.paper',
+                      border: '1px solid',
+                      borderColor: 'rgba(124,58,237,0.15)',
+                      textDecoration: 'none',
+                      transition: 'all 0.2s ease',
+                      '&:hover': {
+                        borderColor: 'primary.main',
+                        transform: 'translateY(-2px)',
+                        boxShadow: '0 8px 30px rgba(124,58,237,0.15)',
+                      },
+                    }}
+                  >
+                    <CardContent sx={{ p: 3 }}>
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
+                        <Typography sx={{ fontSize: '1.5rem' }}>{item.icon}</Typography>
+                        <Typography variant="h6" sx={{ fontWeight: 700, color: 'text.primary' }}>
+                          {item.name}
+                        </Typography>
+                      </Box>
+                      <Typography variant="body2" sx={{ color: 'text.secondary', lineHeight: 1.6 }}>
+                        {item.description}
+                      </Typography>
+                    </CardContent>
+                  </Card>
+                </Grid>
+              ))}
+            </Grid>
+          </Box>
+
+          {/* Quick Start */}
+          <Box
+            sx={{
+              mb: 8,
+              animation: 'fadeInUp 0.8s ease-out 0.2s both',
+            }}
+          >
+            <Typography
+              variant="h5"
+              sx={{
+                fontWeight: 700,
+                mb: 3,
+                textAlign: 'center',
+                fontFamily: "'Sora', sans-serif",
+              }}
+            >
+              Get started
+            </Typography>
+            <Box
+              sx={{
+                bgcolor: '#0D0D14',
+                border: '1px solid rgba(124,58,237,0.2)',
+                borderRadius: 2,
+                overflow: 'hidden',
+              }}
+            >
+              {/* Terminal header */}
+              <Box
+                sx={{
+                  px: 2,
+                  py: 1.5,
+                  borderBottom: '1px solid rgba(255,255,255,0.06)',
+                  display: 'flex',
+                  gap: 1,
+                }}
+              >
+                <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#FF5F57' }} />
+                <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#FFBD2E' }} />
+                <Box sx={{ width: 12, height: 12, borderRadius: '50%', bgcolor: '#28C840' }} />
+              </Box>
+              {/* Terminal content */}
+              <Box sx={{ p: 3 }}>
+                {quickStartSteps.map((step, i) => (
+                  <Box key={i} sx={{ mb: i < quickStartSteps.length - 1 ? 2 : 0 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <Typography
+                        component="span"
+                        sx={{ color: '#7C3AED', fontFamily: 'monospace', fontWeight: 700 }}
+                      >
+                        {'\u276F'}
+                      </Typography>
+                      <Typography
+                        component="span"
+                        sx={{ color: '#C4B5FD', fontFamily: 'monospace', fontSize: '0.95rem' }}
+                      >
+                        {step.cmd}
+                      </Typography>
+                    </Box>
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        fontSize: '0.85rem',
+                        pl: 3,
+                        mt: 0.3,
+                      }}
+                    >
+                      {step.desc}
+                    </Typography>
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          </Box>
+
+          {/* Doc Links */}
+          <Box sx={{ textAlign: 'center', mb: 6 }}>
+            <Stack
+              direction="row"
+              spacing={1}
+              flexWrap="wrap"
+              justifyContent="center"
+              useFlexGap
+              sx={{ gap: 1 }}
+            >
+              {stackItems.map((item) => (
+                <Chip
+                  key={item.name}
+                  label={item.name}
+                  component="a"
+                  href={item.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  clickable
+                  sx={{
+                    bgcolor: 'rgba(124,58,237,0.1)',
+                    border: '1px solid rgba(124,58,237,0.2)',
+                    color: '#C4B5FD',
+                    fontWeight: 500,
+                    '&:hover': {
+                      bgcolor: 'rgba(124,58,237,0.2)',
+                    },
+                  }}
+                />
+              ))}
+            </Stack>
+          </Box>
+
+          {/* Footer */}
+          <Box sx={{ textAlign: 'center', pb: 4 }}>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              Built with{' '}
+              <Typography
+                component="span"
+                variant="body2"
+                sx={{
+                  background: 'linear-gradient(135deg, #7C3AED, #A78BFA)',
+                  backgroundClip: 'text',
+                  WebkitBackgroundClip: 'text',
+                  WebkitTextFillColor: 'transparent',
+                  fontWeight: 600,
+                }}
+              >
+                WorkerStack
+              </Typography>
+            </Typography>
+          </Box>
+        </Container>
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+export default App;

package/template/src/client/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/template/src/client/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "types": ["vite/client", "react", "react-dom", "@mui/material"],
+    "paths": {
+      "@/*": ["../*"],
+    }
+  },
+  "include": ["./**/*"]
+}

package/template/src/client.tsx

@@ -0,0 +1,36 @@
+import { jsxRenderer } from 'hono/jsx-renderer'
+import { Script, Link, ViteClient } from 'vite-ssr-components/hono'
+
+export const renderer = jsxRenderer(({ children }) => {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <ViteClient />
+        {!import.meta.env.PROD && (
+          <script type="module" dangerouslySetInnerHTML={{ __html: `
+import RefreshRuntime from '/@react-refresh'
+RefreshRuntime.injectIntoGlobalHook(window)
+window.$RefreshReg$ = () => {}
+window.$RefreshSig$ = () => (type) => type
+window.__vite_plugin_react_preamble_installed__ = true
+` }} />
+        )}
+        <Script src="/src/client/main.tsx" />
+        <Link href="/src/style.css" rel="stylesheet" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap"
+        />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <title>{'{{projectName}}'}</title>
+      </head>
+      <body>
+        {children}
+      </body>
+    </html>
+  )
+})

package/template/src/database/auth-schema.ts

@@ -0,0 +1,98 @@
+import { relations } from "drizzle-orm";
+import { pgTable, text, timestamp, boolean, index } from "drizzle-orm/pg-core";
+
+export const user = pgTable("user", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email").notNull().unique(),
+  emailVerified: boolean("email_verified").default(false).notNull(),
+  image: text("image"),
+  createdAt: timestamp("created_at").defaultNow().notNull(),
+  updatedAt: timestamp("updated_at")
+    .defaultNow()
+    .$onUpdate(() => /* @__PURE__ */ new Date())
+    .notNull(),
+  role: text("role"),
+  banned: boolean("banned").default(false),
+  banReason: text("ban_reason"),
+  banExpires: timestamp("ban_expires"),
+});
+
+export const session = pgTable(
+  "session",
+  {
+    id: text("id").primaryKey(),
+    expiresAt: timestamp("expires_at").notNull(),
+    token: text("token").notNull().unique(),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+    ipAddress: text("ip_address"),
+    userAgent: text("user_agent"),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    impersonatedBy: text("impersonated_by"),
+  },
+  (table) => [index("session_userId_idx").on(table.userId)],
+);
+
+export const account = pgTable(
+  "account",
+  {
+    id: text("id").primaryKey(),
+    accountId: text("account_id").notNull(),
+    providerId: text("provider_id").notNull(),
+    userId: text("user_id")
+      .notNull()
+      .references(() => user.id, { onDelete: "cascade" }),
+    accessToken: text("access_token"),
+    refreshToken: text("refresh_token"),
+    idToken: text("id_token"),
+    accessTokenExpiresAt: timestamp("access_token_expires_at"),
+    refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
+    scope: text("scope"),
+    password: text("password"),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+  },
+  (table) => [index("account_userId_idx").on(table.userId)],
+);
+
+export const verification = pgTable(
+  "verification",
+  {
+    id: text("id").primaryKey(),
+    identifier: text("identifier").notNull(),
+    value: text("value").notNull(),
+    expiresAt: timestamp("expires_at").notNull(),
+    createdAt: timestamp("created_at").defaultNow().notNull(),
+    updatedAt: timestamp("updated_at")
+      .defaultNow()
+      .$onUpdate(() => /* @__PURE__ */ new Date())
+      .notNull(),
+  },
+  (table) => [index("verification_identifier_idx").on(table.identifier)],
+);
+
+export const userRelations = relations(user, ({ many }) => ({
+  sessions: many(session),
+  accounts: many(account),
+}));
+
+export const sessionRelations = relations(session, ({ one }) => ({
+  user: one(user, {
+    fields: [session.userId],
+    references: [user.id],
+  }),
+}));
+
+export const accountRelations = relations(account, ({ one }) => ({
+  user: one(user, {
+    fields: [account.userId],
+    references: [user.id],
+  }),
+}));