add cloudflare workers support (#326)

.changeset/proud-seals-admire.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": minor
+---
+
+add cloudflare workers support for hono

apps/cli/src/constants.ts

@@ -105,6 +105,8 @@ export const dependencyVersionMap = {
 
 	"@tanstack/solid-query": "^5.75.0",
 	"@tanstack/solid-query-devtools": "^5.75.0",
+
+	wrangler: "^4.20.0",
 } as const;
 
 export type AvailableDependencies = keyof typeof dependencyVersionMap;

apps/cli/src/helpers/project-generation/env-setup.ts

@@ -200,7 +200,11 @@ export async function setupEnvironmentVariables(
 				databaseUrl = "mongodb://localhost:27017/mydatabase";
 				break;
 			case "sqlite":
+				if (config.runtime === "workers") {
+					databaseUrl = "http://127.0.0.1:8080";
+				} else {
 					databaseUrl = "file:./local.db";
+				}
 				break;
 		}
 	}
@@ -234,4 +238,11 @@ export async function setupEnvironmentVariables(
 	];
 
 	await addEnvVariablesToFile(envPath, serverVars);
+
+	if (config.runtime === "workers") {
+		const devVarsPath = path.join(serverDir, ".dev.vars");
+		try {
+			await fs.copy(envPath, devVarsPath);
+		} catch (_err) {}
+	}
 }

apps/cli/src/helpers/project-generation/post-installation.ts

@@ -93,7 +93,18 @@ export function displayPostInstallInstructions(
 		)}\n`;
 		output += `${pc.cyan(`${stepCounter++}.`)} ${runCmd} dev\n\n`;
 	} else {
-		output += `${pc.cyan(`${stepCounter++}.`)} ${runCmd} dev\n\n`;
+		if (runtime !== "workers") {
+			output += `${pc.cyan(`${stepCounter++}.`)} ${runCmd} dev\n`;
+		}
+
+		if (runtime === "workers") {
+			output += `${pc.cyan(`${stepCounter++}.`)} bun dev\n`;
+			output += `${pc.cyan(
+				`${stepCounter++}.`,
+			)} cd apps/server && bun run cf-typegen\n\n`;
+		} else {
+			output += "\n";
+		}
 	}
 
 	output += `${pc.bold("Your project will be available at:")}\n`;

apps/cli/src/helpers/project-generation/template-manager.ts

@@ -818,4 +818,17 @@ export async function handleExtras(
 			await processTemplate(npmrcTemplateSrc, npmrcDest, context);
 		}
 	}
+
+	if (context.runtime === "workers") {
+		const runtimeWorkersDir = path.join(PKG_ROOT, "templates/runtime/workers");
+		if (await fs.pathExists(runtimeWorkersDir)) {
+			await processAndCopyFiles(
+				"**/*",
+				runtimeWorkersDir,
+				projectDir,
+				context,
+				false,
+			);
+		}
+	}
 }

apps/cli/src/helpers/setup/runtime-setup.ts

@@ -20,6 +20,8 @@ export async function setupRuntime(config: ProjectConfig): Promise<void> {
 		await setupBunRuntime(serverDir, backend);
 	} else if (runtime === "node") {
 		await setupNodeRuntime(serverDir, backend);
+	} else if (runtime === "workers") {
+		await setupWorkersRuntime(serverDir);
 	}
 }
 
@@ -80,3 +82,26 @@ async function setupNodeRuntime(
 		});
 	}
 }
+
+async function setupWorkersRuntime(serverDir: string): Promise<void> {
+	const packageJsonPath = path.join(serverDir, "package.json");
+	if (!(await fs.pathExists(packageJsonPath))) return;
+
+	const packageJson = await fs.readJson(packageJsonPath);
+
+	packageJson.scripts = {
+		...packageJson.scripts,
+		dev: "wrangler dev --port=3000",
+		start: "wrangler dev",
+		deploy: "wrangler deploy",
+		build: "wrangler deploy --dry-run",
+		"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+	};
+
+	await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+
+	await addPackageDependency({
+		devDependencies: ["wrangler"],
+		projectDir: serverDir,
+	});
+}

apps/cli/src/prompts/config-prompts.ts

@@ -57,13 +57,14 @@ export async function gatherConfig(
 			runtime: ({ results }) =>
 				getRuntimeChoice(flags.runtime, results.backend),
 			database: ({ results }) =>
-				getDatabaseChoice(flags.database, results.backend),
+				getDatabaseChoice(flags.database, results.backend, results.runtime),
 			orm: ({ results }) =>
 				getORMChoice(
 					flags.orm,
 					results.database !== "none",
 					results.database,
 					results.backend,
+					results.runtime,
 				),
 			api: ({ results }) =>
 				getApiChoice(flags.api, results.frontend, results.backend),

apps/cli/src/prompts/database.ts

@@ -1,11 +1,12 @@
 import { cancel, isCancel, select } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
-import type { Backend, Database } from "../types";
+import type { Backend, Database, Runtime } from "../types";
 
 export async function getDatabaseChoice(
 	database?: Database,
 	backend?: Backend,
+	runtime?: Runtime,
 ): Promise<Database> {
 	if (backend === "convex" || backend === "none") {
 		return "none";
@@ -13,9 +14,11 @@ export async function getDatabaseChoice(
 
 	if (database !== undefined) return database;
 
-	const response = await select<Database>({
+	const databaseOptions: Array<{
-		message: "Select database",
+		value: Database;
-		options: [
+		label: string;
+		hint: string;
+	}> = [
 		{
 			value: "none",
 			label: "None",
@@ -36,12 +39,19 @@ export async function getDatabaseChoice(
 			label: "MySQL",
 			hint: "popular open-source relational database system",
 		},
-			{
+	];
+
+	if (runtime !== "workers") {
+		databaseOptions.push({
 			value: "mongodb",
 			label: "MongoDB",
 			hint: "open-source NoSQL database that stores data in JSON-like documents called BSON",
-			},
+		});
-		],
+	}
+
+	const response = await select<Database>({
+		message: "Select database",
+		options: databaseOptions,
 		initialValue: DEFAULT_CONFIG.database,
 	});
 

apps/cli/src/prompts/orm.ts

@@ -1,7 +1,7 @@
 import { cancel, isCancel, select } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
-import type { Backend, Database, ORM } from "../types";
+import type { Backend, Database, ORM, Runtime } from "../types";
 
 const ormOptions = {
 	prisma: {
@@ -26,6 +26,7 @@ export async function getORMChoice(
 	hasDatabase: boolean,
 	database?: Database,
 	backend?: Backend,
+	runtime?: Runtime,
 ): Promise<ORM> {
 	if (backend === "convex") {
 		return "none";
@@ -34,6 +35,10 @@ export async function getORMChoice(
 	if (!hasDatabase) return "none";
 	if (orm !== undefined) return orm;
 
+	if (runtime === "workers") {
+		return "drizzle";
+	}
+
 	const options = [
 		...(database === "mongodb"
 			? [ormOptions.prisma, ormOptions.mongoose]

apps/cli/src/prompts/runtime.ts

@@ -17,9 +17,11 @@ export async function getRuntimeChoice(
 		return "node";
 	}
 
-	const response = await select<Runtime>({
+	const runtimeOptions: Array<{
-		message: "Select runtime",
+		value: Runtime;
-		options: [
+		label: string;
+		hint: string;
+	}> = [
 		{
 			value: "bun",
 			label: "Bun",
@@ -30,7 +32,19 @@ export async function getRuntimeChoice(
 			label: "Node.js",
 			hint: "Traditional Node.js runtime",
 		},
-		],
+	];
+
+	if (backend === "hono") {
+		runtimeOptions.push({
+			value: "workers",
+			label: "Cloudflare Workers (beta)",
+			hint: "Edge runtime on Cloudflare's global network",
+		});
+	}
+
+	const response = await select<Runtime>({
+		message: "Select runtime",
+		options: runtimeOptions,
 		initialValue: DEFAULT_CONFIG.runtime,
 	});
 

apps/cli/src/types.ts

@@ -16,8 +16,10 @@ export const BackendSchema = z
 export type Backend = z.infer<typeof BackendSchema>;
 
 export const RuntimeSchema = z
-	.enum(["bun", "node", "none"])
+	.enum(["bun", "node", "workers", "none"])
-	.describe("Runtime environment");
+	.describe(
+		"Runtime environment (workers only available with hono backend and drizzle orm)",
+	);
 export type Runtime = z.infer<typeof RuntimeSchema>;
 
 export const FrontendSchema = z

apps/cli/src/utils/template-processor.ts

@@ -28,9 +28,9 @@ export async function processTemplate(
 	}
 }
 
-handlebars.registerHelper("or", (a, b) => a || b);
-
 handlebars.registerHelper("eq", (a, b) => a === b);
+handlebars.registerHelper("and", (a, b) => a && b);
+handlebars.registerHelper("or", (a, b) => a || b);
 
 handlebars.registerHelper(
 	"includes",

apps/cli/src/validation.ts

@@ -358,6 +358,78 @@ export function processAndValidateFlags(
 		process.exit(1);
 	}
 
+	if (
+		providedFlags.has("runtime") &&
+		options.runtime === "workers" &&
+		config.backend &&
+		config.backend !== "hono"
+	) {
+		consola.fatal(
+			`Cloudflare Workers runtime (--runtime workers) is only supported with Hono backend (--backend hono). Current backend: ${config.backend}. Please use '--backend hono' or choose a different runtime.`,
+		);
+		process.exit(1);
+	}
+
+	if (
+		providedFlags.has("backend") &&
+		config.backend &&
+		config.backend !== "hono" &&
+		config.runtime === "workers"
+	) {
+		consola.fatal(
+			`Backend '${config.backend}' is not compatible with Cloudflare Workers runtime. Cloudflare Workers runtime is only supported with Hono backend. Please use '--backend hono' or choose a different runtime.`,
+		);
+		process.exit(1);
+	}
+
+	if (
+		providedFlags.has("runtime") &&
+		options.runtime === "workers" &&
+		config.orm &&
+		config.orm !== "drizzle" &&
+		config.orm !== "none"
+	) {
+		consola.fatal(
+			`Cloudflare Workers runtime (--runtime workers) is only supported with Drizzle ORM (--orm drizzle) or no ORM (--orm none). Current ORM: ${config.orm}. Please use '--orm drizzle', '--orm none', or choose a different runtime.`,
+		);
+		process.exit(1);
+	}
+
+	if (
+		providedFlags.has("orm") &&
+		config.orm &&
+		config.orm !== "drizzle" &&
+		config.orm !== "none" &&
+		config.runtime === "workers"
+	) {
+		consola.fatal(
+			`ORM '${config.orm}' is not compatible with Cloudflare Workers runtime. Cloudflare Workers runtime is only supported with Drizzle ORM or no ORM. Please use '--orm drizzle', '--orm none', or choose a different runtime.`,
+		);
+		process.exit(1);
+	}
+
+	if (
+		providedFlags.has("runtime") &&
+		options.runtime === "workers" &&
+		config.database === "mongodb"
+	) {
+		consola.fatal(
+			"Cloudflare Workers runtime (--runtime workers) is not compatible with MongoDB database. MongoDB requires Prisma or Mongoose ORM, but Workers runtime only supports Drizzle ORM. Please use a different database or runtime.",
+		);
+		process.exit(1);
+	}
+
+	if (
+		providedFlags.has("database") &&
+		config.database === "mongodb" &&
+		config.runtime === "workers"
+	) {
+		consola.fatal(
+			"MongoDB database is not compatible with Cloudflare Workers runtime. MongoDB requires Prisma or Mongoose ORM, but Workers runtime only supports Drizzle ORM. Please use a different database or runtime.",
+		);
+		process.exit(1);
+	}
+
 	return config;
 }
 
@@ -368,6 +440,33 @@ export function validateConfigCompatibility(
 	const effectiveBackend = config.backend;
 	const effectiveFrontend = config.frontend;
 	const effectiveApi = config.api;
+	const effectiveRuntime = config.runtime;
+
+	if (effectiveRuntime === "workers" && effectiveBackend !== "hono") {
+		consola.fatal(
+			`Cloudflare Workers runtime is only supported with Hono backend. Current backend: ${effectiveBackend}. Please use a different runtime or change to Hono backend.`,
+		);
+		process.exit(1);
+	}
+
+	const effectiveOrm = config.orm;
+	if (
+		effectiveRuntime === "workers" &&
+		effectiveOrm !== "drizzle" &&
+		effectiveOrm !== "none"
+	) {
+		consola.fatal(
+			`Cloudflare Workers runtime is only supported with Drizzle ORM or no ORM. Current ORM: ${effectiveOrm}. Please use a different runtime or change to Drizzle ORM or no ORM.`,
+		);
+		process.exit(1);
+	}
+
+	if (effectiveRuntime === "workers" && effectiveDatabase === "mongodb") {
+		consola.fatal(
+			"Cloudflare Workers runtime is not compatible with MongoDB database. MongoDB requires Prisma or Mongoose ORM, but Workers runtime only supports Drizzle ORM. Please use a different database or runtime.",
+		);
+		process.exit(1);
+	}
 
 	const includesNuxt = effectiveFrontend?.includes("nuxt");
 	const includesSvelte = effectiveFrontend?.includes("svelte");

apps/cli/templates/auth/server/base/src/lib/auth.ts.hbs

@@ -14,21 +14,22 @@ export const auth = betterAuth({
     {{#if (eq database "mongodb")}}provider: "mongodb"{{/if}}
   }),
   trustedOrigins: [
-    process.env.CORS_ORIGIN || "",{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    process.env.CORS_ORIGIN || "",
-    "my-better-t-app://",{{/if}}
+    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    "my-better-t-app://",
+    {{/if}}
   ],
   emailAndPassword: {
     enabled: true,
   }
-
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
-  ,
+  , plugins: [expo()]
-  plugins: [expo()]
   {{/if}}
 });
 {{/if}}
 
 {{#if (eq orm "drizzle")}}
+{{#if (or (eq runtime "bun") (eq runtime "node"))}}
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
@@ -45,20 +46,52 @@ export const auth = betterAuth({
     schema: schema,
   }),
   trustedOrigins: [
-    process.env.CORS_ORIGIN || "",{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    process.env.CORS_ORIGIN || "",
-    "my-better-t-app://",{{/if}}
+    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    "my-better-t-app://",
+    {{/if}}
   ],
   emailAndPassword: {
     enabled: true,
-  }
+  },
-
+  secret: process.env.BETTER_AUTH_SECRET,
+  baseURL: process.env.BETTER_AUTH_URL,
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
-  ,
+  plugins: [expo()],
-  plugins: [expo()]
   {{/if}}
 });
 {{/if}}
 
+{{#if (eq runtime "workers")}}
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+import { expo } from "@better-auth/expo";
+{{/if}}
+import { db } from "@/db";
+import * as schema from "../db/schema/auth";
+import { env } from "cloudflare:workers";
+
+export const auth = betterAuth({
+   database: drizzleAdapter(db, {
+    {{#if (eq database "postgres")}}provider: "pg",{{/if}}
+    {{#if (eq database "sqlite")}}provider: "sqlite",{{/if}}
+    {{#if (eq database "mysql")}}provider: "mysql",{{/if}}
+    schema: schema,
+  }),
+  trustedOrigins: [env.CORS_ORIGIN],
+  emailAndPassword: {
+    enabled: true,
+  },
+  secret: env.BETTER_AUTH_SECRET,
+  baseURL: env.BETTER_AUTH_URL,
+  {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+  plugins: [expo()],
+  {{/if}}
+});
+{{/if}}
+{{/if}}
+
 {{#if (eq orm "mongoose")}}
 import { betterAuth } from "better-auth";
 import { mongodbAdapter } from "better-auth/adapters/mongodb";
@@ -70,16 +103,16 @@ import { client } from "../db";
 export const auth = betterAuth({
   database: mongodbAdapter(client),
   trustedOrigins: [
-    process.env.CORS_ORIGIN || "",{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    process.env.CORS_ORIGIN || "",
-    "my-better-t-app://",{{/if}}
+    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    "my-better-t-app://",
+    {{/if}}
   ],
   emailAndPassword: {
     enabled: true,
   }
-
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
-  ,
+  , plugins: [expo()]
-  plugins: [expo()]
   {{/if}}
 });
 {{/if}}
@@ -93,16 +126,16 @@ import { expo } from "@better-auth/expo";
 export const auth = betterAuth({
   database: "", // Invalid configuration
   trustedOrigins: [
-    process.env.CORS_ORIGIN || "",{{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    process.env.CORS_ORIGIN || "",
-    "my-better-t-app://",{{/if}}
+    {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
+    "my-better-t-app://",
+    {{/if}}
   ],
   emailAndPassword: {
     enabled: true,
   }
-
   {{#if (or (includes frontend "native-nativewind") (includes frontend "native-unistyles"))}}
-  ,
+  , plugins: [expo()]
-  plugins: [expo()]
   {{/if}}
 });
 {{/if}}

apps/cli/templates/backend/server/hono/src/index.ts.hbs

@@ -1,4 +1,9 @@
+{{#if (or (eq runtime "bun") (eq runtime "node"))}}
 import "dotenv/config";
+{{/if}}
+{{#if (eq runtime "workers")}}
+import { env } from "cloudflare:workers";
+{{/if}}
 {{#if (eq api "orpc")}}
 import { RPCHandler } from "@orpc/server/fetch";
 import { createContext } from "./lib/context";
@@ -15,26 +20,33 @@ import { auth } from "./lib/auth";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
 import { logger } from "hono/logger";
-{{#if (includes examples "ai")}}
+{{#if (and (includes examples "ai") (or (eq runtime "bun") (eq runtime "node")))}}
 import { streamText } from "ai";
 import { google } from "@ai-sdk/google";
 import { stream } from "hono/streaming";
 {{/if}}
+{{#if (and (includes examples "ai") (eq runtime "workers"))}}
+import { streamText } from "ai";
+import { stream } from "hono/streaming";
+import { createGoogleGenerativeAI } from "@ai-sdk/google";
+{{/if}}
 
 const app = new Hono();
 
 app.use(logger());
-app.use(
+app.use("/*", cors({
-  "/*",
+  {{#if (or (eq runtime "bun") (eq runtime "node"))}}
-  cors({
   origin: process.env.CORS_ORIGIN || "",
+  {{/if}}
+  {{#if (eq runtime "workers")}}
+  origin: env.CORS_ORIGIN || "",
+  {{/if}}
   allowMethods: ["GET", "POST", "OPTIONS"],
   {{#if auth}}
   allowHeaders: ["Content-Type", "Authorization"],
   credentials: true,
   {{/if}}
-  })
+}));
-);
 
 {{#if auth}}
 app.on(["POST", "GET"], "/api/auth/**", (c) => auth.handler(c.req.raw));
@@ -48,6 +60,7 @@ app.use("/rpc/*", async (c, next) => {
     prefix: "/rpc",
     context: context,
   });
+
   if (matched) {
     return c.newResponse(response.body, response);
   }
@@ -64,11 +77,10 @@ app.use("/trpc/*", trpcServer({
 }));
 {{/if}}
 
-{{#if (includes examples "ai")}}
+{{#if (and (includes examples "ai") (or (eq runtime "bun") (eq runtime "node")))}}
 app.post("/ai", async (c) => {
   const body = await c.req.json();
   const messages = body.messages || [];
-
   const result = streamText({
     model: google("gemini-1.5-flash"),
     messages,
@@ -76,7 +88,24 @@ app.post("/ai", async (c) => {
 
   c.header("X-Vercel-AI-Data-Stream", "v1");
   c.header("Content-Type", "text/plain; charset=utf-8");
+  return stream(c, (stream) => stream.pipe(result.toDataStream()));
+});
+{{/if}}
 
+{{#if (and (includes examples "ai") (eq runtime "workers"))}}
+app.post("/ai", async (c) => {
+  const body = await c.req.json();
+  const messages = body.messages || [];
+  const google = createGoogleGenerativeAI({
+    apiKey: env.GOOGLE_GENERATIVE_AI_API_KEY,
+  });
+  const result = streamText({
+    model: google("gemini-1.5-flash"),
+    messages,
+  });
+
+  c.header("X-Vercel-AI-Data-Stream", "v1");
+  c.header("Content-Type", "text/plain; charset=utf-8");
   return stream(c, (stream) => stream.pipe(result.toDataStream()));
 });
 {{/if}}
@@ -95,5 +124,10 @@ serve({
   console.log(`Server is running on http://localhost:${info.port}`);
 });
 {{else}}
+  {{#if (eq runtime "bun")}}
 export default app;
   {{/if}}
+  {{#if (eq runtime "workers")}}
+export default app;
+  {{/if}}
+{{/if}}

apps/cli/templates/backend/server/server-base/tsconfig.json.hbs

@@ -9,24 +9,28 @@
     "baseUrl": "./",
     "paths": {
       "@/*": ["./src/*"]
-			{{#if (eq orm 'prisma')}},
+      {{#if (eq orm "prisma")}},
       "prisma": ["node_modules/prisma"]
       {{/if}}
     },
     "outDir": "./dist",
     "types": [
-      {{#if (eq runtime 'node')}}
+      {{#if (eq runtime "node")}}
       "node"
-      {{else if (eq runtime 'bun')}}
+      {{else if (eq runtime "bun")}}
       "bun"
+      {{else if (eq runtime "workers")}}
+      "./worker-configuration",
+      "node"
       {{else}}
-        "node", "bun"
+      "node",
+      "bun"
       {{/if}}
     ],
     {{#unless (or (eq backend "convex") (eq backend "none"))}}
     "composite": true,
     {{/unless}}
-		"jsx": "react-jsx"{{#if (eq backend 'hono')}},
+    "jsx": "react-jsx"{{#if (eq backend "hono")}},
     "jsxImportSource": "hono/jsx"{{/if}}
   },
   "tsc-alias": {

apps/cli/templates/db/drizzle/mysql/src/db/index.ts

@@ -1,3 +0,0 @@
-import { drizzle } from "drizzle-orm/mysql2";
-
-export const db = drizzle({ connection: { uri: process.env.DATABASE_URL } });

apps/cli/templates/db/drizzle/mysql/src/db/index.ts.hbs

@@ -0,0 +1,20 @@
+{{#if (or (eq runtime "bun") (eq runtime "node"))}}
+import { drizzle } from "drizzle-orm/mysql2";
+
+export const db = drizzle({
+  connection: {
+    uri: process.env.DATABASE_URL,
+  },
+});
+{{/if}}
+
+{{#if (eq runtime "workers")}}
+import { drizzle } from "drizzle-orm/mysql2";
+import { env } from "cloudflare:workers";
+
+export const db = drizzle({
+  connection: {
+    uri: env.DATABASE_URL,
+  },
+});
+{{/if}}

apps/cli/templates/db/drizzle/postgres/src/db/index.ts

@@ -1,3 +0,0 @@
-import { drizzle } from "drizzle-orm/node-postgres";
-
-export const db = drizzle(process.env.DATABASE_URL || "");

apps/cli/templates/db/drizzle/postgres/src/db/index.ts.hbs

@@ -0,0 +1,12 @@
+{{#if (or (eq runtime "bun") (eq runtime "node"))}}
+import { drizzle } from "drizzle-orm/node-postgres";
+
+export const db = drizzle(process.env.DATABASE_URL || "");
+{{/if}}
+
+{{#if (eq runtime "workers")}}
+import { drizzle } from "drizzle-orm/node-postgres";
+import { env } from "cloudflare:workers";
+
+export const db = drizzle(env.DATABASE_URL || "");
+{{/if}}

apps/cli/templates/db/drizzle/sqlite/drizzle.config.ts.hbs

@@ -6,6 +6,8 @@ export default defineConfig({
   dialect: "turso",
   dbCredentials: {
     url: process.env.DATABASE_URL || "",
+    {{#if (eq dbSetup "turso")}}
     authToken: process.env.DATABASE_AUTH_TOKEN,
+    {{/if}}
   },
 });

apps/cli/templates/db/drizzle/sqlite/src/db/index.ts

@@ -1,9 +0,0 @@
-import { drizzle } from "drizzle-orm/libsql";
-import { createClient } from "@libsql/client";
-
-const client = createClient({
-  url: process.env.DATABASE_URL || "",
-  authToken: process.env.DATABASE_AUTH_TOKEN ,
-});
-
-export const db = drizzle({ client });

apps/cli/templates/db/drizzle/sqlite/src/db/index.ts.hbs

@@ -0,0 +1,28 @@
+{{#if (or (eq runtime "bun") (eq runtime "node"))}}
+import { drizzle } from "drizzle-orm/libsql";
+import { createClient } from "@libsql/client";
+
+const client = createClient({
+  url: process.env.DATABASE_URL || "",
+  {{#if (eq dbSetup "turso")}}
+  authToken: process.env.DATABASE_AUTH_TOKEN,
+  {{/if}}
+});
+
+export const db = drizzle({ client });
+{{/if}}
+
+{{#if (eq runtime "workers")}}
+import { drizzle } from "drizzle-orm/libsql";
+import { env } from "cloudflare:workers";
+import { createClient } from "@libsql/client";
+
+const client = createClient({
+  url: env.DATABASE_URL || "",
+  {{#if (eq dbSetup "turso")}}
+  authToken: env.DATABASE_AUTH_TOKEN,
+  {{/if}}
+});
+
+export const db = drizzle({ client });
+{{/if}}

apps/cli/templates/db/prisma/postgres/prisma.config.ts.hbs

@@ -1,4 +1,8 @@
+{{#if (eq dbSetup "prisma-postgres")}}
 // import "dotenv/config"; uncomment this to load .env
+{{else}}
+import "dotenv/config";
+{{/if}}
 import path from "node:path";
 import type { PrismaConfig } from "prisma";
 

apps/cli/templates/runtime/workers/apps/server/wrangler.toml.hbs

@@ -0,0 +1,18 @@
+name = "{{projectName}}-server"
+main = "src/index.ts"
+compatibility_date = "2025-06-15"
+compatibility_flags = ["nodejs_compat"]
+
+[vars]
+NODE_ENV = "production"
+
+# Non-sensitive environment variables (visible in dashboard)
+# CORS_ORIGIN = "https://your-frontend-domain.com"
+# BETTER_AUTH_URL = "https://your-worker-domain.workers.dev"
+
+# ⚠️  SENSITIVE DATA: Use `wrangler secret put` instead of adding here
+# Don't put these in [vars] - they'll be visible in the dashboard!
+# - DATABASE_URL
+# - DATABASE_AUTH_TOKEN
+# - GOOGLE_GENERATIVE_AI_API_KEY
+# - BETTER_AUTH_SECRET

apps/web/public/icon/workers.svg

@@ -0,0 +1,2 @@
+
+<svg viewBox="0 0 256 231" xmlns="http://www.w3.org/2000/svg" width="256" height="231" preserveAspectRatio="xMidYMid"><defs><linearGradient id="a" x1="50%" x2="25.7%" y1="100%" y2="8.7%"><stop offset="0%" stop-color="#EB6F07"/><stop offset="100%" stop-color="#FAB743"/></linearGradient><linearGradient id="b" x1="81%" x2="40.5%" y1="83.7%" y2="29.5%"><stop offset="0%" stop-color="#D96504"/><stop offset="100%" stop-color="#D96504" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="42%" x2="84%" y1="8.7%" y2="79.9%"><stop offset="0%" stop-color="#EB6F07"/><stop offset="100%" stop-color="#EB720A" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="50%" x2="25.7%" y1="100%" y2="8.7%"><stop offset="0%" stop-color="#EE6F05"/><stop offset="100%" stop-color="#FAB743"/></linearGradient><linearGradient id="e" x1="-33.2%" x2="91.7%" y1="100%" y2="0%"><stop offset="0%" stop-color="#D96504" stop-opacity=".8"/><stop offset="49.8%" stop-color="#D96504" stop-opacity=".2"/><stop offset="100%" stop-color="#D96504" stop-opacity="0"/></linearGradient><linearGradient id="f" x1="50%" x2="25.7%" y1="100%" y2="8.7%"><stop offset="0%" stop-color="#FFA95F"/><stop offset="100%" stop-color="#FFEBC8"/></linearGradient><linearGradient id="g" x1="8.1%" x2="96.5%" y1="1.1%" y2="48.8%"><stop offset="0%" stop-color="#FFF" stop-opacity=".5"/><stop offset="100%" stop-color="#FFF" stop-opacity=".1"/></linearGradient><linearGradient id="h" x1="-13.7%" x2="100%" y1="104.2%" y2="46.2%"><stop offset="0%" stop-color="#FFF" stop-opacity=".5"/><stop offset="100%" stop-color="#FFF" stop-opacity=".1"/></linearGradient></defs><path fill="url(#a)" d="m65.82 3.324 30.161 54.411-27.698 49.857a16.003 16.003 0 0 0 0 15.573l27.698 49.98-30.16 54.411a32.007 32.007 0 0 1-13.542-12.74L4.27 131.412a32.13 32.13 0 0 1 0-32.007l48.01-83.403a32.007 32.007 0 0 1 13.542-12.68Z"/><path fill="url(#b)" d="M68.283 107.654a16.003 16.003 0 0 0 0 15.51l27.698 49.98-30.16 54.412a32.007 32.007 0 0 1-13.542-12.74L4.27 131.412c-3.816-6.586 17.542-14.465 64.014-23.698v-.061Z" opacity=".7"/><path fill="url(#c)" d="m68.898 8.802 27.083 48.933-4.493 7.818-23.882-40.44c-6.894-11.264-17.42-5.416-30.591 17.358l1.97-3.386 13.294-23.082a32.007 32.007 0 0 1 13.419-12.68l3.139 5.479h.061Z" opacity=".5"/><path fill="url(#d)" d="m203.696 16.003 48.01 83.403c5.725 9.848 5.725 22.159 0 32.007l-48.01 83.402a32.007 32.007 0 0 1-27.698 16.004h-48.01l59.705-107.654a16.003 16.003 0 0 0 0-15.511L127.988 0h48.01a32.007 32.007 0 0 1 27.698 16.003Z"/><path fill="url(#e)" d="m173.536 230.45-47.395.43 57.367-108.208a16.619 16.619 0 0 0 0-15.634L126.14 0h10.834l60.197 106.546a16.619 16.619 0 0 1-.062 16.496 9616.838 9616.838 0 0 0-38.592 67.707c-11.695 20.558-6.648 33.791 15.018 39.7Z"/><path fill="url(#f)" d="M79.978 230.819c-4.924 0-9.849-1.17-14.157-3.263l59.212-106.792a11.045 11.045 0 0 0 0-10.71L65.821 3.324A32.007 32.007 0 0 1 79.978 0h48.01l59.705 107.654a16.003 16.003 0 0 1 0 15.51L127.988 230.82h-48.01Z"/><path fill="url(#g)" d="M183.508 110.054 122.448 0h5.54l59.705 107.654a16.003 16.003 0 0 1 0 15.51L127.988 230.82h-5.54l61.06-110.055a11.045 11.045 0 0 0 0-10.71Z" opacity=".6"/><path fill="url(#h)" d="M125.033 110.054 65.821 3.324c1.846-.985 4.062-1.724 6.155-2.34 13.049 23.452 32.315 59.029 57.859 106.67a16.003 16.003 0 0 1 0 15.51L71.053 229.589c-2.093-.616-3.201-1.047-5.17-1.97l59.089-106.792a11.045 11.045 0 0 0 0-10.71l.061-.062Z" opacity=".6"/></svg>

apps/web/src/app/(home)/_components/stack-builder.tsx

@@ -81,23 +81,6 @@ const CATEGORY_ORDER: Array<keyof typeof TECH_OPTIONS> = [
 	"install",
 ];
 
-const hasWebFrontend = (webFrontend: string[]) =>
-	webFrontend.some((f) =>
-		[
-			"tanstack-router",
-			"react-router",
-			"tanstack-start",
-			"next",
-			"nuxt",
-			"svelte",
-			"solid",
-		].includes(f),
-	);
-
-const checkHasNativeFrontend = (nativeFrontend: string[]) =>
-	nativeFrontend.includes("native-nativewind") ||
-	nativeFrontend.includes("native-unistyles");
-
 const hasPWACompatibleFrontend = (webFrontend: string[]) =>
 	webFrontend.some((f) =>
 		["tanstack-router", "react-router", "solid", "next"].includes(f),
@@ -552,6 +535,60 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
 				}
 			}
 
+			if (nextStack.runtime === "workers") {
+				if (nextStack.backend !== "hono") {
+					notes.runtime.notes.push(
+						"Cloudflare Workers runtime requires Hono backend. Hono will be selected.",
+					);
+					notes.backend.notes.push(
+						"Cloudflare Workers runtime requires Hono backend. It will be selected.",
+					);
+					notes.runtime.hasIssue = true;
+					notes.backend.hasIssue = true;
+					nextStack.backend = "hono";
+					changed = true;
+					changes.push({
+						category: "runtime",
+						message: "Backend set to 'Hono' (required by Cloudflare Workers)",
+					});
+				}
+
+				if (nextStack.orm !== "drizzle" && nextStack.orm !== "none") {
+					notes.runtime.notes.push(
+						"Cloudflare Workers runtime requires Drizzle ORM or no ORM. Drizzle will be selected.",
+					);
+					notes.orm.notes.push(
+						"Cloudflare Workers runtime requires Drizzle ORM or no ORM. Drizzle will be selected.",
+					);
+					notes.runtime.hasIssue = true;
+					notes.orm.hasIssue = true;
+					nextStack.orm = "drizzle";
+					changed = true;
+					changes.push({
+						category: "runtime",
+						message: "ORM set to 'Drizzle' (required by Cloudflare Workers)",
+					});
+				}
+
+				if (nextStack.database === "mongodb") {
+					notes.runtime.notes.push(
+						"Cloudflare Workers runtime is not compatible with MongoDB. SQLite will be selected.",
+					);
+					notes.database.notes.push(
+						"MongoDB is not compatible with Cloudflare Workers runtime. SQLite will be selected.",
+					);
+					notes.runtime.hasIssue = true;
+					notes.database.hasIssue = true;
+					nextStack.database = "sqlite";
+					changed = true;
+					changes.push({
+						category: "runtime",
+						message:
+							"Database set to 'SQLite' (MongoDB not compatible with Workers)",
+					});
+				}
+			}
+
 			const isNuxt = nextStack.webFrontend.includes("nuxt");
 			const isSvelte = nextStack.webFrontend.includes("svelte");
 			const isSolid = nextStack.webFrontend.includes("solid");
@@ -627,7 +664,6 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
 
 			const incompatibleExamples: string[] = [];
 
-			// Note: Examples are now supported with Native-only frontends
 			if (
 				nextStack.database === "none" &&
 				nextStack.examples.includes("todo")
@@ -709,29 +745,6 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => {
 	};
 };
 
-const getCompatibilityRules = (stack: StackState) => {
-	const isConvex = stack.backend === "convex";
-	const isBackendNone = stack.backend === "none";
-	const hasWebFrontendSelected = hasWebFrontend(stack.webFrontend);
-	const hasNativeFrontend = checkHasNativeFrontend(stack.nativeFrontend);
-	const hasSolid = stack.webFrontend.includes("solid");
-	const hasNuxt = stack.webFrontend.includes("nuxt");
-	const hasSvelte = stack.webFrontend.includes("svelte");
-
-	return {
-		isConvex,
-		isBackendNone,
-		hasWebFrontend: hasWebFrontendSelected,
-		hasNativeFrontend,
-		hasPWACompatible: hasPWACompatibleFrontend(stack.webFrontend),
-		hasTauriCompatible: hasTauriCompatibleFrontend(stack.webFrontend),
-		hasNuxtOrSvelteOrSolid: hasNuxt || hasSvelte || hasSolid,
-		hasSolid,
-		hasNuxt,
-		hasSvelte,
-	};
-};
-
 const generateCommand = (stackState: StackState): string => {
 	let base: string;
 	switch (stackState.packageManager) {
@@ -863,8 +876,6 @@ const StackBuilder = () => {
 		[stack],
 	);
 
-	const rules = useMemo(() => getCompatibilityRules(stack), [stack]);
-
 	const getRandomStack = () => {
 		const randomStack: Partial<StackState> = {};
 
@@ -973,342 +984,6 @@ const StackBuilder = () => {
 		}
 	};
 
-	const disabledReasons = useMemo(() => {
-		const reasons = new Map<string, string>();
-		const addRule = (category: string, techId: string, reason: string) => {
-			reasons.set(`${category}-${techId}`, reason);
-		};
-
-		for (const category of CATEGORY_ORDER) {
-			const options = TECH_OPTIONS[category as keyof typeof TECH_OPTIONS] || [];
-			const catKey = category as keyof StackState;
-
-			for (const tech of options) {
-				const techId = tech.id;
-
-				if (rules.isConvex) {
-					const convexDefaults: Record<string, string | string[]> = {
-						runtime: "none",
-						database: "none",
-						orm: "none",
-						api: "none",
-						auth: "false",
-						dbSetup: "none",
-						examples: ["todo"],
-					};
-
-					if (
-						["runtime", "database", "orm", "api", "auth", "dbSetup"].includes(
-							catKey,
-						)
-					) {
-						const requiredValue = convexDefaults[catKey];
-						if (catKey === "auth") {
-							if (techId === "true" && requiredValue === "false") {
-								addRule(
-									category,
-									techId,
-									"Disabled: Convex backend requires Authentication to be disabled.",
-								);
-							}
-						} else if (String(techId) !== String(requiredValue)) {
-							addRule(
-								category,
-								techId,
-								`Disabled: Convex backend requires ${getCategoryDisplayName(
-									catKey,
-								)} to be '${requiredValue}'.`,
-							);
-						}
-					} else if (catKey === "examples") {
-						const requiredExamples = convexDefaults.examples as string[];
-						if (
-							!requiredExamples.includes(techId) &&
-							techId !== "none" &&
-							options.find((o) => o.id === techId)
-						) {
-							addRule(
-								category,
-								techId,
-								"Disabled: Convex backend only supports the 'Todo' example.",
-							);
-						}
-					} else if (
-						catKey === "webFrontend" &&
-						(techId === "nuxt" || techId === "solid")
-					) {
-						addRule(
-							category,
-							techId,
-							`Disabled: Convex backend is not compatible with ${tech.name}.`,
-						);
-					}
-					continue;
-				}
-
-				if (rules.isBackendNone) {
-					if (catKey === "auth" && techId === "true") {
-						addRule(
-							category,
-							techId,
-							"Disabled: Authentication requires a backend.",
-						);
-					} else if (
-						["database", "orm", "api", "runtime", "dbSetup"].includes(catKey) &&
-						techId !== "none"
-					) {
-						addRule(
-							category,
-							techId,
-							`Disabled: ${getCategoryDisplayName(
-								catKey,
-							)} cannot be selected when 'No Backend' is chosen (will be 'None').`,
-						);
-					} else if (catKey === "examples" && techId !== "none") {
-						addRule(
-							category,
-							techId,
-							"Disabled: Examples cannot be selected when 'No Backend' is chosen.",
-						);
-					}
-				}
-
-				if (catKey === "runtime" && techId === "none" && !rules.isConvex) {
-					addRule(
-						category,
-						techId,
-						"Disabled: Runtime 'None' is only available with Convex backend.",
-					);
-				}
-
-				if (catKey === "api") {
-					if (techId !== "none" && (rules.isConvex || rules.isBackendNone)) {
-						addRule(
-							category,
-							techId,
-							rules.isConvex
-								? "Disabled: Convex backend requires API to be 'None'."
-								: "Disabled: No backend requires API to be 'None'.",
-						);
-					}
-					if (techId === "trpc" && rules.hasNuxtOrSvelteOrSolid) {
-						const frontendName = rules.hasNuxt
-							? "Nuxt"
-							: rules.hasSvelte
-								? "Svelte"
-								: "Solid";
-						addRule(
-							category,
-							techId,
-							`Disabled: tRPC is not supported with ${frontendName}. oRPC will be automatically selected.`,
-						);
-					}
-				}
-
-				if (catKey === "orm") {
-					if (
-						stack.database === "none" &&
-						techId !== "none" &&
-						!rules.isConvex
-					) {
-						addRule(
-							category,
-							techId,
-							"Disabled: ORM requires a database. Select a database or 'No ORM'.",
-						);
-					} else if (stack.database === "mongodb") {
-						if (
-							techId !== "prisma" &&
-							techId !== "mongoose" &&
-							techId !== "none"
-						) {
-							addRule(
-								category,
-								techId,
-								"Disabled: With MongoDB, use Prisma, Mongoose, or No ORM.",
-							);
-						}
-					} else if (["sqlite", "postgres", "mysql"].includes(stack.database)) {
-						if (techId === "mongoose") {
-							addRule(
-								category,
-								techId,
-								"Disabled: Mongoose ORM is for MongoDB. Choose a different ORM for relational databases.",
-							);
-						}
-					}
-
-					if (stack.dbSetup === "turso" && techId !== "drizzle") {
-						addRule(
-							category,
-							techId,
-							"Disabled: Turso DB setup requires Drizzle ORM.",
-						);
-					} else if (
-						stack.dbSetup === "prisma-postgres" &&
-						techId !== "prisma"
-					) {
-						addRule(
-							category,
-							techId,
-							"Disabled: Prisma PostgreSQL setup requires Prisma ORM.",
-						);
-					} else if (
-						stack.dbSetup === "mongodb-atlas" &&
-						techId !== "prisma" &&
-						techId !== "mongoose"
-					) {
-						addRule(
-							category,
-							techId,
-							"Disabled: MongoDB Atlas setup requires Prisma or Mongoose ORM.",
-						);
-					}
-				}
-
-				if (catKey === "dbSetup" && techId !== "none") {
-					if (stack.database === "none" && !rules.isBackendNone) {
-						addRule(
-							category,
-							techId,
-							"Disabled: A database must be selected to use this DB setup. Select 'Basic Setup' or a database first.",
-						);
-					}
-
-					if (techId === "turso") {
-						if (stack.database !== "sqlite" && stack.database !== "none") {
-							addRule(
-								category,
-								techId,
-								"Disabled: Turso requires SQLite. (Will auto-select if chosen)",
-							);
-						}
-						if (stack.orm !== "drizzle" && stack.orm !== "none") {
-							addRule(
-								category,
-								techId,
-								"Disabled: Turso requires Drizzle ORM. (Will auto-select if chosen)",
-							);
-						}
-					} else if (techId === "prisma-postgres") {
-						if (stack.database !== "postgres" && stack.database !== "none") {
-							addRule(
-								category,
-								techId,
-								"Disabled: Requires PostgreSQL. (Will auto-select if chosen)",
-							);
-						}
-						if (stack.orm !== "prisma" && stack.orm !== "none") {
-							addRule(
-								category,
-								techId,
-								"Disabled: Requires Prisma ORM. (Will auto-select if chosen)",
-							);
-						}
-					} else if (techId === "mongodb-atlas") {
-						if (stack.database !== "mongodb" && stack.database !== "none") {
-							addRule(
-								category,
-								techId,
-								"Disabled: Requires MongoDB. (Will auto-select if chosen)",
-							);
-						}
-						if (
-							stack.orm !== "prisma" &&
-							stack.orm !== "mongoose" &&
-							stack.orm !== "none"
-						) {
-							addRule(
-								category,
-								techId,
-								"Disabled: Requires Prisma or Mongoose ORM. (Will auto-select Prisma if chosen)",
-							);
-						}
-					} else if (techId === "neon") {
-						if (stack.database !== "postgres" && stack.database !== "none") {
-							addRule(
-								category,
-								techId,
-								"Disabled: Neon requires PostgreSQL. (Will auto-select if chosen)",
-							);
-						}
-					} else if (techId === "supabase") {
-						if (stack.database !== "postgres" && stack.database !== "none") {
-							addRule(
-								category,
-								techId,
-								"Disabled: Supabase (local) requires PostgreSQL. (Will auto-select if chosen)",
-							);
-						}
-					}
-				}
-
-				if (catKey === "auth" && techId === "true") {
-					if (stack.database === "none" && !rules.isBackendNone) {
-						addRule(
-							category,
-							techId,
-							"Disabled: Authentication requires a database.",
-						);
-					}
-				}
-
-				if (catKey === "addons") {
-					if (techId === "pwa" && !rules.hasPWACompatible) {
-						addRule(
-							category,
-							techId,
-							"Disabled: PWA addon requires a compatible frontend (e.g., TanStack Router, Solid).",
-						);
-					}
-					if (techId === "tauri" && !rules.hasTauriCompatible) {
-						addRule(
-							category,
-							techId,
-							"Disabled: Tauri addon requires a compatible frontend (e.g., TanStack Router, Nuxt, Svelte, Solid, Next.js).",
-						);
-					}
-				}
-
-				if (catKey === "examples" && techId !== "none") {
-					if (stack.api === "none" && !rules.isConvex && !rules.isBackendNone) {
-						addRule(
-							category,
-							techId,
-							"Disabled: Examples require an API. Cannot be selected when API is 'None'.",
-						);
-					}
-					if (
-						stack.database === "none" &&
-						techId === "todo" &&
-						!rules.isConvex
-					) {
-						addRule(
-							category,
-							techId,
-							"Disabled: The 'Todo' example requires a database.",
-						);
-					}
-					if (stack.backend === "elysia" && techId === "ai") {
-						addRule(
-							category,
-							techId,
-							"Disabled: The 'AI' example is not compatible with an Elysia backend.",
-						);
-					}
-					if (rules.hasSolid && techId === "ai") {
-						addRule(
-							category,
-							techId,
-							"Disabled: The 'AI' example is not compatible with a Solid frontend.",
-						);
-					}
-				}
-			}
-		}
-		return reasons;
-	}, [stack, rules]);
-
 	const selectedBadges = (() => {
 		const badges: React.ReactNode[] = [];
 		for (const category of CATEGORY_ORDER) {
@@ -1402,6 +1077,20 @@ const StackBuilder = () => {
 	useEffect(() => {
 		if (compatibilityAnalysis.adjustedStack) {
 			if (compatibilityAnalysis.changes.length > 0) {
+				if (compatibilityAnalysis.changes.length === 1) {
+					toast.info(compatibilityAnalysis.changes[0].message, {
+						duration: 4000,
+					});
+				} else if (compatibilityAnalysis.changes.length > 1) {
+					const message = `${
+						compatibilityAnalysis.changes.length
+					} compatibility adjustments made:\n${compatibilityAnalysis.changes
+						.map((c) => `• ${c.message}`)
+						.join("\n")}`;
+					toast.info(message, {
+						duration: 5000,
+					});
+				}
 			}
 			setLastChanges(compatibilityAnalysis.changes);
 			setStack(compatibilityAnalysis.adjustedStack);
@@ -1804,36 +1493,19 @@ const StackBuilder = () => {
 													isSelected = currentValue === tech.id;
 												}
 
-												const disabledReason = disabledReasons.get(
-													`${categoryKey}-${tech.id}`,
-												);
-												const isDisabled = !!disabledReason;
-
 												return (
 													<Tooltip key={tech.id} delayDuration={100}>
 														<TooltipTrigger asChild>
 															<motion.div
 																className={cn(
-																	"relative rounded border p-2 transition-all",
+																	"relative cursor-pointer rounded border p-2 transition-all",
-																	isDisabled && !isSelected
-																		? "cursor-not-allowed opacity-60"
-																		: "cursor-pointer",
 																	isSelected
 																		? "border-primary bg-primary/10"
-																		: `border-border ${
+																		: "border-border hover:border-muted hover:bg-muted",
-																				!isDisabled
-																					? "hover:border-muted hover:bg-muted"
-																					: ""
-																			}`,
 																)}
-																whileHover={
+																whileHover={{ scale: 1.02 }}
-																	!isDisabled ? { scale: 1.02 } : undefined
+																whileTap={{ scale: 0.98 }}
-																}
-																whileTap={
-																	!isDisabled ? { scale: 0.98 } : undefined
-																}
 																onClick={() =>
-																	!isDisabled &&
 																	handleTechSelect(
 																		categoryKey as keyof typeof TECH_OPTIONS,
 																		tech.id,
@@ -1862,27 +1534,19 @@ const StackBuilder = () => {
 																					{tech.name}
 																				</span>
 																			</div>
-																			{isDisabled && !isSelected && (
-																				<InfoIcon className="ml-2 h-4 w-4 flex-shrink-0 text-muted-foreground" />
-																			)}
 																		</div>
 																		<p className="mt-0.5 text-muted-foreground text-xs">
 																			{tech.description}
 																		</p>
 																	</div>
 																</div>
-																{tech.default && !isSelected && !isDisabled && (
+																{tech.default && !isSelected && (
 																	<span className="absolute top-1 right-1 ml-2 flex-shrink-0 rounded bg-muted px-1 py-0.5 text-[10px] text-muted-foreground">
 																		Default
 																	</span>
 																)}
 															</motion.div>
 														</TooltipTrigger>
-														{isDisabled && disabledReason && (
-															<TooltipContent side="top" align="center">
-																<p>{disabledReason}</p>
-															</TooltipContent>
-														)}
 													</Tooltip>
 												);
 											})}

apps/web/src/lib/constant.ts

@@ -132,6 +132,20 @@ export const TECH_OPTIONS = {
 			icon: "/icon/node.svg",
 			color: "from-green-400 to-green-600",
 		},
+		{
+			id: "workers",
+			name: "Cloudflare Workers (beta)",
+			description: "Serverless runtime for the edge",
+			icon: "/icon/workers.svg",
+			color: "from-orange-400 to-orange-600",
+		},
+		{
+			id: "none",
+			name: "No Runtime",
+			description: "No specific runtime",
+			icon: "",
+			color: "from-gray-400 to-gray-600",
+		},
 	],
 	backend: [
 		{

bun.lock

@@ -14,7 +14,7 @@
     },
     "apps/cli": {
       "name": "create-better-t-stack",
-      "version": "2.18.3",
+      "version": "2.18.5",
       "bin": {
         "create-better-t-stack": "dist/index.js",
       },