add solid

.changeset/chubby-baths-take.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": minor
+---
+
+add solid

apps/cli/src/constants.ts

@@ -84,6 +84,7 @@ export const dependencyVersionMap = {
 	"@orpc/server": "^1.1.1",
 	"@orpc/client": "^1.1.1",
 	"@orpc/react-query": "^1.1.1",
+	"@orpc/solid-query": "^1.1.1",
 	"@orpc/vue-query": "^1.1.1",
 	"@orpc/svelte-query": "^1.1.1",
 
@@ -98,6 +99,9 @@ export const dependencyVersionMap = {
 	"@tanstack/svelte-query": "^5.74.4",
 	"@tanstack/react-query-devtools": "^5.69.0",
 	"@tanstack/react-query": "^5.69.0",
+
+	"@tanstack/solid-query": "^5.75.0",
+	"@tanstack/solid-query-devtools": "^5.75.0",
 } as const;
 
 export type AvailableDependencies = keyof typeof dependencyVersionMap;

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

@@ -14,6 +14,7 @@ export async function setupAddons(config: ProjectConfig) {
 		frontend.includes("react-router") || frontend.includes("tanstack-router");
 	const hasNuxtFrontend = frontend.includes("nuxt");
 	const hasSvelteFrontend = frontend.includes("svelte");
+	const hasSolidFrontend = frontend.includes("solid");
 
 	if (addons.includes("turborepo")) {
 		await addPackageDependency({
@@ -22,12 +23,15 @@ export async function setupAddons(config: ProjectConfig) {
 		});
 	}
 
-	if (addons.includes("pwa") && hasReactWebFrontend) {
+	if (addons.includes("pwa") && (hasReactWebFrontend || hasSolidFrontend)) {
 		await setupPwa(projectDir, frontend);
 	}
 	if (
 		addons.includes("tauri") &&
-		(hasReactWebFrontend || hasNuxtFrontend || hasSvelteFrontend)
+		(hasReactWebFrontend ||
+			hasNuxtFrontend ||
+			hasSvelteFrontend ||
+			hasSolidFrontend)
 	) {
 		await setupTauri(config);
 	}
@@ -48,7 +52,9 @@ function getWebAppDir(
 ): string {
 	if (
 		frontends.some((f) =>
-			["react-router", "tanstack-router", "nuxt", "svelte"].includes(f),
+			["react-router", "tanstack-router", "nuxt", "svelte", "solid"].includes(
+				f,
+			),
 		)
 	) {
 		return path.join(projectDir, "apps/web");
@@ -102,7 +108,7 @@ async function setupHusky(projectDir: string) {
 
 async function setupPwa(projectDir: string, frontends: ProjectFrontend[]) {
 	const isCompatibleFrontend = frontends.some((f) =>
-		["react-router", "tanstack-router"].includes(f),
+		["react-router", "tanstack-router", "solid"].includes(f),
 	);
 	if (!isCompatibleFrontend) return;
 

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

@@ -18,6 +18,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 	);
 	const hasNuxtWeb = frontend.includes("nuxt");
 	const hasSvelteWeb = frontend.includes("svelte");
+	const hasSolidWeb = frontend.includes("solid");
 
 	if (!isConvex && api !== "none") {
 		const serverDir = path.join(projectDir, "apps/server");
@@ -85,6 +86,18 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 						projectDir: webDir,
 					});
 				}
+			} else if (hasSolidWeb) {
+				if (api === "orpc") {
+					await addPackageDependency({
+						dependencies: [
+							"@orpc/solid-query",
+							"@orpc/client",
+							"@orpc/server",
+							"@tanstack/solid-query",
+						],
+						projectDir: webDir,
+					});
+				}
 			}
 		}
 
@@ -114,6 +127,7 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 		"next",
 		"native",
 	];
+	const needsSolidQuery = frontend.includes("solid");
 	const needsReactQuery = frontend.some((f) => reactBasedFrontends.includes(f));
 
 	if (needsReactQuery && !isConvex) {
@@ -155,6 +169,26 @@ export async function setupApi(config: ProjectConfig): Promise<void> {
 		}
 	}
 
+	if (needsSolidQuery && !isConvex) {
+		const solidQueryDeps: AvailableDependencies[] = ["@tanstack/solid-query"];
+		const solidQueryDevDeps: AvailableDependencies[] = [
+			"@tanstack/solid-query-devtools",
+		];
+
+		if (webDirExists) {
+			const webPkgJsonPath = path.join(webDir, "package.json");
+			if (await fs.pathExists(webPkgJsonPath)) {
+				try {
+					await addPackageDependency({
+						dependencies: solidQueryDeps,
+						devDependencies: solidQueryDevDeps,
+						projectDir: webDir,
+					});
+				} catch (error) {}
+			}
+		}
+	}
+
 	if (isConvex) {
 		if (webDirExists) {
 			const webPkgJsonPath = path.join(webDir, "package.json");

apps/cli/src/helpers/create-readme.ts

@@ -40,6 +40,7 @@ function generateReadmeContent(options: ProjectConfig): string {
 	const hasNext = frontend.includes("next");
 	const hasTanstackStart = frontend.includes("tanstack-start");
 	const hasSvelte = frontend.includes("svelte");
+	const hasSolid = frontend.includes("solid");
 	const hasNuxt = frontend.includes("nuxt");
 
 	const packageManagerRunCmd =
@@ -65,7 +66,9 @@ This project was created with [Better-T-Stack](https://github.com/AmanVarshney01
 							? "SvelteKit"
 							: hasNuxt
 								? "Nuxt"
-								: ""
+								: hasSolid
+									? "SolidJS"
+									: ""
 	}, ${backend[0].toUpperCase() + backend.slice(1)}, tRPC, and more.
 
 ## Features
@@ -94,7 +97,8 @@ ${
 	hasNext ||
 	hasTanstackStart ||
 	hasSvelte ||
-	hasNuxt
+	hasNuxt ||
+	hasSolid
 		? `Open [http://localhost:${webPort}](http://localhost:${webPort}) in your browser to see the web application.`
 		: ""
 }
@@ -118,7 +122,8 @@ ${
 	hasNext ||
 	hasTanstackStart ||
 	hasSvelte ||
-	hasNuxt
+	hasNuxt ||
+	hasSolid
 		? `│   ├── web/         # Frontend application (${
 				hasTanstackRouter
 					? "React + TanStack Router"
@@ -132,7 +137,9 @@ ${
 									? "SvelteKit"
 									: hasNuxt
 										? "Nuxt"
-										: ""
+										: hasSolid
+											? "SolidJS"
+											: ""
 			})\n`
 		: ""
 }${
@@ -178,6 +185,7 @@ function generateFeaturesList(
 	const hasTanstackStart = frontend.includes("tanstack-start");
 	const hasSvelte = frontend.includes("svelte");
 	const hasNuxt = frontend.includes("nuxt");
+	const hasSolid = frontend.includes("solid");
 
 	const addonsList = [
 		"- **TypeScript** - For type safety and improved developer experience",
@@ -199,6 +207,8 @@ function generateFeaturesList(
 		addonsList.push("- **SvelteKit** - Web framework for building Svelte apps");
 	} else if (hasNuxt) {
 		addonsList.push("- **Nuxt** - The Intuitive Vue Framework");
+	} else if (hasSolid) {
+		addonsList.push("- **SolidJS** - Simple and performant reactivity");
 	}
 
 	if (hasNative) {

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

@@ -74,12 +74,14 @@ export async function setupEnvironmentVariables(
 	const hasNextJs = frontend.includes("next");
 	const hasNuxt = frontend.includes("nuxt");
 	const hasSvelte = frontend.includes("svelte");
+	const hasSolid = frontend.includes("solid");
 	const hasWebFrontend =
 		hasReactRouter ||
 		hasTanStackRouter ||
 		hasTanStackStart ||
 		hasNextJs ||
 		hasNuxt ||
+		hasSolid ||
 		hasSvelte;
 
 	if (hasWebFrontend) {

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

@@ -63,6 +63,7 @@ export function displayPostInstallInstructions(
 			"tanstack-start",
 			"nuxt",
 			"svelte",
+			"solid",
 		].includes(f),
 	);
 	const hasNative = frontend?.includes("native");
@@ -75,7 +76,7 @@ export function displayPostInstallInstructions(
 		!isConvex && database !== "none" && orm === "none" ? getNoOrmWarning() : "";
 
 	const hasReactRouter = frontend?.includes("react-router");
-	const hasSvelte = frontend?.includes("svelte");
+	const hasSvelte = frontend?.includes("svelte"); // Keep separate for port logic
 	const webPort = hasReactRouter || hasSvelte ? "5173" : "3001";
 
 	const tazeCommand = getPackageExecutionCommand(packageManager, "taze -r");

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

@@ -45,10 +45,10 @@ export async function setupTauri(config: ProjectConfig): Promise<void> {
 		const hasReactRouter = frontend.includes("react-router");
 		const hasNuxt = frontend.includes("nuxt");
 		const hasSvelte = frontend.includes("svelte");
+		const hasSolid = frontend.includes("solid");
 
-		const devUrl = hasReactRouter
-			? "http://localhost:5173"
-			: hasSvelte
+		const devUrl =
+			hasReactRouter || hasSvelte
 				? "http://localhost:5173"
 				: "http://localhost:3001";
 

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

@@ -1,7 +1,6 @@
 import path from "node:path";
 import fs from "fs-extra";
 import { globby } from "globby";
-import pc from "picocolors";
 import { PKG_ROOT } from "../constants";
 import type { ProjectConfig } from "../types";
 import { processTemplate } from "../utils/template-processor";
@@ -70,10 +69,11 @@ export async function setupFrontendTemplates(
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
+	const hasSolidWeb = context.frontend.includes("solid");
 	const hasNative = context.frontend.includes("native");
 	const isConvex = context.backend === "convex";
 
-	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb) {
+	if (hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) {
 		const webAppDir = path.join(projectDir, "apps/web");
 		await fs.ensureDir(webAppDir);
 
@@ -105,6 +105,7 @@ export async function setupFrontendTemplates(
 					);
 				} else {
 				}
+
 				if (!isConvex && context.api !== "none") {
 					const apiWebBaseDir = path.join(
 						PKG_ROOT,
@@ -127,7 +128,8 @@ export async function setupFrontendTemplates(
 				await processAndCopyFiles("**/*", nuxtBaseDir, webAppDir, context);
 			} else {
 			}
-			if (!isConvex && context.api !== "none") {
+
+			if (!isConvex && context.api === "orpc") {
 				const apiWebNuxtDir = path.join(
 					PKG_ROOT,
 					`templates/api/${context.api}/web/nuxt`,
@@ -143,6 +145,7 @@ export async function setupFrontendTemplates(
 				await processAndCopyFiles("**/*", svelteBaseDir, webAppDir, context);
 			} else {
 			}
+
 			if (!isConvex && context.api === "orpc") {
 				const apiWebSvelteDir = path.join(
 					PKG_ROOT,
@@ -158,6 +161,23 @@ export async function setupFrontendTemplates(
 				} else {
 				}
 			}
+		} else if (hasSolidWeb) {
+			const solidBaseDir = path.join(PKG_ROOT, "templates/frontend/solid");
+			if (await fs.pathExists(solidBaseDir)) {
+				await processAndCopyFiles("**/*", solidBaseDir, webAppDir, context);
+			} else {
+			}
+
+			if (!isConvex && context.api === "orpc") {
+				const apiWebSolidDir = path.join(
+					PKG_ROOT,
+					`templates/api/${context.api}/web/solid`,
+				);
+				if (await fs.pathExists(apiWebSolidDir)) {
+					await processAndCopyFiles("**/*", apiWebSolidDir, webAppDir, context);
+				} else {
+				}
+			}
 		}
 	}
 
@@ -323,6 +343,7 @@ export async function setupAuthTemplate(
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
+	const hasSolidWeb = context.frontend.includes("solid");
 	const hasNative = context.frontend.includes("native");
 
 	if (serverAppDirExists) {
@@ -380,7 +401,10 @@ export async function setupAuthTemplate(
 		}
 	}
 
-	if ((hasReactWeb || hasNuxtWeb || hasSvelteWeb) && webAppDirExists) {
+	if (
+		(hasReactWeb || hasNuxtWeb || hasSvelteWeb || hasSolidWeb) &&
+		webAppDirExists
+	) {
 		if (hasReactWeb) {
 			const authWebBaseSrc = path.join(
 				PKG_ROOT,
@@ -390,6 +414,7 @@ export async function setupAuthTemplate(
 				await processAndCopyFiles("**/*", authWebBaseSrc, webAppDir, context);
 			} else {
 			}
+
 			const reactFramework = context.frontend.find((f) =>
 				["tanstack-router", "react-router", "tanstack-start", "next"].includes(
 					f,
@@ -432,6 +457,19 @@ export async function setupAuthTemplate(
 				} else {
 				}
 			}
+		} else if (hasSolidWeb) {
+			if (context.api === "orpc") {
+				const authWebSolidSrc = path.join(PKG_ROOT, "templates/auth/web/solid");
+				if (await fs.pathExists(authWebSolidSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						authWebSolidSrc,
+						webAppDir,
+						context,
+					);
+				} else {
+				}
+			}
 		}
 	}
 
@@ -459,6 +497,7 @@ export async function setupAddonsTemplate(
 		if (addon === "pwa") {
 			addonSrcDir = path.join(PKG_ROOT, "templates/addons/pwa/apps/web");
 			addonDestDir = path.join(projectDir, "apps/web");
+
 			if (!(await fs.pathExists(addonDestDir))) {
 				continue;
 			}
@@ -475,6 +514,14 @@ export async function setupExamplesTemplate(
 	projectDir: string,
 	context: ProjectConfig,
 ): Promise<void> {
+	if (
+		!context.examples ||
+		context.examples.length === 0 ||
+		context.examples[0] === "none"
+	) {
+		return;
+	}
+
 	const serverAppDir = path.join(projectDir, "apps/server");
 	const webAppDir = path.join(projectDir, "apps/web");
 
@@ -486,84 +533,85 @@ export async function setupExamplesTemplate(
 	);
 	const hasNuxtWeb = context.frontend.includes("nuxt");
 	const hasSvelteWeb = context.frontend.includes("svelte");
+	const hasSolidWeb = context.frontend.includes("solid");
 
 	for (const example of context.examples) {
-		if (
-			!context.examples ||
-			context.examples.length === 0 ||
-			context.examples[0] === "none"
-		)
-			continue;
-
 		if (example === "none") continue;
 
 		const exampleBaseDir = path.join(PKG_ROOT, `templates/examples/${example}`);
 
-		if (example === "ai" && context.backend === "next" && serverAppDirExists) {
-			const aiNextServerSrc = path.join(exampleBaseDir, "server/next");
-
-			if (await fs.pathExists(aiNextServerSrc)) {
-				await processAndCopyFiles(
-					"**/*",
-					aiNextServerSrc,
-					serverAppDir,
-					context,
-					false,
-				);
-			}
-		}
-
-		if (serverAppDirExists) {
+		if (serverAppDirExists && context.backend !== "convex") {
 			const exampleServerSrc = path.join(exampleBaseDir, "server");
-			if (await fs.pathExists(exampleServerSrc)) {
-				if (context.backend !== "convex") {
-					if (context.orm !== "none" && context.database !== "none") {
-						const exampleOrmBaseSrc = path.join(
-							exampleServerSrc,
-							context.orm,
-							"base",
-						);
-						if (await fs.pathExists(exampleOrmBaseSrc)) {
-							await processAndCopyFiles(
-								"**/*",
-								exampleOrmBaseSrc,
-								serverAppDir,
-								context,
-								false,
-							);
-						}
 
-						const exampleDbSchemaSrc = path.join(
-							exampleServerSrc,
-							context.orm,
-							context.database,
-						);
-						if (await fs.pathExists(exampleDbSchemaSrc)) {
-							await processAndCopyFiles(
-								"**/*",
-								exampleDbSchemaSrc,
-								serverAppDir,
-								context,
-								false,
-							);
-						}
-					}
-					const generalServerFiles = await globby(["*.ts", "*.hbs"], {
-						cwd: exampleServerSrc,
-						onlyFiles: true,
-						deep: 1,
-						ignore: [`${context.orm}/**`],
-					});
-					for (const file of generalServerFiles) {
-						const srcPath = path.join(exampleServerSrc, file);
-						const destPath = path.join(serverAppDir, file.replace(".hbs", ""));
-						if (srcPath.endsWith(".hbs")) {
-							await processTemplate(srcPath, destPath, context);
-						} else {
+			if (example === "ai" && context.backend === "next") {
+				const aiNextServerSrc = path.join(exampleServerSrc, "next");
+				if (await fs.pathExists(aiNextServerSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						aiNextServerSrc,
+						serverAppDir,
+						context,
+						false,
+					);
+				}
+			}
+
+			if (context.orm !== "none" && context.database !== "none") {
+				const exampleOrmBaseSrc = path.join(
+					exampleServerSrc,
+					context.orm,
+					"base",
+				);
+				if (await fs.pathExists(exampleOrmBaseSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						exampleOrmBaseSrc,
+						serverAppDir,
+						context,
+						false,
+					);
+				}
+
+				const exampleDbSchemaSrc = path.join(
+					exampleServerSrc,
+					context.orm,
+					context.database,
+				);
+				if (await fs.pathExists(exampleDbSchemaSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						exampleDbSchemaSrc,
+						serverAppDir,
+						context,
+						false,
+					);
+				}
+			}
+
+			const ignorePatterns = [`${context.orm}/**`];
+			if (example === "ai" && context.backend === "next") {
+				ignorePatterns.push("next/**");
+			}
+
+			const generalServerFiles = await globby(["**/*.ts", "**/*.hbs"], {
+				cwd: exampleServerSrc,
+				onlyFiles: true,
+				deep: 1,
+				ignore: ignorePatterns,
+			});
+
+			for (const file of generalServerFiles) {
+				const srcPath = path.join(exampleServerSrc, file);
+				const destPath = path.join(serverAppDir, file.replace(".hbs", ""));
+				try {
+					if (srcPath.endsWith(".hbs")) {
+						await processTemplate(srcPath, destPath, context);
+					} else {
+						if (!(await fs.pathExists(destPath))) {
 							await fs.copy(srcPath, destPath, { overwrite: false });
 						}
 					}
-				}
+				} catch (error) {}
 			}
 		}
 
@@ -620,6 +668,18 @@ export async function setupExamplesTemplate(
 					);
 				} else {
 				}
+			} else if (hasSolidWeb) {
+				const exampleWebSolidSrc = path.join(exampleBaseDir, "web/solid");
+				if (await fs.pathExists(exampleWebSolidSrc)) {
+					await processAndCopyFiles(
+						"**/*",
+						exampleWebSolidSrc,
+						webAppDir,
+						context,
+						false,
+					);
+				} else {
+				}
 			}
 		}
 	}

apps/cli/src/index.ts

@@ -78,6 +78,7 @@ async function main() {
 					"nuxt",
 					"native",
 					"svelte",
+					"solid",
 					"none",
 				],
 			})
@@ -326,11 +327,12 @@ function processAndValidateFlags(
 					f === "tanstack-start" ||
 					f === "next" ||
 					f === "nuxt" ||
-					f === "svelte",
+					f === "svelte" ||
+					f === "solid",
 			);
 			if (webFrontends.length > 1) {
 				consola.fatal(
-					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, svelte",
+					"Cannot select multiple web frameworks. Choose only one of: tanstack-router, tanstack-start, react-router, next, nuxt, svelte, solid",
 				);
 				process.exit(1);
 			}
@@ -395,6 +397,20 @@ function processAndValidateFlags(
 			process.exit(1);
 		}
 
+		if (providedFlags.has("frontend") && options.frontend) {
+			const incompatibleFrontends = options.frontend.filter(
+				(f) => f === "nuxt" || f === "solid",
+			);
+			if (incompatibleFrontends.length > 0) {
+				consola.fatal(
+					`The following frontends are not compatible with '--backend convex': ${incompatibleFrontends.join(
+						", ",
+					)}. Please choose a different frontend or backend.`,
+				);
+				process.exit(1);
+			}
+		}
+
 		config.auth = false;
 		config.database = "none";
 		config.orm = "none";
@@ -529,19 +545,24 @@ function processAndValidateFlags(
 
 		const includesNuxt = effectiveFrontend?.includes("nuxt");
 		const includesSvelte = effectiveFrontend?.includes("svelte");
+		const includesSolid = effectiveFrontend?.includes("solid");
 
-		if ((includesNuxt || includesSvelte) && effectiveApi === "trpc") {
+		if (
+			(includesNuxt || includesSvelte || includesSolid) &&
+			effectiveApi === "trpc"
+		) {
 			consola.fatal(
 				`tRPC API is not supported with '${
-					includesNuxt ? "nuxt" : "svelte"
+					includesNuxt ? "nuxt" : includesSvelte ? "svelte" : "solid"
 				}' frontend. Please use --api orpc or remove '${
-					includesNuxt ? "nuxt" : "svelte"
+					includesNuxt ? "nuxt" : includesSvelte ? "svelte" : "solid"
 				}' from --frontend.`,
 			);
 			process.exit(1);
 		}
+
 		if (
-			(includesNuxt || includesSvelte) &&
+			(includesNuxt || includesSvelte || includesSolid) &&
 			effectiveApi !== "orpc" &&
 			(!options.api || (options.yes && options.api !== "trpc"))
 		) {
@@ -559,6 +580,7 @@ function processAndValidateFlags(
 				(f) =>
 					f === "tanstack-router" ||
 					f === "react-router" ||
+					f === "solid" ||
 					(f === "nuxt" &&
 						config.addons?.includes("tauri") &&
 						!config.addons?.includes("pwa")) ||
@@ -576,7 +598,7 @@ function processAndValidateFlags(
 					config.addons.includes("tauri")
 				) {
 					incompatibleAddon =
-						"PWA and Tauri addons require tanstack-router, react-router, or Nuxt/Svelte (Tauri only).";
+						"PWA requires tanstack-router/react-router/solid. Tauri requires tanstack-router/react-router/Nuxt/Svelte/Solid.";
 				}
 				consola.fatal(
 					`${incompatibleAddon} Cannot use these addons with your frontend selection.`,
@@ -632,18 +654,12 @@ function processAndValidateFlags(
 				process.exit(1);
 			}
 
-			const hasWebFrontendForExamples = effectiveFrontend?.some((f) =>
-				[
-					"tanstack-router",
-					"react-router",
-					"tanstack-start",
-					"next",
-					"nuxt",
-					"svelte",
-				].includes(f),
-			);
-			const noFrontendSelected =
-				!effectiveFrontend || effectiveFrontend.length === 0;
+			if (config.examples.includes("ai") && includesSolid) {
+				consola.fatal(
+					"The 'ai' example is not compatible with the Solid frontend.",
+				);
+				process.exit(1);
+			}
 		}
 	}
 

apps/cli/src/prompts/addons.ts

@@ -17,13 +17,15 @@ export async function getAddonsChoice(
 
 	const hasCompatiblePwaFrontend =
 		frontends?.includes("react-router") ||
-		frontends?.includes("tanstack-router");
+		frontends?.includes("tanstack-router") ||
+		frontends?.includes("solid");
 
 	const hasCompatibleTauriFrontend =
 		frontends?.includes("react-router") ||
 		frontends?.includes("tanstack-router") ||
 		frontends?.includes("nuxt") ||
-		frontends?.includes("svelte");
+		frontends?.includes("svelte") ||
+		frontends?.includes("solid");
 
 	const allPossibleOptions: AddonOption[] = [
 		{

apps/cli/src/prompts/api.ts

@@ -16,6 +16,7 @@ export async function getApiChoice(
 
 	const includesNuxt = frontend?.includes("nuxt");
 	const includesSvelte = frontend?.includes("svelte");
+	const includesSolid = frontend?.includes("solid");
 
 	let apiOptions = [
 		{
@@ -30,13 +31,13 @@ export async function getApiChoice(
 		},
 	];
 
-	if (includesNuxt || includesSvelte) {
+	if (includesNuxt || includesSvelte || includesSolid) {
 		apiOptions = [
 			{
 				value: "orpc" as const,
 				label: "oRPC",
 				hint: `End-to-end type-safe APIs (Required for ${
-					includesNuxt ? "Nuxt" : "Svelte"
+					includesNuxt ? "Nuxt" : includesSvelte ? "Svelte" : "Solid"
 				} frontend)`,
 			},
 		];
@@ -45,7 +46,10 @@ export async function getApiChoice(
 	const apiType = await select<ProjectApi>({
 		message: "Select API type",
 		options: apiOptions,
-		initialValue: includesNuxt || includesSvelte ? "orpc" : DEFAULT_CONFIG.api,
+		initialValue:
+			includesNuxt || includesSvelte || includesSolid
+				? "orpc"
+				: DEFAULT_CONFIG.api,
 	});
 
 	if (isCancel(apiType)) {
@@ -53,7 +57,7 @@ export async function getApiChoice(
 		process.exit(0);
 	}
 
-	if ((includesNuxt || includesSvelte) && apiType !== "orpc") {
+	if ((includesNuxt || includesSvelte || includesSolid) && apiType !== "orpc") {
 		return "orpc";
 	}
 

apps/cli/src/prompts/backend-framework.ts

@@ -1,43 +1,62 @@
 import { cancel, isCancel, select } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
-import type { ProjectBackend } from "../types";
+import type { ProjectBackend, ProjectFrontend } from "../types";
 
 export async function getBackendFrameworkChoice(
 	backendFramework?: ProjectBackend,
+	frontends?: ProjectFrontend[],
 ): Promise<ProjectBackend> {
 	if (backendFramework !== undefined) return backendFramework;
 
+	const hasIncompatibleFrontend = frontends?.some(
+		(f) => f === "nuxt" || f === "solid",
+	);
+
+	const backendOptions: Array<{
+		value: ProjectBackend;
+		label: string;
+		hint: string;
+	}> = [
+		{
+			value: "hono" as const,
+			label: "Hono",
+			hint: "Lightweight, ultrafast web framework",
+		},
+		{
+			value: "next" as const,
+			label: "Next.js",
+			hint: "Full-stack framework with API routes",
+		},
+		{
+			value: "express" as const,
+			label: "Express",
+			hint: "Fast, unopinionated, minimalist web framework for Node.js",
+		},
+		{
+			value: "elysia" as const,
+			label: "Elysia",
+			hint: "Ergonomic web framework for building backend servers",
+		},
+	];
+
+	if (!hasIncompatibleFrontend) {
+		backendOptions.push({
+			value: "convex" as const,
+			label: "Convex",
+			hint: "Reactive backend-as-a-service platform",
+		});
+	}
+
+	let initialValue = DEFAULT_CONFIG.backend;
+	if (hasIncompatibleFrontend && initialValue === "convex") {
+		initialValue = "hono";
+	}
+
 	const response = await select<ProjectBackend>({
 		message: "Select backend framework",
-		options: [
-			{
-				value: "hono",
-				label: "Hono",
-				hint: "Lightweight, ultrafast web framework",
-			},
-			{
-				value: "next",
-				label: "Next.js",
-				hint: "Full-stack framework with API routes",
-			},
-			{
-				value: "express",
-				label: "Express",
-				hint: "Fast, unopinionated, minimalist web framework for Node.js",
-			},
-			{
-				value: "elysia",
-				label: "Elysia",
-				hint: "Ergonomic web framework for building backend servers",
-			},
-			{
-				value: "convex",
-				label: "Convex",
-				hint: "Reactive backend-as-a-service platform",
-			},
-		],
-		initialValue: DEFAULT_CONFIG.backend,
+		options: backendOptions,
+		initialValue,
 	});
 
 	if (isCancel(response)) {

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

@@ -53,8 +53,10 @@ export async function gatherConfig(
 			projectName: async () => {
 				return getProjectName(flags.projectName);
 			},
-			frontend: () => getFrontendChoice(flags.frontend),
-			backend: () => getBackendFrameworkChoice(flags.backend),
+			frontend: ({ results }) =>
+				getFrontendChoice(flags.frontend, flags.backend),
+			backend: ({ results }) =>
+				getBackendFrameworkChoice(flags.backend, results.frontend),
 			runtime: ({ results }) =>
 				getRuntimeChoice(flags.runtime, results.backend),
 			database: ({ results }) =>

apps/cli/src/prompts/examples.ts

@@ -37,6 +37,7 @@ export async function getExamplesChoice(
 				"next",
 				"nuxt",
 				"svelte",
+				"solid",
 			].includes(f),
 		) ?? false;
 	const noFrontendSelected = !frontends || frontends.length === 0;
@@ -52,7 +53,7 @@ export async function getExamplesChoice(
 		},
 	];
 
-	if (backend !== "elysia") {
+	if (backend !== "elysia" && !frontends?.includes("solid")) {
 		options.push({
 			value: "ai" as const,
 			label: "AI Chat",

apps/cli/src/prompts/frontend-option.ts

@@ -1,10 +1,11 @@
 import { cancel, isCancel, multiselect, select } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
-import type { ProjectFrontend } from "../types";
+import type { ProjectBackend, ProjectFrontend } from "../types";
 
 export async function getFrontendChoice(
 	frontendOptions?: ProjectFrontend[],
+	backend?: ProjectBackend,
 ): Promise<ProjectFrontend[]> {
 	if (frontendOptions !== undefined) return frontendOptions;
 
@@ -23,17 +24,7 @@ export async function getFrontendChoice(
 			},
 		],
 		required: false,
-		initialValues: DEFAULT_CONFIG.frontend.some(
-			(f) =>
-				f === "tanstack-router" ||
-				f === "react-router" ||
-				f === "tanstack-start" ||
-				f === "next" ||
-				f === "nuxt" ||
-				f === "svelte",
-		)
-			? ["web"]
-			: [],
+		initialValues: ["web"],
 	});
 
 	if (isCancel(frontendTypes)) {
@@ -44,50 +35,55 @@ export async function getFrontendChoice(
 	const result: ProjectFrontend[] = [];
 
 	if (frontendTypes.includes("web")) {
+		const allWebOptions = [
+			{
+				value: "tanstack-router" as const,
+				label: "TanStack Router",
+				hint: "Modern and scalable routing for React Applications",
+			},
+			{
+				value: "react-router" as const,
+				label: "React Router",
+				hint: "A user‑obsessed, standards‑focused, multi‑strategy router",
+			},
+			{
+				value: "next" as const,
+				label: "Next.js",
+				hint: "The React Framework for the Web",
+			},
+			{
+				value: "nuxt" as const,
+				label: "Nuxt",
+				hint: "The Progressive Web Framework for Vue.js",
+			},
+			{
+				value: "svelte" as const,
+				label: "Svelte",
+				hint: "web development for the rest of us",
+			},
+			{
+				value: "solid" as const,
+				label: "Solid",
+				hint: "Simple and performant reactivity for building user interfaces",
+			},
+			{
+				value: "tanstack-start" as const,
+				label: "TanStack Start (beta)",
+				hint: "SSR, Server Functions, API Routes and more with TanStack Router",
+			},
+		];
+
+		const webOptions = allWebOptions.filter((option) => {
+			if (backend === "convex") {
+				return option.value !== "nuxt" && option.value !== "solid";
+			}
+			return true;
+		});
+
 		const webFramework = await select<ProjectFrontend>({
 			message: "Choose frontend framework",
-			options: [
-				{
-					value: "tanstack-router",
-					label: "TanStack Router",
-					hint: "Modern and scalable routing for React Applications",
-				},
-				{
-					value: "react-router",
-					label: "React Router",
-					hint: "A user‑obsessed, standards‑focused, multi‑strategy router",
-				},
-				{
-					value: "next",
-					label: "Next.js",
-					hint: "The React Framework for the Web",
-				},
-				{
-					value: "nuxt",
-					label: "Nuxt",
-					hint: "The Progressive Web Framework for Vue.js",
-				},
-				{
-					value: "svelte",
-					label: "Svelte",
-					hint: "web development for the rest of us",
-				},
-				{
-					value: "tanstack-start",
-					label: "TanStack Start (beta)",
-					hint: "SSR, Server Functions, API Routes and more with TanStack Router",
-				},
-			],
-			initialValue:
-				DEFAULT_CONFIG.frontend.find(
-					(f) =>
-						f === "tanstack-router" ||
-						f === "react-router" ||
-						f === "tanstack-start" ||
-						f === "next" ||
-						f === "nuxt" ||
-						f === "svelte",
-				) || "tanstack-router",
+			options: webOptions,
+			initialValue: DEFAULT_CONFIG.frontend[0],
 		});
 
 		if (isCancel(webFramework)) {

apps/cli/src/types.ts

@@ -25,6 +25,7 @@ export type ProjectFrontend =
 	| "nuxt"
 	| "native"
 	| "svelte"
+	| "solid"
 	| "none";
 export type ProjectDBSetup =
 	| "turso"

apps/cli/templates/api/orpc/web/solid/src/utils/orpc.ts.hbs

@@ -0,0 +1,30 @@
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { createORPCSolidQueryUtils } from "@orpc/solid-query";
+import { QueryCache, QueryClient } from "@tanstack/solid-query";
+import type { appRouter } from "../../../server/src/routers/index";
+import type { RouterClient } from "@orpc/server";
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      console.error(`Error: ${error.message}`);
+    },
+  }),
+});
+
+export const link = new RPCLink({
+  url: `${import.meta.env.VITE_SERVER_URL}/rpc`,
+  {{#if auth}}
+  fetch(url, options) {
+    return fetch(url, {
+      ...options,
+      credentials: "include",
+    });
+  },
+  {{/if}}
+});
+
+export const client: RouterClient<typeof appRouter> = createORPCClient(link);
+
+export const orpc = createORPCSolidQueryUtils(client);

apps/cli/templates/auth/web/solid/src/components/sign-in-form.tsx

@@ -0,0 +1,132 @@
+import { authClient } from "@/lib/auth-client";
+import { createForm } from "@tanstack/solid-form";
+import { useNavigate } from "@tanstack/solid-router";
+import { z } from "zod";
+import { For } from "solid-js";
+
+export default function SignInForm({
+  onSwitchToSignUp,
+}: {
+  onSwitchToSignUp: () => void;
+}) {
+  const navigate = useNavigate({
+    from: "/",
+  });
+
+  const form = createForm(() => ({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signIn.email(
+        {
+          email: value.email,
+          password: value.password,
+        },
+        {
+          onSuccess: () => {
+            navigate({
+              to: "/dashboard",
+            });
+            console.log("Sign in successful");
+          },
+          onError: (error) => {
+            console.error(error.error.message);
+          },
+        },
+      );
+    },
+    validators: {
+      onSubmit: z.object({
+        email: z.string().email("Invalid email address"),
+        password: z.string().min(8, "Password must be at least 8 characters"),
+      }),
+    },
+  }));
+
+  return (
+    <div class="mx-auto w-full mt-10 max-w-md p-6">
+      <h1 class="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+        class="space-y-4"
+      >
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div class="space-y-2">
+                <label for={field().name}>Email</label>
+                <input
+                  id={field().name}
+                  name={field().name}
+                  type="email"
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)} // Use onInput and currentTarget
+                  class="w-full rounded border p-2" // Example basic styling
+                />
+                <For each={field().state.meta.errors}>
+                  {(error) => (
+                    <p class="text-sm text-red-600">{error?.message}</p>
+                  )}
+                </For>
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div class="space-y-2">
+                <label for={field().name}>Password</label>
+                <input
+                  id={field().name}
+                  name={field().name}
+                  type="password"
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                  class="w-full rounded border p-2"
+                />
+                <For each={field().state.meta.errors}>
+                  {(error) => (
+                    <p class="text-sm text-red-600">{error?.message}</p>
+                  )}
+                </For>
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <form.Subscribe>
+          {(state) => (
+            <button
+              type="submit"
+              class="w-full rounded bg-indigo-600 p-2 text-white hover:bg-indigo-700 disabled:opacity-50"
+              disabled={!state().canSubmit || state().isSubmitting}
+            >
+              {state().isSubmitting ? "Submitting..." : "Sign In"}
+            </button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      <div class="mt-4 text-center">
+        <button
+          type="button"
+          onClick={onSwitchToSignUp}
+          class="text-sm text-indigo-600 hover:text-indigo-800 hover:underline" // Example basic styling
+        >
+          Need an account? Sign Up
+        </button>
+      </div>
+    </div>
+  );
+}

apps/cli/templates/auth/web/solid/src/components/sign-up-form.tsx

@@ -0,0 +1,158 @@
+import { authClient } from "@/lib/auth-client";
+import { createForm } from "@tanstack/solid-form";
+import { useNavigate } from "@tanstack/solid-router";
+import { z } from "zod";
+import { For } from "solid-js";
+
+export default function SignUpForm({
+  onSwitchToSignIn,
+}: {
+  onSwitchToSignIn: () => void;
+}) {
+  const navigate = useNavigate({
+    from: "/",
+  });
+
+  const form = createForm(() => ({
+    defaultValues: {
+      email: "",
+      password: "",
+      name: "",
+    },
+    onSubmit: async ({ value }) => {
+      await authClient.signUp.email(
+        {
+          email: value.email,
+          password: value.password,
+          name: value.name,
+        },
+        {
+          onSuccess: () => {
+            navigate({
+              to: "/dashboard",
+            });
+            console.log("Sign up successful");
+          },
+          onError: (error) => {
+            console.error(error.error.message);
+          },
+        },
+      );
+    },
+    validators: {
+      onSubmit: z.object({
+        name: z.string().min(2, "Name must be at least 2 characters"),
+        email: z.string().email("Invalid email address"),
+        password: z.string().min(8, "Password must be at least 8 characters"),
+      }),
+    },
+  }));
+
+  return (
+    <div class="mx-auto w-full mt-10 max-w-md p-6">
+      <h1 class="mb-6 text-center text-3xl font-bold">Create Account</h1>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+        class="space-y-4"
+      >
+        <div>
+          <form.Field name="name">
+            {(field) => (
+              <div class="space-y-2">
+                <label for={field().name}>Name</label>
+                <input
+                  id={field().name}
+                  name={field().name}
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                  class="w-full rounded border p-2"
+                />
+                <For each={field().state.meta.errors}>
+                  {(error) => (
+                    <p class="text-sm text-red-600">{error?.message}</p>
+                  )}
+                </For>
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="email">
+            {(field) => (
+              <div class="space-y-2">
+                <label for={field().name}>Email</label>
+                <input
+                  id={field().name}
+                  name={field().name}
+                  type="email"
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                  class="w-full rounded border p-2"
+                />
+                <For each={field().state.meta.errors}>
+                  {(error) => (
+                    <p class="text-sm text-red-600">{error?.message}</p>
+                  )}
+                </For>
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <div>
+          <form.Field name="password">
+            {(field) => (
+              <div class="space-y-2">
+                <label for={field().name}>Password</label>
+                <input
+                  id={field().name}
+                  name={field().name}
+                  type="password"
+                  value={field().state.value}
+                  onBlur={field().handleBlur}
+                  onInput={(e) => field().handleChange(e.currentTarget.value)}
+                  class="w-full rounded border p-2"
+                />
+                <For each={field().state.meta.errors}>
+                  {(error) => (
+                    <p class="text-sm text-red-600">{error?.message}</p>
+                  )}
+                </For>
+              </div>
+            )}
+          </form.Field>
+        </div>
+
+        <form.Subscribe>
+          {(state) => (
+            <button
+              type="submit"
+              class="w-full rounded bg-indigo-600 p-2 text-white hover:bg-indigo-700 disabled:opacity-50"
+              disabled={!state().canSubmit || state().isSubmitting}
+            >
+              {state().isSubmitting ? "Submitting..." : "Sign Up"}
+            </button>
+          )}
+        </form.Subscribe>
+      </form>
+
+      <div class="mt-4 text-center">
+        <button
+          type="button"
+          onClick={onSwitchToSignIn}
+          class="text-sm text-indigo-600 hover:text-indigo-800 hover:underline"
+        >
+          Already have an account? Sign In
+        </button>
+      </div>
+    </div>
+  );
+}

apps/cli/templates/auth/web/solid/src/components/user-menu.tsx

@@ -0,0 +1,54 @@
+import { authClient } from "@/lib/auth-client";
+import { useNavigate, Link } from "@tanstack/solid-router";
+import { createSignal, Show } from "solid-js";
+
+export default function UserMenu() {
+  const navigate = useNavigate();
+  const session = authClient.useSession();
+  const [isMenuOpen, setIsMenuOpen] = createSignal(false);
+
+  return (
+    <div class="relative inline-block text-left">
+      <Show when={session().isPending}>
+        <div class="h-9 w-24 animate-pulse rounded" />
+      </Show>
+
+      <Show when={!session().isPending && !session().data}>
+        <Link to="/login" class="inline-block border rounded px-4  text-sm">
+          Sign In
+        </Link>
+      </Show>
+
+      <Show when={!session().isPending && session().data}>
+        <button
+          type="button"
+          class="inline-block border rounded px-4  text-sm"
+          onClick={() => setIsMenuOpen(!isMenuOpen())}
+        >
+          {session().data?.user.name}
+        </button>
+
+        <Show when={isMenuOpen()}>
+          <div class="absolute right-0 mt-2 w-56 rounded p-1 shadow-sm">
+            <div class="px-4  text-sm">{session().data?.user.email}</div>
+            <button
+              class="mt-1 w-full border rounded px-4  text-center text-sm"
+              onClick={() => {
+                setIsMenuOpen(false);
+                authClient.signOut({
+                  fetchOptions: {
+                    onSuccess: () => {
+                      navigate({ to: "/" });
+                    },
+                  },
+                });
+              }}
+            >
+              Sign Out
+            </button>
+          </div>
+        </Show>
+      </Show>
+    </div>
+  );
+}

apps/cli/templates/auth/web/solid/src/lib/auth-client.ts

@@ -0,0 +1,5 @@
+import { createAuthClient } from "better-auth/solid";
+
+export const authClient = createAuthClient({
+  baseURL: import.meta.env.VITE_SERVER_URL,
+});

apps/cli/templates/auth/web/solid/src/routes/dashboard.tsx

@@ -0,0 +1,38 @@
+import { authClient } from "@/lib/auth-client";
+import { orpc } from "@/utils/orpc";
+import { useQuery } from "@tanstack/solid-query";
+import { createFileRoute } from "@tanstack/solid-router";
+import { createEffect, Show } from "solid-js";
+
+export const Route = createFileRoute("/dashboard")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const session = authClient.useSession();
+  const navigate = Route.useNavigate();
+
+  const privateData = useQuery(() => orpc.privateData.queryOptions());
+
+  createEffect(() => {
+    if (!session().data && !session().isPending) {
+      navigate({
+        to: "/login",
+      });
+    }
+  });
+
+  return (
+    <div>
+      <Show when={session().isPending}>
+        <div>Loading...</div>
+      </Show>
+
+      <Show when={!session().isPending && session().data}>
+        <h1>Dashboard</h1>
+        <p>Welcome {session().data?.user.name}</p>
+        <p>privateData: {privateData.data?.message}</p>
+      </Show>
+    </div>
+  );
+}

apps/cli/templates/auth/web/solid/src/routes/login.tsx

@@ -0,0 +1,23 @@
+import SignInForm from "@/components/sign-in-form";
+import SignUpForm from "@/components/sign-up-form";
+import { createFileRoute } from "@tanstack/solid-router";
+import { createSignal, Match, Switch } from "solid-js";
+
+export const Route = createFileRoute("/login")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const [showSignIn, setShowSignIn] = createSignal(false);
+
+  return (
+    <Switch>
+      <Match when={showSignIn()}>
+        <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+      </Match>
+      <Match when={!showSignIn()}>
+        <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+      </Match>
+    </Switch>
+  );
+}

apps/cli/templates/db/prisma/sqlite/prisma/schema/schema.prisma

@@ -6,5 +6,5 @@ generator client {
 
 datasource db {
   provider = "sqlite"
-  url      = "file:../local.db"
+  url      = env("DATABASE_URL")
 }

apps/cli/templates/examples/todo/web/solid/src/routes/todos.tsx

@@ -0,0 +1,132 @@
+import { createFileRoute } from "@tanstack/solid-router";
+import { Loader2, Trash2 } from "lucide-solid";
+import { createSignal, For, Show } from "solid-js";
+import { orpc } from "@/utils/orpc";
+import { useQuery, useMutation } from "@tanstack/solid-query";
+
+export const Route = createFileRoute("/todos")({
+  component: TodosRoute,
+});
+
+function TodosRoute() {
+  const [newTodoText, setNewTodoText] = createSignal("");
+
+  const todos = useQuery(() => orpc.todo.getAll.queryOptions());
+
+  const createMutation = useMutation(() =>
+    orpc.todo.create.mutationOptions({
+      onSuccess: () => {
+        todos.refetch();
+        setNewTodoText("");
+      },
+    }),
+  );
+
+  const toggleMutation = useMutation(() =>
+    orpc.todo.toggle.mutationOptions({
+      onSuccess: () => todos.refetch(),
+    }),
+  );
+
+  const deleteMutation = useMutation(() =>
+    orpc.todo.delete.mutationOptions({
+      onSuccess: () => todos.refetch(),
+    }),
+  );
+
+  const handleAddTodo = (e: Event) => {
+    e.preventDefault();
+    if (newTodoText().trim()) {
+      createMutation.mutate({ text: newTodoText() });
+    }
+  };
+
+  const handleToggleTodo = (id: number, completed: boolean) => {
+    toggleMutation.mutate({ id, completed: !completed });
+  };
+
+  const handleDeleteTodo = (id: number) => {
+    deleteMutation.mutate({ id });
+  };
+
+  return (
+    <div class="mx-auto w-full max-w-md py-10">
+      <div class="rounded-lg border p-6 shadow-sm">
+        <div class="mb-4">
+          <h2 class="text-xl font-semibold">Todo List</h2>
+          <p class="text-sm">Manage your tasks efficiently</p>
+        </div>
+        <div>
+          <form
+            onSubmit={handleAddTodo}
+            class="mb-6 flex items-center space-x-2"
+          >
+            <input
+              type="text"
+              value={newTodoText()}
+              onInput={(e) => setNewTodoText(e.currentTarget.value)}
+              placeholder="Add a new task..."
+              disabled={createMutation.isPending}
+              class="w-full rounded-md border p-2 text-sm"
+            />
+            <button
+              type="submit"
+              disabled={createMutation.isPending || !newTodoText().trim()}
+              class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white disabled:opacity-50"
+            >
+              <Show when={createMutation.isPending} fallback="Add">
+                <Loader2 class="h-4 w-4 animate-spin" />
+              </Show>
+            </button>
+          </form>
+
+          <Show when={todos.isLoading}>
+            <div class="flex justify-center py-4">
+              <Loader2 class="h-6 w-6 animate-spin" />
+            </div>
+          </Show>
+
+          <Show when={!todos.isLoading && todos.data?.length === 0}>
+            <p class="py-4 text-center">No todos yet. Add one above!</p>
+          </Show>
+
+          <Show when={!todos.isLoading}>
+            <ul class="space-y-2">
+              <For each={todos.data}>
+                {(todo) => (
+                  <li class="flex items-center justify-between rounded-md border p-2">
+                    <div class="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        checked={todo.completed}
+                        onChange={() =>
+                          handleToggleTodo(todo.id, todo.completed)
+                        }
+                        id={`todo-${todo.id}`}
+                        class="h-4 w-4"
+                      />
+                      <label
+                        for={`todo-${todo.id}`}
+                        class={todo.completed ? "line-through" : ""}
+                      >
+                        {todo.text}
+                      </label>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => handleDeleteTodo(todo.id)}
+                      aria-label="Delete todo"
+                      class="ml-2 rounded-md p-1"
+                    >
+                      <Trash2 class="h-4 w-4" />
+                    </button>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/cli/templates/frontend/react/react-router/vite.config.ts.hbs

@@ -1,4 +1,3 @@
-{{! Import VitePWA only if 'pwa' addon is selected }}
 {{#if (includes addons "pwa")}}
 import { VitePWA } from "vite-plugin-pwa";
 {{/if}}
@@ -12,24 +11,21 @@ export default defineConfig({
     tailwindcss(),
     reactRouter(),
     tsconfigPaths(),
-    {{! Add VitePWA plugin config only if 'pwa' addon is selected }}
     {{#if (includes addons "pwa")}}
     VitePWA({
       registerType: "autoUpdate",
       manifest: {
-        // Use context variables for better naming
         name: "{{projectName}}",
         short_name: "{{projectName}}",
         description: "{{projectName}} - PWA Application",
         theme_color: "#0c0c0c",
-        // Add more manifest options as needed
       },
       pwaAssets: {
-        disabled: false, // Set to false to enable asset generation
-        config: true,    // Use pwa-assets.config.ts
+        disabled: false,
+        config: true,
       },
       devOptions: {
-        enabled: true, // Enable PWA features in dev mode
+        enabled: true,
       },
     }),
     {{/if}}

apps/cli/templates/frontend/react/tanstack-router/vite.config.ts.hbs

@@ -16,19 +16,17 @@ export default defineConfig({
     VitePWA({
       registerType: "autoUpdate",
       manifest: {
-        // Use context variables for better naming
         name: "{{projectName}}",
         short_name: "{{projectName}}",
         description: "{{projectName}} - PWA Application",
         theme_color: "#0c0c0c",
-        // Add more manifest options as needed
       },
       pwaAssets: {
-        disabled: false, // Set to false to enable asset generation
-        config: true,    // Use pwa-assets.config.ts
+        disabled: false,
+        config: true,
       },
       devOptions: {
-        enabled: true, // Enable PWA features in dev mode
+        enabled: true,
       },
     }),
     {{/if}}

apps/cli/templates/frontend/solid/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.env
+.env.*

apps/cli/templates/frontend/solid/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/cli/templates/frontend/solid/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3001",
+    "build": "vite build && tsc",
+    "serve": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@orpc/client": "^1.1.1",
+    "@orpc/server": "^1.1.1",
+    "@orpc/solid-query": "^1.1.1",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/router-plugin": "^1.109.2",
+    "@tanstack/solid-form": "^1.9.0",
+    "@tanstack/solid-query": "^5.75.0",
+    "@tanstack/solid-query-devtools": "^5.75.0",
+    "@tanstack/solid-router": "^1.110.0",
+    "@tanstack/solid-router-devtools": "^1.109.2",
+    "better-auth": "^1.2.7",
+    "lucide-solid": "^0.507.0",
+    "solid-js": "^1.9.4",
+    "tailwindcss": "^4.0.6",
+    "zod": "^3.24.3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.11",
+    "vite-plugin-solid": "^2.11.2"
+  }
+}

apps/cli/templates/frontend/solid/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

apps/cli/templates/frontend/solid/src/components/header.tsx.hbs

@@ -0,0 +1,38 @@
+import { Link } from "@tanstack/solid-router";
+{{#if auth}}
+import UserMenu from "./user-menu";
+{{/if}}
+import { For } from "solid-js";
+
+export default function Header() {
+  const links = [
+    { to: "/", label: "Home" },
+    {{#if auth}}
+    { to: "/dashboard", label: "Dashboard" },
+    {{/if}}
+    {{#if (includes examples "todo")}}
+    { to: "/todos", label: "Todos" },
+    {{/if}}
+    {{#if (includes examples "ai")}}
+    { to: "/ai", label: "AI Chat" },
+    {{/if}}
+  ];
+
+  return (
+    <div>
+      <div class="flex flex-row items-center justify-between px-2 py-1">
+        <nav class="flex gap-4 text-lg">
+          <For each={links}>
+            {(link) => <Link to={link.to}>{link.label}</Link>}
+          </For>
+        </nav>
+        <div class="flex items-center gap-2">
+          {{#if auth}}
+          <UserMenu />
+          {{/if}}
+        </div>
+      </div>
+      <hr />
+    </div>
+  );
+}

apps/cli/templates/frontend/solid/src/components/loader.tsx

@@ -0,0 +1,9 @@
+import { Loader2 } from "lucide-solid";
+
+export default function Loader() {
+  return (
+    <div class="flex h-full items-center justify-center pt-8">
+      <Loader2 class="animate-spin" />
+    </div>
+  );
+}

apps/cli/templates/frontend/solid/src/main.tsx.hbs

@@ -0,0 +1,32 @@
+import { RouterProvider, createRouter } from "@tanstack/solid-router";
+import { render } from "solid-js/web";
+import { routeTree } from "./routeTree.gen";
+import "./styles.css";
+import { QueryClientProvider } from "@tanstack/solid-query";
+import { queryClient } from "./utils/orpc";
+
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+  scrollRestoration: true,
+  defaultPreloadStaleTime: 0,
+});
+
+declare module "@tanstack/solid-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  );
+}
+
+const rootElement = document.getElementById("app");
+if (rootElement) {
+  render(() => <App />, rootElement);
+}

apps/cli/templates/frontend/solid/src/routes/__root.tsx.hbs

@@ -0,0 +1,21 @@
+import Header from "@/components/header";
+import { Outlet, createRootRouteWithContext } from "@tanstack/solid-router";
+import { TanStackRouterDevtools } from "@tanstack/solid-router-devtools";
+import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
+
+export const Route = createRootRouteWithContext()({
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <>
+      <div class="grid grid-rows-[auto_1fr] h-svh">
+        <Header />
+        <Outlet />
+      </div>
+      <SolidQueryDevtools />
+      <TanStackRouterDevtools />
+    </>
+  );
+}

apps/cli/templates/frontend/solid/src/routes/index.tsx.hbs

@@ -0,0 +1,65 @@
+import { createFileRoute } from "@tanstack/solid-router";
+import { useQuery } from "@tanstack/solid-query";
+import { orpc } from "../utils/orpc";
+import { Match, Switch } from "solid-js";
+
+export const Route = createFileRoute("/")({
+  component: App,
+});
+
+const TITLE_TEXT = `
+ ██████╗ ███████╗████████╗████████╗███████╗██████╗
+ ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
+ ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
+ ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
+ ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
+ ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
+
+ ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
+ ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
+    ██║       ███████╗   ██║   ███████║██║     █████╔╝
+    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
+    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
+    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
+ `;
+
+function App() {
+  const healthCheck = useQuery(() => orpc.healthCheck.queryOptions());
+
+  return (
+    <div class="container mx-auto max-w-3xl px-4 py-2">
+      <pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
+      <div class="grid gap-6">
+        <section class="rounded-lg border p-4">
+          <h2 class="mb-2 font-medium">API Status</h2>
+          <Switch>
+            <Match when={healthCheck.isPending}>
+              <div class="flex items-center gap-2">
+                <div class="h-2 w-2 rounded-full bg-gray-500 animate-pulse" />{" "}
+                <span class="text-sm text-muted-foreground">Checking...</span>
+              </div>
+            </Match>
+            <Match when={healthCheck.isError}>
+              <div class="flex items-center gap-2">
+                <div class="h-2 w-2 rounded-full bg-red-500" />
+                <span class="text-sm text-muted-foreground">Disconnected</span>
+              </div>
+            </Match>
+            <Match when={healthCheck.isSuccess}>
+              <div class="flex items-center gap-2">
+                <div
+                  class={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+                />
+                <span class="text-sm text-muted-foreground">
+                  {healthCheck.data
+                    ? "Connected"
+                    : "Disconnected (Success but no data)"}
+                </span>
+              </div>
+            </Match>
+          </Switch>
+        </section>
+      </div>
+    </div>
+  );
+}

apps/cli/templates/frontend/solid/src/routes/todos.tsx

@@ -0,0 +1,132 @@
+import { createFileRoute } from "@tanstack/solid-router";
+import { Loader2, Trash2 } from "lucide-solid";
+import { createSignal, For, Show } from "solid-js";
+import { orpc } from "@/utils/orpc";
+import { useQuery, useMutation } from "@tanstack/solid-query";
+
+export const Route = createFileRoute("/todos")({
+  component: TodosRoute,
+});
+
+function TodosRoute() {
+  const [newTodoText, setNewTodoText] = createSignal("");
+
+  const todos = useQuery(() => orpc.todo.getAll.queryOptions());
+
+  const createMutation = useMutation(() =>
+    orpc.todo.create.mutationOptions({
+      onSuccess: () => {
+        todos.refetch();
+        setNewTodoText("");
+      },
+    }),
+  );
+
+  const toggleMutation = useMutation(() =>
+    orpc.todo.toggle.mutationOptions({
+      onSuccess: () => todos.refetch(),
+    }),
+  );
+
+  const deleteMutation = useMutation(() =>
+    orpc.todo.delete.mutationOptions({
+      onSuccess: () => todos.refetch(),
+    }),
+  );
+
+  const handleAddTodo = (e: Event) => {
+    e.preventDefault();
+    if (newTodoText().trim()) {
+      createMutation.mutate({ text: newTodoText() });
+    }
+  };
+
+  const handleToggleTodo = (id: number, completed: boolean) => {
+    toggleMutation.mutate({ id, completed: !completed });
+  };
+
+  const handleDeleteTodo = (id: number) => {
+    deleteMutation.mutate({ id });
+  };
+
+  return (
+    <div class="mx-auto w-full max-w-md py-10">
+      <div class="rounded-lg border p-6 shadow-sm">
+        <div class="mb-4">
+          <h2 class="text-xl font-semibold">Todo List</h2>
+          <p class="text-sm">Manage your tasks efficiently</p>
+        </div>
+        <div>
+          <form
+            onSubmit={handleAddTodo}
+            class="mb-6 flex items-center space-x-2"
+          >
+            <input
+              type="text"
+              value={newTodoText()}
+              onInput={(e) => setNewTodoText(e.currentTarget.value)}
+              placeholder="Add a new task..."
+              disabled={createMutation.isPending}
+              class="w-full rounded-md border p-2 text-sm"
+            />
+            <button
+              type="submit"
+              disabled={createMutation.isPending || !newTodoText().trim()}
+              class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white disabled:opacity-50"
+            >
+              <Show when={createMutation.isPending} fallback="Add">
+                <Loader2 class="h-4 w-4 animate-spin" />
+              </Show>
+            </button>
+          </form>
+
+          <Show when={todos.isLoading}>
+            <div class="flex justify-center py-4">
+              <Loader2 class="h-6 w-6 animate-spin" />
+            </div>
+          </Show>
+
+          <Show when={!todos.isLoading && todos.data?.length === 0}>
+            <p class="py-4 text-center">No todos yet. Add one above!</p>
+          </Show>
+
+          <Show when={!todos.isLoading}>
+            <ul class="space-y-2">
+              <For each={todos.data}>
+                {(todo) => (
+                  <li class="flex items-center justify-between rounded-md border p-2">
+                    <div class="flex items-center space-x-2">
+                      <input
+                        type="checkbox"
+                        checked={todo.completed}
+                        onChange={() =>
+                          handleToggleTodo(todo.id, todo.completed)
+                        }
+                        id={`todo-${todo.id}`}
+                        class="h-4 w-4"
+                      />
+                      <label
+                        for={`todo-${todo.id}`}
+                        class={todo.completed ? "line-through" : ""}
+                      >
+                        {todo.text}
+                      </label>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => handleDeleteTodo(todo.id)}
+                      aria-label="Delete todo"
+                      class="ml-2 rounded-md p-1"
+                    >
+                      <Trash2 class="h-4 w-4" />
+                    </button>
+                  </li>
+                )}
+              </For>
+            </ul>
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/cli/templates/frontend/solid/src/styles.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+body {
+  @apply bg-neutral-950 text-neutral-100;
+}

apps/cli/templates/frontend/solid/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "rootDirs": ["."],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

apps/cli/templates/frontend/solid/vite.config.js.hbs

@@ -0,0 +1,39 @@
+import { defineConfig } from "vite";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import solidPlugin from "vite-plugin-solid";
+import tailwindcss from "@tailwindcss/vite";
+import path from "node:path";
+{{#if (includes addons "pwa")}}
+import { VitePWA } from "vite-plugin-pwa";
+{{/if}}
+
+export default defineConfig({
+  plugins: [
+    TanStackRouterVite({ target: "solid", autoCodeSplitting: true }),
+    solidPlugin(),
+    tailwindcss(),
+    {{#if (includes addons "pwa")}}
+    VitePWA({
+      registerType: "autoUpdate",
+      manifest: {
+        name: "{{projectName}}",
+        short_name: "{{projectName}}",
+        description: "{{projectName}} - PWA Application",
+        theme_color: "#0c0c0c",
+      },
+      pwaAssets: {
+        disabled: false,
+        config: true,
+      },
+      devOptions: {
+        enabled: true,
+      },
+    }),
+    {{/if}}
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});