Added support for building mobile applications with Expo

apps/cli/src/prompts/auth.ts

@@ -1,12 +1,26 @@
-import { cancel, confirm, isCancel } from "@clack/prompts";
+import { cancel, confirm, isCancel, log } from "@clack/prompts";
 import pc from "picocolors";
 import { DEFAULT_CONFIG } from "../constants";
+import type { ProjectFrontend } from "../types";
 
 export async function getAuthChoice(
 	auth: boolean | undefined,
 	hasDatabase: boolean,
+	frontends?: ProjectFrontend[],
 ): Promise<boolean> {
 	if (!hasDatabase) return false;
+
+	const hasNative = frontends?.includes("native");
+	const hasWeb = frontends?.includes("web");
+
+	if (hasNative) {
+		log.warn(
+			pc.yellow("Note: Authentication is not yet available with native"),
+		);
+	}
+
+	if (!hasWeb) return false;
+
 	if (auth !== undefined) return auth;
 
 	const response = await confirm({

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

@@ -7,6 +7,7 @@ import type {
 	ProjectConfig,
 	ProjectDatabase,
 	ProjectExamples,
+	ProjectFrontend,
 	ProjectOrm,
 	Runtime,
 } from "../types";
@@ -15,6 +16,7 @@ import { getAuthChoice } from "./auth";
 import { getBackendFrameworkChoice } from "./backend-framework";
 import { getDatabaseChoice } from "./database";
 import { getExamplesChoice } from "./examples";
+import { getFrontendChoice } from "./frontend-option";
 import { getGitChoice } from "./git";
 import { getNoInstallChoice } from "./install";
 import { getORMChoice } from "./orm";
@@ -36,6 +38,7 @@ type PromptGroupResults = {
 	turso: boolean;
 	backendFramework: BackendFramework;
 	runtime: Runtime;
+	frontend: ProjectFrontend[];
 };
 
 export async function gatherConfig(
@@ -46,13 +49,18 @@ export async function gatherConfig(
 			projectName: async () => {
 				return getProjectName(flags.projectName);
 			},
+			frontend: () => getFrontendChoice(flags.frontend),
 			backendFramework: () => getBackendFrameworkChoice(flags.backendFramework),
 			runtime: () => getRuntimeChoice(flags.runtime),
 			database: () => getDatabaseChoice(flags.database),
 			orm: ({ results }) =>
 				getORMChoice(flags.orm, results.database !== "none"),
 			auth: ({ results }) =>
-				getAuthChoice(flags.auth, results.database !== "none"),
+				getAuthChoice(
+					flags.auth,
+					results.database !== "none",
+					results.frontend,
+				),
 			turso: ({ results }) =>
 				results.database === "sqlite" && results.orm !== "prisma"
 					? getTursoSetupChoice(flags.turso)
@@ -74,6 +82,7 @@ export async function gatherConfig(
 
 	return {
 		projectName: result.projectName,
+		frontend: result.frontend,
 		database: result.database,
 		orm: result.orm,
 		auth: result.auth,

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

@@ -0,0 +1,35 @@
+import { cancel, isCancel, multiselect } from "@clack/prompts";
+import pc from "picocolors";
+import { DEFAULT_CONFIG } from "../constants";
+import type { ProjectFrontend } from "../types";
+
+export async function getFrontendChoice(
+	frontendOptions?: ProjectFrontend[],
+): Promise<ProjectFrontend[]> {
+	if (frontendOptions !== undefined) return frontendOptions;
+
+	const response = await multiselect<ProjectFrontend>({
+		message: "Which frontend applications would you like to create?",
+		options: [
+			{
+				value: "web",
+				label: "Web App",
+				hint: "React + TanStack Router web application",
+			},
+			{
+				value: "native",
+				label: "Native App",
+				hint: "React Native + Expo application",
+			},
+		],
+		initialValues: DEFAULT_CONFIG.frontend,
+		required: false,
+	});
+
+	if (isCancel(response)) {
+		cancel(pc.red("Operation cancelled"));
+		process.exit(0);
+	}
+
+	return response;
+}

apps/cli/src/prompts/orm.ts

@@ -21,7 +21,7 @@ export async function getORMChoice(
 			{
 				value: "prisma",
 				label: "Prisma",
-				hint: "Powerful, feature-rich ORM with schema migrations",
+				hint: "Powerful, feature-rich ORM",
 			},
 		],
 		initialValue: DEFAULT_CONFIG.orm,