swallowkit 1.1.2 → 2.0.0-alpha.2

package/src/cli/commands/init.ts

@@ -2,7 +2,8 @@
 import * as path from "path";
 import { spawn, execSync } from "child_process";
 import prompts from "prompts";
-import { BackendLanguage } from "../../types";
+import { BackendLanguage, FrontendFramework } from "../../types";
+import { buildReactReadme, buildReactSwaConfig, createReactBffProject, createReactProject, buildReactGitHubSwaWorkflow, buildReactAzureSwaPipeline } from "../../core/project/react-project";
 import {
   type PackageManager,
   detectFromUserAgent,
@@ -29,6 +30,7 @@ import { getProjectLocalUvPaths } from "../../utils/python-uv";
 interface InitOptions {
   name: string;
   template: string;
+  frontend?: FrontendFramework;
   nextVersion?: string;
   cicd?: CiCdProvider;
   backendLanguage?: BackendLanguage;
@@ -257,6 +259,9 @@ const VALID_VNET: VNetOption[] = ['none', 'outbound'];
 const VALID_SWA_PLAN: StaticWebAppPlan[] = ['free', 'standard'];
 
 function validateInitFlags(options: InitOptions): void {
+  if (options.frontend && !["nextjs", "react"].includes(options.frontend)) {
+    throw new Error("Invalid --frontend: expected nextjs or react");
+  }
   if (options.packageManager && !['npm', 'pnpm'].includes(options.packageManager)) {
     throw new Error('Invalid --package-manager: expected npm or pnpm');
   }
@@ -322,17 +327,28 @@ export async function initCommand(options: InitOptions) {
       }
     }
 
+    // Preserve existing non-interactive invocations while offering a frontend choice in the wizard.
+    const frontend: FrontendFramework = options.frontend ?? (interactive
+      ? (await prompts({
+          type: "select", name: "frontend", message: "Frontend framework:",
+          choices: [{ title: "Next.js (App Router)", value: "nextjs" }, { title: "React (Vite SPA + SWA managed Functions BFF)", value: "react" }],
+          initial: 0,
+        })).frontend || "nextjs"
+      : "nextjs");
+    options = { ...options, frontend };
+
     // Use flag values if provided, otherwise prompt interactively
     const cicdProvider: CiCdProvider = options.cicd || await promptCiCd();
     const backendLanguage: BackendLanguage = options.backendLanguage || await promptBackendLanguage();
 
     const azureConfig = await promptAzureConfig(options);
 
-    // Create Next.js project with create-next-app
-    await createNextJsProject(options.name, pm);
-
-    // Upgrade Next.js to specified version (or latest) to avoid cached old versions
-    await upgradeNextJs(projectDir, options.nextVersion || 'latest', pm);
+    if (frontend === "react") {
+      createReactProject(projectDir, options.name);
+    } else {
+      await createNextJsProject(options.name, pm);
+      await upgradeNextJs(projectDir, options.nextVersion || 'latest', pm);
+    }
 
     // Add SwallowKit specific files
     await addSwallowKitFiles(projectDir, options, cicdProvider, azureConfig, pm, backendLanguage);
@@ -342,9 +358,9 @@ export async function initCommand(options: InitOptions) {
     
     // Create CI/CD files based on choice
     if (cicdProvider === 'github') {
-      await createGitHubActionsWorkflows(projectDir, azureConfig, pm, backendLanguage);
+      await createGitHubActionsWorkflows(projectDir, azureConfig, pm, backendLanguage, frontend);
     } else if (cicdProvider === 'azure') {
-      await createAzurePipelines(projectDir, pm, backendLanguage);
+      await createAzurePipelines(projectDir, pm, backendLanguage, frontend);
     }
 
     await syncProjectManifest(projectDir);
@@ -651,9 +667,13 @@ export function parseIgnoredBuilds(output: string): string[] {
 }
 
 export function injectSwallowKitNextConfig(nextConfigContent: string, projectName: string): string {
-  return nextConfigContent.replace(
+  const compatibleConfig = nextConfigContent.replace(/(\b(?:cacheComponents|partialPrefetching)\s*:\s*)true\b/g, '$1false');
+  const cacheComponentsSetting = /\bcacheComponents\s*:/.test(compatibleConfig)
+    ? ''
+    : '  cacheComponents: false,\n';
+  return compatibleConfig.replace(
     /(const\s+nextConfig[:\s]*(?::\s*NextConfig\s*)?=\s*\{)(\s*\/\*[^*]*\*\/)?/,
-    `$1\n  output: 'standalone',\n  agentRules: false, // SwallowKit owns the canonical root AGENTS.md contract\n  transpilePackages: ['@${projectName}/shared'],\n  serverExternalPackages: ['applicationinsights', 'diagnostic-channel-publishers'],$2`
+    `$1\n  output: 'standalone',\n${cacheComponentsSetting}  agentRules: false, // SwallowKit owns the canonical root AGENTS.md contract\n  transpilePackages: ['@${projectName}/shared'],\n  serverExternalPackages: ['applicationinsights', 'diagnostic-channel-publishers'],$2`
   );
 }
 
@@ -704,8 +724,11 @@ export function buildCSharpFunctionsProjectSource(): string {
 `;
 }
 
-export function buildSwallowKitConfigSource(backendLanguage: BackendLanguage): string {
+export function buildSwallowKitConfigSource(backendLanguage: BackendLanguage, frontend: FrontendFramework = "nextjs"): string {
   return `module.exports = {
+  frontend: {
+    framework: '${frontend}',
+  },
   backend: {
     language: '${backendLanguage}',
   },
@@ -723,10 +746,10 @@ export function buildSwallowKitConfigSource(backendLanguage: BackendLanguage): s
 export function buildGeneratedProjectDependencies(
   projectName: string,
   pm: PackageManager = 'pnpm',
+  frontend: FrontendFramework = "nextjs",
 ): Record<string, string> {
   return {
-    '@azure/cosmos': '^4.0.0',
-    'applicationinsights': '^3.3.0',
+    ...(frontend === "nextjs" ? { '@azure/cosmos': '^4.0.0', 'applicationinsights': '^3.3.0' } : {}),
     'zod': '^4.0.0',
     [`@${projectName}/shared`]: pm === 'pnpm' ? 'workspace:*' : 'file:shared',
   };
@@ -795,6 +818,7 @@ async function addSwallowKitFiles(
   console.log('📦 Adding SwallowKit files...\n');
   
   const projectName = options.name;
+  const frontend = options.frontend ?? "nextjs";
 
   // 1. Update package.json to add runtime dependencies for generated projects
   const packageJsonPath = path.join(projectDir, 'package.json');
@@ -803,7 +827,7 @@ async function addSwallowKitFiles(
   // Root BFF/auth code imports Zod directly; declare it as well as the shared package.
   packageJson.dependencies = {
     ...packageJson.dependencies,
-    ...buildGeneratedProjectDependencies(projectName, pm),
+    ...buildGeneratedProjectDependencies(projectName, pm, frontend),
   };
   packageJson.devDependencies = {
     ...packageJson.devDependencies,
@@ -812,8 +836,12 @@ async function addSwallowKitFiles(
 
   packageJson.scripts = {
     ...packageJson.scripts,
-    'build': getBuildScript(pm),
-    'start': 'next start',
+    'build': getBuildScript(pm, frontend),
+    'start': frontend === "react" ? "vite preview" : 'next start',
+    ...(frontend === "react" ? {
+      typecheck: `tsc --noEmit && ${getCommands(pm).exec} tsc --noEmit -p bff`,
+      "bff:start": `${getCommands(pm).runFilter("bff")} start`,
+    } : {}),
     'functions:start': getFunctionsStartScript(pm, backendLanguage),
   };
 
@@ -827,7 +855,7 @@ async function addSwallowKitFiles(
   delete packageJson.packageManager;
 
   // Keep package.json workspaces for npm-based CI/CD even when local development uses pnpm.
-  const workspacePackages = usesNodeFunctionsProject(backendLanguage) ? ['shared', 'functions'] : ['shared'];
+  const workspacePackages = [...(usesNodeFunctionsProject(backendLanguage) ? ['shared', 'functions'] : ['shared']), ...(frontend === "react" ? ["bff"] : [])];
   const wsConfig = getWorkspaceConfig(pm, workspacePackages);
   packageJson.workspaces = workspacePackages;
 
@@ -839,7 +867,7 @@ async function addSwallowKitFiles(
 
   // Create pnpm-workspace.yaml for local pnpm development when needed.
   if (wsConfig.type === 'file') {
-    fs.writeFileSync(path.join(projectDir, wsConfig.filename), wsConfig.content);
+    fs.writeFileSync(path.join(projectDir, wsConfig.filename), wsConfig.content + (frontend === "react" ? "  esbuild: true\n" : ""));
   }
 
   // Don't install yet — wait until all workspace packages (shared, functions) are created
@@ -878,12 +906,13 @@ async function addSwallowKitFiles(
   }
 
   // 3. Create SwallowKit config
-  const swallowkitConfig = buildSwallowKitConfigSource(backendLanguage);
+  const swallowkitConfig = buildSwallowKitConfigSource(backendLanguage, frontend);
   fs.writeFileSync(path.join(projectDir, 'swallowkit.config.js'), swallowkitConfig);
 
   // 4. Create shared workspace package for Zod models (Single Source of Truth)
   await createSharedPackage(projectDir, projectName);
 
+  if (frontend === "nextjs") {
   // Create lib directory for Next.js-specific utilities
   const libDir = path.join(projectDir, 'lib');
 
@@ -1003,6 +1032,7 @@ export const api = {
 };
 `;
   fs.writeFileSync(path.join(apiLibDir, 'backend.ts'), backendUtilContent);
+  }
 
   // 5. Create components directory
   const componentsDir = path.join(projectDir, 'components');
@@ -1091,7 +1121,7 @@ export async function register() {
   }
 }
 `;
-  fs.writeFileSync(path.join(projectDir, 'instrumentation.ts'), instrumentationContent);
+  if (frontend === "nextjs") fs.writeFileSync(path.join(projectDir, 'instrumentation.ts'), instrumentationContent);
 
   // 8. Create .env.local for local development
   const envLocalContent = [
@@ -1124,17 +1154,19 @@ export async function register() {
   };
   fs.writeFileSync(
     path.join(projectDir, 'staticwebapp.config.json'),
-    JSON.stringify(swaConfig, null, 2)
+    JSON.stringify(frontend === "react" ? buildReactSwaConfig() : swaConfig, null, 2)
   );
 
   // 14. Create Azure Functions project
   await createAzureFunctionsProject(projectDir, pm, backendLanguage);
 
   // 15. Create BFF API route to call Azure Functions
-  await createBffApiRoute(projectDir);
-
-  // 16. Create home page
-  await createHomePage(projectDir, pm);
+  if (frontend === "react") {
+    createReactBffProject(projectDir, projectName, pm);
+  } else {
+    await createBffApiRoute(projectDir);
+    await createHomePage(projectDir, pm);
+  }
 
   // 17. Install all workspace dependencies (root + shared + functions)
   console.log('📦 Installing workspace dependencies...\n');
@@ -1143,10 +1175,14 @@ export async function register() {
   console.log('✅ Project structure created\n');
 
   // 18. Create README.md
-  createReadme(projectDir, projectName, cicdChoice, azureConfig, pm, backendLanguage);
+  if (frontend === "react") {
+    fs.writeFileSync(path.join(projectDir, "README.md"), buildReactReadme(projectName, pm, backendLanguage));
+  } else {
+    createReadme(projectDir, projectName, cicdChoice, azureConfig, pm, backendLanguage);
+  }
 
   // 19. Create AI agent instruction files (AGENTS.md, CLAUDE.md, .github/copilot-instructions.md, etc.)
-  createAiAgentFiles(projectDir, projectName, backendLanguage, pm);
+  createAiAgentFiles(projectDir, projectName, backendLanguage, pm, frontend);
 }
 
 async function createSharedPackage(projectDir: string, projectName: string) {
@@ -1978,7 +2014,8 @@ function createAiAgentFiles(
   projectDir: string,
   projectName: string,
   backendLanguage: BackendLanguage,
-  pm: PackageManager
+  pm: PackageManager,
+  frontend: FrontendFramework = "nextjs"
 ) {
   console.log('🤖 Creating AI agent instruction files...\n');
   const runCmd = getCommands(pm).exec;
@@ -1987,6 +2024,7 @@ function createAiAgentFiles(
     projectName,
     backendLanguage,
     packageManager: pm,
+    frontend,
   });
   console.log('  ✅ AGENTS.md (canonical project contract)');
   console.log('  ✅ CLAUDE.md (Claude Code adapter)');
@@ -3133,7 +3171,8 @@ export function getSwaNodeVersionCommand(): string {
   return `node -e "const fs=require('fs');const p=JSON.parse(fs.readFileSync('package.json','utf8'));p.engines={...p.engines,node:'>=22.14.0 <23'};fs.writeFileSync('package.json',JSON.stringify(p,null,2)+String.fromCharCode(10));"`;
 }
 
-export function buildAzureSwaPipeline(pm: PackageManager, projectPm: PackageManager = pm): string {
+export function buildAzureSwaPipeline(pm: PackageManager, projectPm: PackageManager = pm, frontend: FrontendFramework = "nextjs"): string {
+  if (frontend === "react") return buildReactAzureSwaPipeline(projectPm);
   // SWA/Oryx also invokes npm internally; normalize only the disposable CI checkout.
   pm = 'npm';
   const pmCmd = getCommands(pm);
@@ -3321,7 +3360,8 @@ async function createGitHubActionsWorkflows(
   projectDir: string,
   azureConfig: AzureConfig,
   pm: PackageManager,
-  backendLanguage: BackendLanguage
+  backendLanguage: BackendLanguage,
+  frontend: FrontendFramework = "nextjs"
 ) {
   console.log('📦 Creating GitHub Actions workflows...\n');
   const workflowsDir = path.join(projectDir, '.github', 'workflows');
@@ -3329,7 +3369,7 @@ async function createGitHubActionsWorkflows(
 
   const actionsPm: PackageManager = pm;
 
-  const swaWorkflow = buildGitHubSwaWorkflow(actionsPm, pm);
+  const swaWorkflow = buildGitHubSwaWorkflow(actionsPm, pm, frontend);
   fs.writeFileSync(path.join(workflowsDir, 'deploy-swa.yml'), swaWorkflow);
 
   // deploy-functions.yml
@@ -3339,7 +3379,8 @@ async function createGitHubActionsWorkflows(
   console.log('✅ GitHub Actions workflows created\n');
 }
 
-export function buildGitHubSwaWorkflow(pm: PackageManager, projectPm: PackageManager = pm): string {
+export function buildGitHubSwaWorkflow(pm: PackageManager, projectPm: PackageManager = pm, frontend: FrontendFramework = "nextjs"): string {
+  if (frontend === "react") return buildReactGitHubSwaWorkflow(projectPm);
   // SWA/Oryx also invokes npm internally; normalize only the disposable CI checkout.
   pm = 'npm';
   const npmWorkspaceNormalizationStep = getGitHubNpmWorkspaceNormalizationStep(pm, projectPm);
@@ -3417,7 +3458,7 @@ ${npmWorkspaceNormalizationStep ? `\n${npmWorkspaceNormalizationStep}` : ''}
 `;
 }
 
-async function createAzurePipelines(projectDir: string, pm: PackageManager, backendLanguage: BackendLanguage) {
+async function createAzurePipelines(projectDir: string, pm: PackageManager, backendLanguage: BackendLanguage, frontend: FrontendFramework = "nextjs") {
   console.log('📦 Creating Azure Pipelines...\n');
 
   const pipelinesPm: PackageManager = pm;
@@ -3425,7 +3466,7 @@ async function createAzurePipelines(projectDir: string, pm: PackageManager, back
   fs.mkdirSync(pipelinesDir, { recursive: true });
 
   // swa.yml
-  const swaPipeline = buildAzureSwaPipeline(pipelinesPm, pm);
+  const swaPipeline = buildAzureSwaPipeline(pipelinesPm, pm, frontend);
   fs.writeFileSync(path.join(pipelinesDir, 'swa.yml'), swaPipeline);
   
   // functions.yml
@@ -3434,4 +3475,3 @@ async function createAzurePipelines(projectDir: string, pm: PackageManager, back
 
   console.log('✅ Azure Pipelines created\n');
 }
-

package/src/cli/commands/scaffold.ts

@@ -1,13 +1,15 @@
 /**
  * SwallowKit Scaffold コマンド
- * Zod モデルから Azure Functions と Next.js BFF の CRUD コードを生成
+ * Zod モデルから Azure Functions、BFF、選択したフロントエンドの CRUD を生成
  */
 
 import * as fs from "fs";
 import * as path from "path";
 import { spawnSync } from "child_process";
-import { getBackendLanguage, getConnectorDefinition, getAuthConfig, getFullConfig, getNormalizedAuthConfig, ensureSwallowKitProject, normalizeAuthConfig, validateConfig } from "../../core/config";
-import { ModelInfo, parseModelFile, toKebabCase, toPascalCase, toCamelCase } from "../../core/scaffold/model-parser";
+import { getBackendLanguage, getFrontendFramework, getConnectorDefinition, getAuthConfig, getFullConfig, getNormalizedAuthConfig, ensureSwallowKitProject, normalizeAuthConfig, validateConfig } from "../../core/config";
+import { generateManagedFunctionConfig, generateReactBffHelper, generateReactBffRoute } from "../../core/scaffold/react-bff-generator";
+import { adaptReactPage, generateReactModelRoutes } from "../../core/scaffold/react-ui-generator";
+import { ModelInfo, parseModelFile, toKebabCase, toCamelCase } from "../../core/scaffold/model-parser";
 import { MachineCommandError } from "../../machine/errors";
 import {
   generateCSharpAzureFunctionsCRUD,
@@ -58,7 +60,7 @@ const SCAFFOLD_GENERATOR = "scaffold";
 interface ScaffoldOptions {
   model: string; // モデルファイルのパス（例: "lib/models/todo.ts" or "todo"）
   functionsDir?: string; // Azure Functions のディレクトリ（デフォルト: "functions"）
-  apiDir?: string; // Next.js API routes のディレクトリ（デフォルト: "app/api"）
+  apiDir?: string; // BFF directory (Next.js: app/api, React: bff)
   apiOnly?: boolean; // true の場合、UI を生成しない（デフォルト: false）
   expectedSchemaAnalysis?: SchemaAnalysisSnapshot;
 }
@@ -131,6 +133,8 @@ export async function scaffoldCommand(options: ScaffoldOptions) {
     console.log(`✅ Model parsed: ${modelInfo.name} (${modelInfo.schemaName})`);
 
     const backendLanguage = getBackendLanguage();
+    const frontend = getFrontendFramework();
+    const apiDir = options.apiDir || (frontend === "react" ? "bff" : "app/api");
     console.log(`🧠 Backend language: ${backendLanguage}`);
     
     // コネクタモデルかどうかを判定
@@ -182,7 +186,7 @@ export async function scaffoldCommand(options: ScaffoldOptions) {
     }
 
     // 5. Generate BFF callFunction helper
-    await generateCallFunctionHelper(session);
+    await generateCallFunctionHelper(session, apiDir);
 
     // 6. Generate Azure Functions code
     if (isConnectorModel) {
@@ -197,9 +201,10 @@ export async function scaffoldCommand(options: ScaffoldOptions) {
       }
     }
 
-    // 7. Generate Next.js BFF API Routes
-    const apiDir = options.apiDir || "app/api";
-    if (isConnectorModel) {
+    // 7. Generate framework-specific BFF routes (the standalone backend is unchanged).
+    if (frontend === "react") {
+      generateManagedBffRoutes(modelInfo, apiDir, sharedPackageName, session);
+    } else if (isConnectorModel) {
       await generateConnectorBFFRoutesFiles(modelInfo, apiDir, sharedPackageName, session);
     } else {
       await generateBFFRoutes(modelInfo, apiDir, sharedPackageName, session);
@@ -237,14 +242,14 @@ export async function scaffoldCommand(options: ScaffoldOptions) {
     console.log("\n📝 Next steps:");
     console.log(`  1. Review generated files in ${describeFunctionsOutputPath(functionsDir, backendLanguage)} and ${apiDir}/`);
     if (!options.apiOnly) {
-      console.log(`  2. Check the generated UI pages in app/${toKebabCase(modelInfo.name)}/`);
+      console.log(`  2. Check the generated UI pages in ${frontend === "react" ? "src/pages" : "app"}/${toKebabCase(modelInfo.name)}/`);
       console.log("  3. Navigate to the model from the homepage menu");
     }
     if (backendLanguage !== "typescript") {
       console.log(`  ${options.apiOnly ? "2" : "4"}. Review generated OpenAPI export and native schema assets in ${functionsDir}/openapi/ and ${functionsDir}/generated/`);
     }
     console.log(
-      `  ${options.apiOnly ? (backendLanguage === "typescript" ? "2" : "3") : (backendLanguage === "typescript" ? "4" : "5")}. Ensure BACKEND_FUNCTIONS_BASE_URL is set in your .env.local file`
+      `  ${options.apiOnly ? (backendLanguage === "typescript" ? "2" : "3") : (backendLanguage === "typescript" ? "4" : "5")}. Ensure BACKEND_FUNCTIONS_BASE_URL is set in ${frontend === "react" ? `${apiDir}/local.settings.json` : "your .env.local file"}`
     );
     console.log(
       `  ${options.apiOnly ? (backendLanguage === "typescript" ? "3" : "4") : (backendLanguage === "typescript" ? "5" : "6")}. Configure CosmosDBConnection in functions/local.settings.json`
@@ -258,7 +263,7 @@ export async function scaffoldCommand(options: ScaffoldOptions) {
 }
 
 function applyExternalTokenFetchToGeneratedUi(modelInfo: ModelInfo, session: FileOperationSession, importPath = '@/lib/auth/authenticated-fetch'): void {
-  const uiPrefix = `app/${toKebabCase(modelInfo.name)}/`;
+  const uiPrefix = `${getFrontendFramework() === "react" ? "src/pages" : "app"}/${toKebabCase(modelInfo.name)}/`;
   for (const operation of session.operations) {
     if (!operation.path.startsWith(uiPrefix) || !operation.path.endsWith('.tsx') || operation.action === 'delete') continue;
     let content = session.readFile(operation.absolutePath);
@@ -384,10 +389,17 @@ function readSharedPackageName(): string {
 /**
  * Generate BFF callFunction helper (lib/api/call-function.ts)
  */
-async function generateCallFunctionHelper(session: FileOperationSession): Promise<void> {
+async function generateCallFunctionHelper(session: FileOperationSession, apiDir: string): Promise<void> {
   console.log("\n📦 Generating BFF callFunction helper...");
 
   const cwd = process.cwd();
+  if (getFrontendFramework() === "react") {
+    const projectName = JSON.parse(fs.readFileSync(path.join(cwd, "package.json"), "utf8")).name;
+    session.writeFile(path.join(cwd, apiDir, "src", "lib", "call-function.ts"), generateReactBffHelper(projectName, getAuthConfig()), {
+      ownership: "managed", generator: SCAFFOLD_GENERATOR,
+    });
+    return;
+  }
 
   const helperDir = path.join(cwd, "lib", "api");
   const helperPath = path.join(helperDir, "call-function.ts");
@@ -800,6 +812,13 @@ function updatePythonFunctionRegistrations(functionAppPath: string, registration
 /**
  * Next.js BFF API Routes を生成
  */
+function generateManagedBffRoutes(modelInfo: ModelInfo, apiDir: string, sharedPackageName: string, session: FileOperationSession): void {
+  const name = toCamelCase(modelInfo.name);
+  const meta = { ownership: "managed" as const, generator: SCAFFOLD_GENERATOR, sourceModel: modelInfo.name };
+  session.writeFile(path.join(process.cwd(), apiDir, "src", name, "index.ts"), generateReactBffRoute(modelInfo, sharedPackageName), meta);
+  session.writeFile(path.join(process.cwd(), apiDir, name, "function.json"), generateManagedFunctionConfig(`${name}/{id?}`, ["GET", "POST", "PUT", "DELETE"], name), meta);
+}
+
 async function generateBFFRoutes(
   modelInfo: any,
   apiDir: string,
@@ -867,9 +886,10 @@ export async function generateUIComponents(modelInfo: ModelInfo, sharedPackageNa
   const modelKebab = toKebabCase(modelInfo.name);
   const modelName = modelInfo.name;
   const cwd = process.cwd();
+  const react = getFrontendFramework() === "react";
 
   // Create directory structure: app/[model]/
-  const modelDir = path.join(cwd, "app", modelKebab);
+  const modelDir = path.join(cwd, react ? path.join("src", "pages") : "app", modelKebab);
   const componentsDir = path.join(modelDir, "_components");
   const newDir = path.join(modelDir, "new");
   const idDir = path.join(modelDir, "[id]");
@@ -884,14 +904,16 @@ export async function generateUIComponents(modelInfo: ModelInfo, sharedPackageNa
   const authLayout = generateAuthLayout(modelInfo, authOptions);
 
   const meta = { ownership: "managed" as const, generator: SCAFFOLD_GENERATOR, sourceModel: modelInfo.name };
-  session.writeFile(path.join(modelDir, "page.tsx"), listPage, meta);
-  session.writeFile(path.join(idDir, "page.tsx"), detailPage, meta);
-  session.writeFile(path.join(componentsDir, `${modelName}Form.tsx`), formComponent, meta);
-  session.writeFile(path.join(newDir, "page.tsx"), newPage, meta);
-  session.writeFile(path.join(editDir, "page.tsx"), editPage, meta);
+  const adapt = react ? adaptReactPage : (source: string) => source;
+  session.writeFile(path.join(modelDir, "page.tsx"), adapt(listPage), meta);
+  session.writeFile(path.join(idDir, "page.tsx"), adapt(detailPage), meta);
+  session.writeFile(path.join(componentsDir, `${modelName}Form.tsx`), adapt(formComponent), meta);
+  session.writeFile(path.join(newDir, "page.tsx"), adapt(newPage), meta);
+  session.writeFile(path.join(editDir, "page.tsx"), adapt(editPage), meta);
   if (authLayout) {
     session.writeFile(path.join(modelDir, "layout.tsx"), authLayout, meta);
   }
+  if (react) session.writeFile(path.join(modelDir, "routes.tsx"), generateReactModelRoutes(modelInfo, authOptions), meta);
 
   console.log(`✅ Created: ${path.join(modelDir, "page.tsx")}`);
   console.log(`✅ Created: ${path.join(idDir, "page.tsx")}`);
@@ -971,4 +993,3 @@ ${models.map(m => `    { name: '${m.name}', path: '${m.path}', label: '${m.label
   session.writeFile(configPath, newConfigContent, { ownership: "extension-point", generator: SCAFFOLD_GENERATOR });
   console.log(`✅ Added ${modelInfo.name} to navigation menu`);
 }
-

package/src/cli/index.ts

@@ -24,6 +24,7 @@ const DEV_OPTION_ARITY = new Map<string, 0 | 1>([
   ["--port", 1],
   ["-f", 1],
   ["--functions-port", 1],
+  ["--bff-port", 1],
   ["--host", 1],
   ["--seed-env", 1],
   ["-o", 0],
@@ -102,7 +103,7 @@ export function createProgram(devCommandOverride: Command = devCommand): Command
 
   program
     .name("swallowkit")
-    .description("Next.js framework optimized for Azure deployment - Automatically splits SSR into individual Azure Functions")
+    .description("Schema-driven React and Next.js applications on Azure Static Web Apps and Functions")
     .version(CLI_VERSION);
 
   // Register commands
@@ -110,6 +111,7 @@ export function createProgram(devCommandOverride: Command = devCommand): Command
     .command("init [project-name]")
     .description("Initialize a new SwallowKit project")
     .option("--template <template>", "Template to use", "default")
+    .option("--frontend <framework>", "Frontend framework: nextjs | react (defaults to nextjs in non-interactive mode)")
     .option("--next-version <version>", "Next.js version to install (e.g., 16.0.7, latest)", "latest")
     .option("--package-manager <manager>", "Package manager: npm | pnpm (defaults to invocation context)")
     .option("--cicd <provider>", "CI/CD provider: github | azure | skip")
@@ -121,6 +123,7 @@ export function createProgram(devCommandOverride: Command = devCommand): Command
       initCommand({
         name: projectName || "swallowkit-app",
         template: options.template,
+        frontend: options.frontend,
         nextVersion: options.nextVersion,
         packageManager: options.packageManager,
         cicd: options.cicd,
@@ -153,9 +156,9 @@ export function createProgram(devCommandOverride: Command = devCommand): Command
 
   program
     .command("scaffold <model>")
-    .description("Generate CRUD code for Azure Functions and Next.js BFF from Zod models")
+    .description("Generate CRUD code for Azure Functions, BFF, and the selected frontend from Zod models")
     .option("--functions-dir <dir>", "Azure Functions directory", "functions")
-    .option("--api-dir <dir>", "Next.js API routes directory", "app/api")
+    .option("--api-dir <dir>", "BFF routes directory (Next.js: app/api; React: bff)")
     .option("--api-only", "Skip UI components; still update Functions, BFF routes, OpenAPI, and native schema assets", false)
     .option("--dry-run", "Show planned file changes without writing anything", false)
     .action(async (model, options) => {

package/src/core/config.ts

@@ -1,7 +1,7 @@
 import * as fs from "fs";
 import { createRequire } from "module";
 import * as path from "path";
-import { AuthConfig, AuthProvider, BackendLanguage, ConnectorDefinition, NormalizedAuthConfig, SwallowKitConfig } from "../types";
+import { AuthConfig, AuthProvider, BackendLanguage, ConnectorDefinition, FrontendFramework, NormalizedAuthConfig, SwallowKitConfig } from "../types";
 import { detectFromProject, getCommands } from "../utils/package-manager";
 
 const requireFromHere = createRequire(__filename);
@@ -21,6 +21,7 @@ const VALID_BACKEND_LANGUAGES: BackendLanguage[] = ["typescript", "csharp", "pyt
  * デフォルト設定
  */
 const DEFAULT_CONFIG: SwallowKitConfig = {
+  frontend: { framework: "nextjs" },
   database: {},
   backend: {
     language: "typescript",
@@ -78,6 +79,10 @@ export function loadConfig(configPath?: string, throwOnError = false, quiet = fa
  */
 function mergeConfig(defaultConfig: SwallowKitConfig, userConfig: Partial<SwallowKitConfig>): SwallowKitConfig {
   return {
+    frontend: {
+      ...defaultConfig.frontend,
+      ...userConfig.frontend,
+    },
     database: {
       ...defaultConfig.database,
       ...userConfig.database,
@@ -108,6 +113,9 @@ function mergeConfig(defaultConfig: SwallowKitConfig, userConfig: Partial<Swallo
 export function generateConfig(outputPath: string = "swallowkit.config.json"): void {
   const config = {
     $schema: "https://swallowkit.dev/schema.json",
+    frontend: {
+      framework: "nextjs",
+    },
     database: {
       connectionString: "your-cosmos-connection-string",
       databaseName: "SwallowKitDB",
@@ -176,6 +184,14 @@ export function getBackendLanguage(configPath?: string): BackendLanguage {
   return "typescript";
 }
 
+export function getFrontendFramework(configPath?: string): FrontendFramework {
+  const framework = getFullConfig(configPath).frontend?.framework ?? "nextjs";
+  if (framework !== "nextjs" && framework !== "react") {
+    throw new Error(`Unsupported frontend framework '${framework}'; use nextjs or react`);
+  }
+  return framework;
+}
+
 /**
  * 完全な設定を取得（ファイル + 環境変数）
  */
@@ -250,6 +266,10 @@ function hasConfiguredDatabase(config: SwallowKitConfig): boolean {
 export function validateConfig(config: SwallowKitConfig): { valid: boolean; errors: string[] } {
   const errors: string[] = [];
 
+  if (config.frontend?.framework && !["nextjs", "react"].includes(config.frontend.framework)) {
+    errors.push("Frontend framework must be one of: nextjs, react");
+  }
+
   const auth = normalizeAuthConfig(config.auth);
   if (auth) {
     for (const [name, scheme] of Object.entries(auth.schemes)) {

package/src/core/project/agent-instructions.ts

@@ -1,12 +1,13 @@
 import * as fs from "fs";
 import * as path from "path";
-import { BackendLanguage } from "../../types";
+import { BackendLanguage, FrontendFramework } from "../../types";
 import { PackageManager, getCommands } from "../../utils/package-manager";
 
 export interface AgentInstructionContext {
   projectName: string;
   backendLanguage: BackendLanguage;
   packageManager: PackageManager;
+  frontend?: FrontendFramework;
 }
 
 export interface AgentInstructionDocuments {
@@ -75,11 +76,23 @@ function getBackendRules(backendLanguage: BackendLanguage): string {
 
 function interpolateTemplate(template: string, context: AgentInstructionContext): string {
   const runCmd = getCommands(context.packageManager).exec;
+  const react = context.frontend === "react";
   const replacements: Record<string, string> = {
     projectName: context.projectName,
     backendLanguageLabel: BACKEND_LANGUAGE_LABELS[context.backendLanguage],
     functionsStructureLine: getFunctionsStructureLine(context.backendLanguage),
     backendRules: getBackendRules(context.backendLanguage),
+    frontendLabel: react ? "React + Vite SPA" : "Next.js App Router",
+    bffLabel: react ? "SWA managed Functions" : "Next.js API routes",
+    bffPath: react ? "bff/src" : "app/api",
+    bffGlob: react ? "bff/**" : "app/api/**",
+    helperImport: react ? "../lib/call-function" : "@/lib/api/call-function",
+    frontendStructure: react
+      ? "├── src/                    # React SPA (Vite + React Router)\n│   └── pages/              # generated/custom UI and route registrations\n├── bff/                    # SWA managed HTTP-only Functions\n│   ├── src/                # BFF handlers and request-local helpers\n│   └── {function}/         # function.json registrations"
+      : "├── app/                    # Next.js App Router\n│   ├── api/                # BFF routes\n│   └── {model}/            # generated/custom UI",
+    devGuidance: react
+      ? "Use http://localhost:4280 for the app. `swallowkit dev` runs Vite (3000), the managed BFF (7073), standalone Functions (7071), and SWA CLI (4280). SWA forwards /api only to the managed BFF, never directly to standalone Functions. `--no-functions` leaves the BFF running; `--no-swa` removes same-origin routing/auth emulation. BFF local settings belong in bff/local.settings.json. Build bundles BFF dependencies and copies staticwebapp.config.json into dist/. Deploy dist/ + bff/ together, and functions/ separately."
+      : "Use http://localhost:3000 for the app, or the SWA emulator port (4280) when testing SWA authentication. `swallowkit dev` runs Next.js and standalone Functions (7071). The BFF remains Next.js API routes.",
     pm: context.packageManager,
     runCmd,
   };