add cloudflare workers support (#326)

Author: AmanVarshney01

.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":
-				databaseUrl = "file:./local.db";
+				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,47 +1,57 @@
 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";
 	}
 
 	if (database !== undefined) return database;
 
+	const databaseOptions: Array<{
+		value: Database;
+		label: string;
+		hint: string;
+	}> = [
+		{
+			value: "none",
+			label: "None",
+			hint: "No database setup",
+		},
+		{
+			value: "sqlite",
+			label: "SQLite",
+			hint: "lightweight, server-less, embedded relational database",
+		},
+		{
+			value: "postgres",
+			label: "PostgreSQL",
+			hint: "powerful, open source object-relational database system",
+		},
+		{
+			value: "mysql",
+			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: [
-			{
-				value: "none",
-				label: "None",
-				hint: "No database setup",
-			},
-			{
-				value: "sqlite",
-				label: "SQLite",
-				hint: "lightweight, server-less, embedded relational database",
-			},
-			{
-				value: "postgres",
-				label: "PostgreSQL",
-				hint: "powerful, open source object-relational database system",
-			},
-			{
-				value: "mysql",
-				label: "MySQL",
-				hint: "popular open-source relational database system",
-			},
-			{
-				value: "mongodb",
-				label: "MongoDB",
-				hint: "open-source NoSQL database that stores data in JSON-like documents called BSON",
-			},
-		],
+		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,20 +17,34 @@ export async function getRuntimeChoice(
 		return "node";
 	}
 
+	const runtimeOptions: Array<{
+		value: Runtime;
+		label: string;
+		hint: string;
+	}> = [
+		{
+			value: "bun",
+			label: "Bun",
+			hint: "Fast all-in-one JavaScript runtime",
+		},
+		{
+			value: "node",
+			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: [
-			{
-				value: "bun",
-				label: "Bun",
-				hint: "Fast all-in-one JavaScript runtime",
-			},
-			{
-				value: "node",
-				label: "Node.js",
-				hint: "Traditional Node.js runtime",
-			},
-		],
+		options: runtimeOptions,
 		initialValue: DEFAULT_CONFIG.runtime,
 	});