Add spinner feedback to database setup workflows

.changeset/weak-results-film.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+Add spinner feedback to database setup workflows

apps/cli/src/helpers/mongodb-atlas-setup.ts

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { cancel, isCancel, log, text } from "@clack/prompts";
+import { cancel, isCancel, log, spinner, text } from "@clack/prompts";
 import { execa } from "execa";
 import fs from "fs-extra";
 import pc from "picocolors";
@@ -10,7 +10,21 @@ type MongoDBConfig = {
 };
 
 async function checkAtlasCLI(): Promise<boolean> {
-	return commandExists("atlas");
+	const s = spinner();
+	s.start("Checking for MongoDB Atlas CLI");
+
+	try {
+		const exists = await commandExists("atlas");
+		s.stop(
+			exists
+				? "MongoDB Atlas CLI found"
+				: pc.yellow("MongoDB Atlas CLI not found"),
+		);
+		return exists;
+	} catch (error) {
+		s.stop(pc.red("Error checking for MongoDB Atlas CLI"));
+		return false;
+	}
 }
 
 async function initMongoDBAtlas(
@@ -29,20 +43,23 @@ async function initMongoDBAtlas(
 			return null;
 		}
 
-		log.info(pc.yellow("Setting up MongoDB Atlas..."));
+		log.info(pc.blue("Running MongoDB Atlas setup..."));
 
 		await execa("atlas", ["deployments", "setup"], {
 			cwd: serverDir,
 			stdio: "inherit",
 		});
 
+		log.info(pc.green("Atlas setup complete!"));
+
 		const connectionString = await text({
-			message: "Paste your complete MongoDB connection string:",
+			message: "Enter your MongoDB connection string:",
-			placeholder: "mongodb://USERNAME:PASSWORD@HOST/DATABASE",
+			placeholder:
+				"mongodb+srv://username:password@cluster.mongodb.net/database",
 			validate(value) {
 				if (!value) return "Please enter a connection string";
 				if (!value.startsWith("mongodb")) {
-					return "URL should start with mongodb";
+					return "URL should start with mongodb:// or mongodb+srv://";
 				}
 			},
 		});
@@ -64,9 +81,11 @@ async function initMongoDBAtlas(
 }
 
 async function writeEnvFile(projectDir: string, config?: MongoDBConfig) {
+	try {
 		const envPath = path.join(projectDir, "apps/server", ".env");
-	let envContent = "";
+		await fs.ensureDir(path.dirname(envPath));
 
+		let envContent = "";
 		if (await fs.pathExists(envPath)) {
 			envContent = await fs.readFile(envPath, "utf8");
 		}
@@ -85,36 +104,65 @@ async function writeEnvFile(projectDir: string, config?: MongoDBConfig) {
 		}
 
 		await fs.writeFile(envPath, envContent.trim());
+	} catch (error) {
+		log.error("Failed to update environment configuration");
+		throw error;
+	}
 }
 
 function displayManualSetupInstructions() {
-	log.info(`MongoDB Atlas Setup:
+	log.info(`
+${pc.green("MongoDB Atlas Manual Setup Instructions:")}
 
-1. Install Atlas CLI: https://www.mongodb.com/docs/atlas/cli/stable/install-atlas-cli/
+1. Install Atlas CLI:
-2. Run 'atlas deployments setup' and follow prompts
+   ${pc.blue("https://www.mongodb.com/docs/atlas/cli/stable/install-atlas-cli/")}
-3. Get your connection string from the output
+
-4. Format: mongodb+srv://USERNAME:PASSWORD@CLUSTER.mongodb.net/DATABASE_NAME
+2. Run the following command and follow the prompts:
-5. Add to .env as DATABASE_URL="your_connection_string"`);
+   ${pc.blue("atlas deployments setup")}
+
+3. Get your connection string from the Atlas dashboard:
+   Format: ${pc.dim("mongodb+srv://USERNAME:PASSWORD@CLUSTER.mongodb.net/DATABASE_NAME")}
+
+4. Add the connection string to your .env file:
+   ${pc.dim('DATABASE_URL="your_connection_string"')}
+`);
 }
 
 export async function setupMongoDBAtlas(projectDir: string) {
-	const serverDir = path.join(projectDir, "apps/server");
+	const mainSpinner = spinner();
+	mainSpinner.start("Setting up MongoDB Atlas");
 
+	const serverDir = path.join(projectDir, "apps/server");
 	try {
+		await fs.ensureDir(serverDir);
+
+		mainSpinner.stop("Starting MongoDB Atlas setup");
+
 		const config = await initMongoDBAtlas(serverDir);
 
 		if (config) {
 			await writeEnvFile(projectDir, config);
 			log.success(
-				pc.green("MongoDB Atlas connection string saved to .env file!"),
+				pc.green(
+					"MongoDB Atlas setup complete! Connection saved to .env file.",
+				),
 			);
 		} else {
+			log.warn(pc.yellow("Falling back to local MongoDB configuration"));
 			await writeEnvFile(projectDir);
 			displayManualSetupInstructions();
 		}
 	} catch (error) {
-		log.error(pc.red(`Error during MongoDB Atlas setup: ${error}`));
+		mainSpinner.stop(pc.red("MongoDB Atlas setup failed"));
+		log.error(
+			pc.red(
+				`Error during MongoDB Atlas setup: ${error instanceof Error ? error.message : String(error)}`,
+			),
+		);
+
+		try {
 			await writeEnvFile(projectDir);
 			displayManualSetupInstructions();
+		} catch {}
 	}
 }

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

@@ -47,7 +47,7 @@ async function executeNeonCommand(
 
 		if (s) s.start(spinnerText);
 		const result = await execa(cmd, cmdArgs);
-		if (s) s.stop();
+		if (s) s.stop(spinnerText);
 
 		return result;
 	} catch (error) {
@@ -58,11 +58,15 @@ async function executeNeonCommand(
 
 async function isNeonAuthenticated(packageManager: string) {
 	try {
-		const { stdout } = await executeNeonCommand(packageManager, [
+		const { cmd, cmdArgs } = buildNeonCommand(packageManager, [
 			"projects",
 			"list",
 		]);
-		return !stdout.includes("not authenticated") && !stdout.includes("error");
+		const result = await execa(cmd, cmdArgs);
+		return (
+			!result.stdout.includes("not authenticated") &&
+			!result.stdout.includes("error")
+		);
 	} catch {
 		return false;
 	}
@@ -147,11 +151,14 @@ export async function setupNeonPostgres(
 	projectDir: string,
 	packageManager: ProjectPackageManager,
 ) {
-	const s = spinner();
+	const setupSpinner = spinner();
+	setupSpinner.start("Setting up Neon PostgreSQL");
 
 	try {
 		const isAuthenticated = await isNeonAuthenticated(packageManager);
 
+		setupSpinner.stop("Setting up Neon PostgreSQL");
+
 		if (!isAuthenticated) {
 			log.info("Please authenticate with Neon to continue:");
 			await authenticateWithNeon(packageManager);
@@ -180,14 +187,20 @@ export async function setupNeonPostgres(
 			);
 		}
 
+		const finalSpinner = spinner();
+		finalSpinner.start("Configuring database connection");
+
 		await fs.ensureDir(path.join(projectDir, "apps/server"));
 		await writeEnvFile(projectDir, config);
-		log.success("Neon database configured successfully!");
+
+		finalSpinner.stop("Neon database configured successfully!");
 	} catch (error) {
-		s.stop(pc.red("Neon PostgreSQL setup failed"));
+		setupSpinner.stop(pc.red("Neon PostgreSQL setup failed"));
+
 		if (error instanceof Error) {
 			log.error(pc.red(error.message));
 		}
+
 		await writeEnvFile(projectDir);
 		displayManualSetupInstructions();
 	}

apps/cli/src/helpers/prisma-postgres-setup.ts

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { cancel, isCancel, log, password } from "@clack/prompts";
+import { cancel, isCancel, log, password, spinner } from "@clack/prompts";
 import { execa } from "execa";
 import fs from "fs-extra";
 import pc from "picocolors";
@@ -14,8 +14,9 @@ async function initPrismaDatabase(
 	serverDir: string,
 	packageManager: ProjectPackageManager,
 ): Promise<PrismaConfig | null> {
+	const s = spinner();
 	try {
-		log.info(pc.blue("Initializing Prisma PostgreSQL"));
+		s.start("Initializing Prisma PostgreSQL");
 
 		const prismaDir = path.join(serverDir, "prisma");
 		await fs.ensureDir(prismaDir);
@@ -27,6 +28,8 @@ async function initPrismaDatabase(
 					? "pnpm dlx"
 					: "bunx";
 
+		s.stop("Initializing Prisma. Follow the prompts below:");
+
 		await execa(initCmd, ["prisma", "init", "--db"], {
 			cwd: serverDir,
 			stdio: "inherit",
@@ -57,17 +60,20 @@ async function initPrismaDatabase(
 			databaseUrl: databaseUrl as string,
 		};
 	} catch (error) {
+		s.stop(pc.red("Failed to initialize Prisma PostgreSQL"));
 		if (error instanceof Error) {
-			log.error(pc.red(error.message));
+			log.error(error.message);
 		}
 		return null;
 	}
 }
 
 async function writeEnvFile(projectDir: string, config?: PrismaConfig) {
+	try {
 		const envPath = path.join(projectDir, "apps/server", ".env");
-	let envContent = "";
+		await fs.ensureDir(path.dirname(envPath));
 
+		let envContent = "";
 		if (await fs.pathExists(envPath)) {
 			envContent = await fs.readFile(envPath, "utf8");
 		}
@@ -86,6 +92,10 @@ async function writeEnvFile(projectDir: string, config?: PrismaConfig) {
 		}
 
 		await fs.writeFile(envPath, envContent.trim());
+	} catch (error) {
+		log.error("Failed to update environment configuration");
+		throw error;
+	}
 }
 
 function displayManualSetupInstructions() {
@@ -99,33 +109,6 @@ function displayManualSetupInstructions() {
 DATABASE_URL="your_database_url"`);
 }
 
-export async function setupPrismaPostgres(
-	projectDir: string,
-	packageManager: ProjectPackageManager = "npm",
-) {
-	const serverDir = path.join(projectDir, "apps/server");
-
-	try {
-		const config = await initPrismaDatabase(serverDir, packageManager);
-
-		if (config) {
-			await writeEnvFile(projectDir, config);
-			await addPrismaAccelerateExtension(serverDir);
-			log.success(
-				pc.green("Prisma PostgreSQL database configured successfully!"),
-			);
-		} else {
-			await writeEnvFile(projectDir);
-			displayManualSetupInstructions();
-		}
-	} catch (error) {
-		log.error(pc.red(`Error during Prisma PostgreSQL setup: ${error}`));
-		await writeEnvFile(projectDir);
-		displayManualSetupInstructions();
-		log.info("Setup completed with manual configuration required.");
-	}
-}
-
 async function addPrismaAccelerateExtension(serverDir: string) {
 	try {
 		addPackageDependency({
@@ -159,9 +142,56 @@ export default prisma;
 				await fs.writeFile(dbFilePath, dbFileContent);
 			}
 		}
+		return true;
 	} catch (error) {
 		log.warn(
 			pc.yellow("Could not add Prisma Accelerate extension automatically"),
 		);
+		return false;
+	}
+}
+
+export async function setupPrismaPostgres(
+	projectDir: string,
+	packageManager: ProjectPackageManager = "npm",
+) {
+	const serverDir = path.join(projectDir, "apps/server");
+	const s = spinner();
+	s.start("Setting up Prisma PostgreSQL");
+
+	try {
+		await fs.ensureDir(serverDir);
+
+		s.stop("Starting Prisma setup");
+
+		const config = await initPrismaDatabase(serverDir, packageManager);
+
+		if (config) {
+			await writeEnvFile(projectDir, config);
+			await addPrismaAccelerateExtension(serverDir);
+			log.success(
+				pc.green("Prisma PostgreSQL database configured successfully!"),
+			);
+		} else {
+			const fallbackSpinner = spinner();
+			fallbackSpinner.start("Setting up fallback configuration");
+			await writeEnvFile(projectDir);
+			fallbackSpinner.stop("Manual setup required");
+			displayManualSetupInstructions();
+		}
+	} catch (error) {
+		s.stop(pc.red("Prisma PostgreSQL setup failed"));
+		log.error(
+			pc.red(
+				`Error during Prisma PostgreSQL setup: ${error instanceof Error ? error.message : String(error)}`,
+			),
+		);
+
+		try {
+			await writeEnvFile(projectDir);
+			displayManualSetupInstructions();
+		} catch {}
+
+		log.info("Setup completed with manual configuration required.");
 	}
 }

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

@@ -69,7 +69,7 @@ async function installTursoCLI(isMac: boolean) {
 		return true;
 	} catch (error) {
 		if (error instanceof Error && error.message.includes("User force closed")) {
-			s.stop();
+			s.stop("Turso CLI installation cancelled");
 			log.warn(pc.yellow("Turso CLI installation cancelled by user"));
 			throw new Error("Installation cancelled");
 		}
@@ -79,11 +79,14 @@ async function installTursoCLI(isMac: boolean) {
 }
 
 async function getTursoGroups(): Promise<TursoGroup[]> {
+	const s = spinner();
 	try {
+		s.start("Fetching Turso groups...");
 		const { stdout } = await $`turso group list`;
 		const lines = stdout.trim().split("\n");
 
 		if (lines.length <= 1) {
+			s.stop("No Turso groups found");
 			return [];
 		}
 
@@ -92,8 +95,10 @@ async function getTursoGroups(): Promise<TursoGroup[]> {
 			return { name, locations, version, status };
 		});
 
+		s.stop(`Found ${groups.length} Turso groups`);
 		return groups;
 	} catch (error) {
+		s.stop(pc.red("Error fetching Turso groups"));
 		console.error("Error fetching Turso groups:", error);
 		return [];
 	}
@@ -107,6 +112,7 @@ async function selectTursoGroup(): Promise<string | null> {
 	}
 
 	if (groups.length === 1) {
+		log.info(`Using the only available group: ${pc.blue(groups[0].name)}`);
 		return groups[0].name;
 	}
 
@@ -132,26 +138,43 @@ async function createTursoDatabase(
 	dbName: string,
 	groupName: string | null,
 ): Promise<TursoConfig> {
+	const s = spinner();
+
 	try {
+		s.start(
+			`Creating Turso database "${dbName}"${groupName ? ` in group "${groupName}"` : ""}...`,
+		);
+
 		if (groupName) {
 			await $`turso db create ${dbName} --group ${groupName}`;
 		} else {
 			await $`turso db create ${dbName}`;
 		}
+
+		s.stop(`Created database "${dbName}"`);
 	} catch (error) {
+		s.stop(pc.red(`Failed to create database "${dbName}"`));
 		if (error instanceof Error && error.message.includes("already exists")) {
 			throw new Error("DATABASE_EXISTS");
 		}
 		throw error;
 	}
 
+	s.start("Retrieving database connection details...");
+	try {
 		const { stdout: dbUrl } = await $`turso db show ${dbName} --url`;
 		const { stdout: authToken } = await $`turso db tokens create ${dbName}`;
 
+		s.stop("Retrieved database connection details");
+
 		return {
 			dbUrl: dbUrl.trim(),
 			authToken: authToken.trim(),
 		};
+	} catch (error) {
+		s.stop(pc.red("Failed to retrieve database connection details"));
+		throw error;
+	}
 }
 
 async function writeEnvFile(projectDir: string, config?: TursoConfig) {
@@ -162,6 +185,7 @@ DATABASE_AUTH_TOKEN="${config.authToken}"`
 		: `DATABASE_URL=
 DATABASE_AUTH_TOKEN=`;
 
+	await fs.ensureDir(path.dirname(envPath));
 	await fs.writeFile(envPath, envContent);
 }
 
@@ -181,9 +205,16 @@ export async function setupTurso(
 	projectDir: string,
 	shouldSetupTurso: boolean,
 ) {
+	const setupSpinner = spinner();
+	setupSpinner.start("Setting up Turso database");
+
+	try {
 		if (!shouldSetupTurso) {
+			setupSpinner.stop("Skipping Turso setup");
 			await writeEnvFile(projectDir);
-		log.info(pc.blue("Skipping Turso setup. Setting up empty configuration."));
+			log.info(
+				pc.blue("Skipping Turso setup. Setting up empty configuration."),
+			);
 			displayManualSetupInstructions();
 			return;
 		}
@@ -193,13 +224,15 @@ export async function setupTurso(
 		const canInstallCLI = platform !== "win32";
 
 		if (!canInstallCLI) {
+			setupSpinner.stop(pc.yellow("Turso setup not supported on Windows"));
 			log.warn(pc.yellow("Automatic Turso setup is not supported on Windows."));
 			await writeEnvFile(projectDir);
 			displayManualSetupInstructions();
 			return;
 		}
 
-	try {
+		setupSpinner.stop("Checking Turso CLI");
+
 		const isCliInstalled = await isTursoInstalled();
 
 		if (!isCliInstalled) {
@@ -247,28 +280,32 @@ export async function setupTurso(
 			}
 
 			dbName = dbNameResponse as string;
-			const s = spinner();
 
 			try {
-				s.start(
-					`Creating Turso database "${dbName}"${selectedGroup ? ` in group "${selectedGroup}"` : ""}...`,
-				);
 				const config = await createTursoDatabase(dbName, selectedGroup);
+
+				const finalSpinner = spinner();
+				finalSpinner.start("Writing configuration to .env file");
 				await writeEnvFile(projectDir, config);
-				s.stop("Turso database configured successfully!");
+				finalSpinner.stop("Turso database configured successfully!");
+
 				success = true;
 			} catch (error) {
 				if (error instanceof Error && error.message === "DATABASE_EXISTS") {
-					s.stop(pc.yellow(`Database "${pc.red(dbName)}" already exists`));
+					log.warn(pc.yellow(`Database "${pc.red(dbName)}" already exists`));
 					suggestedName = `${dbName}-${Math.floor(Math.random() * 1000)}`;
 				} else {
-					s.stop(pc.red("Failed to create Turso database"));
 					throw error;
 				}
 			}
 		}
 	} catch (error) {
-		log.error(pc.red(`Error during Turso setup: ${error}`));
+		setupSpinner.stop(pc.red("Failed to set up Turso database"));
+		log.error(
+			pc.red(
+				`Error during Turso setup: ${error instanceof Error ? error.message : String(error)}`,
+			),
+		);
 		await writeEnvFile(projectDir);
 		displayManualSetupInstructions();
 		log.success("Setup completed with manual configuration required.");

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

@@ -52,12 +52,12 @@ export async function getFrontendChoice(
 				{
 					value: "react-router",
 					label: "React Router",
-					hint: "A user‑obsessed, standards‑focused, multi‑strategy router you can deploy anywhere.",
+					hint: "A user‑obsessed, standards‑focused, multi‑strategy router",
 				},
 				{
 					value: "tanstack-start",
 					label: "TanStack Start (beta)",
-					hint: "SSR, Streaming, Server Functions, API Routes, bundling and more powered by TanStack Router and Vite.",
+					hint: "SSR, Server Functions, API Routes and more with TanStack Router",
 				},
 			],
 			initialValue: