wmx-os-generators 0.1.0

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "wmx-os-generators",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "dev": "tsc --project tsconfig.json --watch"
+  },
+  "dependencies": {
+    "wmx-os-core": "workspace:*",
+    "wmx-os-scanners": "workspace:*",
+    "execa": "^8.0.0",
+    "fs-extra": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.4.0"
+  }
+}

package/src/deployGenerator.ts

@@ -0,0 +1,127 @@
+import fse from 'fs-extra'
+import path from 'path'
+
+interface WmxConfig {
+  projectName?: string
+  framework?: string
+  packageManager?: string
+  frontend?: { framework?: string; dir?: string }
+  backend?: { framework?: string; dir?: string }
+  database?: string
+}
+
+const BACKEND_FRAMEWORKS = ['express', 'nestjs', 'fastify', 'koa']
+
+function hasBackend(config: WmxConfig): boolean {
+  return !!(config.backend && BACKEND_FRAMEWORKS.includes(config.backend.framework ?? ''))
+}
+
+export function generateVercelConfig(config: WmxConfig): object {
+  const frontendDir = config.frontend?.dir ?? 'frontend'
+  const backendDir  = config.backend?.dir  ?? 'backend'
+
+  if (hasBackend(config)) {
+    return {
+      version: 2,
+      builds: [
+        {
+          src: `${frontendDir}/package.json`,
+          use: '@vercel/static-build',
+          config: { distDir: 'dist' },
+        },
+        { src: `${backendDir}/package.json`, use: '@vercel/node' },
+      ],
+      routes: [
+        { src: '/api/(.*)', dest: `/${backendDir}` },
+        { src: '/(.*)',     dest: `/${frontendDir}` },
+      ],
+    }
+  }
+
+  return {
+    version: 2,
+    builds: [
+      {
+        src: `${frontendDir}/package.json`,
+        use: '@vercel/static-build',
+        config: { distDir: 'dist' },
+      },
+    ],
+  }
+}
+
+export function generateRenderConfig(config: WmxConfig): string {
+  const frontendDir = config.frontend?.dir ?? 'frontend'
+  const backendDir  = config.backend?.dir  ?? 'backend'
+  const projectName = config.projectName   ?? 'my-app'
+
+  const envExamplePath = path.join(process.cwd(), '.env.example')
+  let envKeys: string[] = []
+  if (fse.pathExistsSync(envExamplePath)) {
+    const content = fse.readFileSync(envExamplePath, 'utf-8')
+    envKeys = content
+      .split('\n')
+      .filter(line => line.includes('=') && !line.trimStart().startsWith('#'))
+      .map(line => line.split('=')[0].trim())
+      .filter(Boolean)
+  }
+
+  if (hasBackend(config)) {
+    const envSection = envKeys.length > 0
+      ? `\n        envVars:\n${envKeys.map(k => `          - key: ${k}\n            value: placeholder`).join('\n')}`
+      : ''
+
+    return `services:
+      - type: web
+        name: ${projectName}-backend
+        runtime: node
+        rootDir: ${backendDir}
+        buildCommand: npm install && npm run build
+        startCommand: npm start${envSection}
+
+      - type: static
+        name: ${projectName}-frontend
+        rootDir: ${frontendDir}
+        buildCommand: npm install && npm run build
+        staticPublishPath: dist
+`
+  }
+
+  return `services:
+      - type: static
+        name: ${projectName}-frontend
+        rootDir: ${frontendDir}
+        buildCommand: npm install && npm run build
+        staticPublishPath: dist
+`
+}
+
+export function generateNetlifyConfig(config: WmxConfig): string {
+  const frontendDir = config.frontend?.dir ?? 'frontend'
+  const framework   = config.frontend?.framework ?? ''
+
+  let buildCommand: string
+  let publish: string
+
+  if (framework === 'next') {
+    buildCommand = 'npm run build'
+    publish = '.next'
+  } else if (framework === 'nuxt') {
+    buildCommand = 'npm run generate'
+    publish = 'dist'
+  } else {
+    buildCommand = 'npm run build'
+    publish = 'dist'
+  }
+
+  return `[build]
+  base    = "${frontendDir}"
+  command = "${buildCommand}"
+  publish = "${publish}"
+
+[[redirects]]
+  from   = "/*"
+  to     = "/index.html"
+  status = 200
+`
+}

package/src/docsGenerator.ts

@@ -0,0 +1,326 @@
+import fs from 'fs-extra'
+import path from 'path'
+import type { AnalysisResult, ImportEntry, RouteEntry } from 'wmx-os-scanners'
+
+// ── Existing helpers ──────────────────────────────────────────────────────────
+
+function topImports(imports: ImportEntry[], n = 10): Array<{ module: string; count: number }> {
+  const counts = new Map<string, number>()
+  for (const imp of imports) {
+    counts.set(imp.to, (counts.get(imp.to) ?? 0) + 1)
+  }
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, n)
+    .map(([module, count]) => ({ module, count }))
+}
+
+export async function generateAnalysis(result: AnalysisResult, outputDir: string): Promise<void> {
+  await fs.ensureDir(outputDir)
+
+  const top = topImports(result.imports)
+
+  const routeTable = result.routes.length > 0
+    ? [
+        '| Method | Path | File | Line |',
+        '|--------|------|------|------|',
+        ...result.routes.map(r =>
+          `| \`${r.method}\` | \`${r.path}\` | ${r.file} | ${r.line} |`
+        )
+      ].join('\n')
+    : '_No Express or Next.js routes detected._'
+
+  const importList = top.length > 0
+    ? top.map((t, i) => `${i + 1}. \`${t.module}\` — imported **${t.count}** time${t.count === 1 ? '' : 's'}`).join('\n')
+    : '_No imports detected._'
+
+  const md = `# Project Architecture
+
+_Generated by wmx analyze on ${new Date().toISOString()}_
+
+## Folder Structure
+
+\`\`\`
+${result.folderTree}
+\`\`\`
+
+## API Routes
+
+${routeTable}
+
+## Top Imports
+
+${importList}
+
+## Exports Summary
+
+Total exported symbols: **${result.exports.length}**
+
+| Type | Count |
+|------|-------|
+| Functions | ${result.exports.filter(e => e.type === 'function').length} |
+| Classes | ${result.exports.filter(e => e.type === 'class').length} |
+| Constants | ${result.exports.filter(e => e.type === 'const').length} |
+| Types | ${result.exports.filter(e => e.type === 'type').length} |
+`
+
+  await fs.writeFile(path.join(outputDir, 'analysis.md'), md, 'utf8')
+
+  await fs.writeFile(
+    path.join(outputDir, 'analysis.json'),
+    JSON.stringify(result, null, 2),
+    'utf8'
+  )
+}
+
+// ── Project structure tree helper (for generateReadme) ────────────────────────
+
+const PROJ_IGNORE_DIRS  = new Set(['node_modules', '.git', 'dist', '.wmx'])
+const PROJ_IGNORE_FILES = new Set(['.env', '.env.example'])
+
+async function buildProjectStructure(dir: string, maxDepth: number, depth = 0): Promise<string> {
+  if (depth >= maxDepth) return ''
+
+  let entries: string[]
+  try {
+    entries = await fs.readdir(dir)
+  } catch {
+    return ''
+  }
+
+  const filtered = entries.filter(e => {
+    if (PROJ_IGNORE_DIRS.has(e)) return false
+    if (PROJ_IGNORE_FILES.has(e)) return false
+    if (/\.lock$/.test(e)) return false
+    return true
+  })
+  filtered.sort()
+
+  const indent = '  '.repeat(depth)
+  const lines: string[] = []
+
+  for (const entry of filtered) {
+    const fullPath = path.join(dir, entry)
+    let isDir = false
+    try {
+      const stat = await fs.stat(fullPath)
+      isDir = stat.isDirectory()
+    } catch {
+      continue
+    }
+
+    if (isDir) {
+      lines.push(`${indent}${entry}/`)
+      const sub = await buildProjectStructure(fullPath, maxDepth, depth + 1)
+      if (sub) lines.push(sub)
+    } else {
+      lines.push(`${indent}${entry}`)
+    }
+  }
+
+  return lines.join('\n')
+}
+
+// ── generateReadme ────────────────────────────────────────────────────────────
+
+export async function generateReadme(cwd: string): Promise<string> {
+  // Read package.json
+  let pkg: Record<string, unknown> = {}
+  try {
+    const raw = await fs.readFile(path.join(cwd, 'package.json'), 'utf8')
+    pkg = JSON.parse(raw) as Record<string, unknown>
+  } catch { /* missing or invalid — use defaults */ }
+
+  // Read .wmxrc.json
+  let wmxrc: Record<string, unknown> = {}
+  try {
+    const raw = await fs.readFile(path.join(cwd, '.wmxrc.json'), 'utf8')
+    wmxrc = JSON.parse(raw) as Record<string, unknown>
+  } catch { /* missing — use defaults */ }
+
+  // Read .env.example
+  let envExampleRaw = ''
+  try {
+    envExampleRaw = await fs.readFile(path.join(cwd, '.env.example'), 'utf8')
+  } catch { /* missing — handled below */ }
+
+  // 1. Title
+  const title = (pkg.name as string | undefined) ?? 'My Project'
+
+  // 2. Description
+  const description = (pkg.description as string | undefined) ?? 'A project built with wmx'
+
+  // 3. Tech Stack
+  const deps    = (pkg.dependencies    as Record<string, string> | undefined) ?? {}
+  const devDeps = (pkg.devDependencies as Record<string, string> | undefined) ?? {}
+  const allDeps = { ...deps, ...devDeps }
+
+  const techMap: Array<[string, string]> = [
+    ['react',    'React'],
+    ['express',  'Express'],
+    ['mongoose', 'MongoDB'],
+    ['next',     'Next.js'],
+    ['pg',       'PostgreSQL'],
+    ['vue',      'Vue'],
+  ]
+  const detectedTech = techMap
+    .filter(([key]) => key in allDeps)
+    .map(([, label]) => `- ${label}`)
+  const techStackSection = detectedTech.length > 0
+    ? detectedTech.join('\n')
+    : '_No tech stack detected._'
+
+  // 4. Prerequisites
+  const packageManager = wmxrc.packageManager as string | undefined
+  const prereqItems = ['- Node.js >= 18', ...(packageManager ? [`- ${packageManager}`] : [])]
+  const prerequisitesSection = prereqItems.join('\n')
+
+  // 5. Installation
+  const repoObj = pkg.repository as string | { url?: string } | undefined
+  const repoUrl = typeof repoObj === 'string'
+    ? repoObj
+    : (repoObj?.url ?? 'https://github.com/your-org/your-repo')
+  const projectName = (pkg.name as string | undefined) ?? 'your-project'
+  const installCmd = packageManager === 'pnpm' ? 'pnpm install'
+    : packageManager === 'bun'  ? 'bun install'
+    : packageManager === 'yarn' ? 'yarn install'
+    : 'npm install'
+
+  // 6. Environment Variables
+  const envKeys = envExampleRaw
+    .split('\n')
+    .filter(line => line.includes('=') && !line.trimStart().startsWith('#'))
+    .map(line => line.split('=')[0].trim())
+    .filter(Boolean)
+  const envSection = envKeys.length > 0
+    ? '```bash\n' + envKeys.map(k => `${k}=`).join('\n') + '\n```'
+    : '_No environment variables required._'
+
+  // 7. Available Scripts
+  const scripts = (pkg.scripts as Record<string, string> | undefined) ?? {}
+  const scriptEntries = Object.entries(scripts)
+  const scriptsSection = scriptEntries.length > 0
+    ? scriptEntries.map(([key, val]) => `- \`npm run ${key}\` — ${val}`).join('\n')
+    : '_No scripts defined._'
+
+  // 8. Project Structure (2 levels deep)
+  const structure = await buildProjectStructure(cwd, 2)
+
+  // 9. License
+  const license = (pkg.license as string | undefined) ?? 'MIT'
+
+  return `# ${title}
+
+${description}
+
+## Tech Stack
+
+${techStackSection}
+
+## Prerequisites
+
+${prerequisitesSection}
+
+## Installation
+
+\`\`\`bash
+1. git clone ${repoUrl}
+2. cd ${projectName}
+3. ${installCmd}
+\`\`\`
+
+## Environment Variables
+
+${envSection}
+
+## Available Scripts
+
+${scriptsSection}
+
+## Project Structure
+
+\`\`\`
+${structure}
+\`\`\`
+
+## License
+
+This project is licensed under the ${license} license.
+`
+}
+
+// ── generateArchitectureDocs ──────────────────────────────────────────────────
+
+export function generateArchitectureDocs(analysis: AnalysisResult): string {
+  // Derive a unique source-file count from the data available in AnalysisResult
+  const uniqueFiles = new Set([
+    ...analysis.imports.map(i => i.from),
+    ...analysis.exports.map(e => e.file),
+    ...analysis.routes.map(r => r.file),
+  ]).size
+
+  // API Routes table
+  const routeTable = analysis.routes.length > 0
+    ? [
+        '| Method | Endpoint | File | Description |',
+        '|--------|----------|------|-------------|',
+        ...analysis.routes.map(r =>
+          `| \`${r.method}\` | \`${r.path}\` | ${r.file} |  |`
+        )
+      ].join('\n')
+    : '_No API routes detected._'
+
+  // Key Dependencies — external (non-relative) import targets, deduped
+  const externalDeps = [...new Set(
+    analysis.imports
+      .map(i => i.to)
+      .filter(m => !m.startsWith('.') && !m.startsWith('/'))
+  )].sort()
+  const depsSection = externalDeps.length > 0
+    ? externalDeps.map(d => `- \`${d}\``).join('\n')
+    : '_No external dependencies detected._'
+
+  return `# Project Architecture
+
+## Overview
+
+This document describes the architecture of the project.
+
+Analyzed **${uniqueFiles}** source files.
+
+## Folder Structure
+
+\`\`\`
+${analysis.folderTree}
+\`\`\`
+
+## API Routes
+
+${routeTable}
+
+## Key Dependencies
+
+${depsSection}
+`
+}
+
+// ── generateApiDocs ───────────────────────────────────────────────────────────
+
+export function generateApiDocs(routes: RouteEntry[]): string {
+  const routeTable = routes.length > 0
+    ? [
+        '| Method | Endpoint | File | Description |',
+        '|--------|----------|------|-------------|',
+        ...routes.map(r =>
+          `| \`${r.method}\` | \`${r.path}\` | ${r.file} |  |`
+        )
+      ].join('\n')
+    : '_No routes detected._'
+
+  return `# API Reference
+
+${routeTable}
+
+_Update the Description column with endpoint-specific documentation._
+`
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { ScaffoldGenerator } from "./scaffold.js";
+export { generateAnalysis, generateReadme, generateArchitectureDocs, generateApiDocs } from "./docsGenerator.js";
+export { generateVercelConfig, generateRenderConfig, generateNetlifyConfig } from "./deployGenerator.js";

package/src/scaffold.ts

@@ -0,0 +1,106 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import fs from 'fs-extra'
+import { execa } from 'execa'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+interface ScaffoldAnswers {
+  projectName: string
+  framework: string
+  backend: string
+  database: string
+  packageManager: string
+  features?: string[]
+  [key: string]: unknown
+}
+
+export class ScaffoldGenerator {
+  static async generate(answers: ScaffoldAnswers): Promise<void> {
+    const templateName = ScaffoldGenerator.resolveTemplate(answers)
+    const templatesDir = path.join(__dirname, '..', 'templates')
+    const templatePath = path.join(templatesDir, templateName)
+    const targetPath = path.join(process.cwd(), answers.projectName)
+
+    if (!(await fs.pathExists(templatePath))) {
+      throw new Error(`Template not found: ${templateName} (looked in ${templatePath})`)
+    }
+
+    if (await fs.pathExists(targetPath)) {
+      throw new Error(`Directory already exists: ${targetPath}`)
+    }
+
+    console.log(`\nScaffolding "${answers.projectName}" from template "${templateName}"...`)
+
+    await fs.copy(templatePath, targetPath)
+
+    await ScaffoldGenerator.replaceInAllFiles(targetPath, '__PROJECT_NAME__', answers.projectName)
+
+    const wmxrc = {
+      projectName: answers.projectName,
+      framework: answers.framework,
+      backend: answers.backend,
+      database: answers.database,
+      packageManager: answers.packageManager,
+      features: answers.features ?? [],
+      scaffoldedAt: new Date().toISOString(),
+      template: templateName
+    }
+    await fs.writeJson(path.join(targetPath, '.wmxrc.json'), wmxrc, { spaces: 2 })
+
+    console.log(`\nRunning ${answers.packageManager} install...`)
+    try {
+      if (templateName === 'react-express-mongo') {
+        await execa(answers.packageManager, ['install'], {
+          cwd: path.join(targetPath, 'frontend'),
+          stdio: 'inherit'
+        })
+        await execa(answers.packageManager, ['install'], {
+          cwd: path.join(targetPath, 'backend'),
+          stdio: 'inherit'
+        })
+      } else {
+        await execa(answers.packageManager, ['install'], {
+          cwd: targetPath,
+          stdio: 'inherit'
+        })
+      }
+    } catch (err) {
+      console.warn(`\nPackage install failed (you can run it manually): ${(err as Error).message}`)
+    }
+
+    console.log(`\n✅ Project "${answers.projectName}" created at ${targetPath}`)
+    console.log(`   cd ${answers.projectName} and follow the README to get started.\n`)
+  }
+
+  private static resolveTemplate(answers: ScaffoldAnswers): string {
+    const fw = answers.framework?.toLowerCase() ?? ''
+    const be = answers.backend?.toLowerCase() ?? ''
+    const db = answers.database?.toLowerCase() ?? ''
+
+    if (fw.includes('next')) return 'nextjs-postgres'
+    if (fw.includes('react') && be.includes('express') && db.includes('mongo')) return 'react-express-mongo'
+    return 'react-express-mongo'
+  }
+
+  private static async replaceInAllFiles(dir: string, search: string, replacement: string): Promise<void> {
+    const entries = await fs.readdir(dir, { withFileTypes: true })
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name)
+      if (entry.isDirectory()) {
+        await ScaffoldGenerator.replaceInAllFiles(fullPath, search, replacement)
+      } else {
+        try {
+          const content = await fs.readFile(fullPath, 'utf8')
+          if (content.includes(search)) {
+            const updated = content.split(search).join(replacement)
+            await fs.writeFile(fullPath, updated, 'utf8')
+          }
+        } catch {
+          // Skip binary files silently
+        }
+      }
+    }
+  }
+}

package/templates/nextjs-postgres/.env.example

@@ -0,0 +1 @@
+DATABASE_URL=

package/templates/nextjs-postgres/README.md

@@ -0,0 +1,13 @@
+# __PROJECT_NAME__
+
+A Next.js 14 + PostgreSQL + Drizzle ORM starter, scaffolded by WMX CLI.
+
+## Getting started
+
+```bash
+cp .env.example .env
+# Set DATABASE_URL in .env (e.g. postgresql://user:pass@localhost:5432/dbname)
+npm install
+npm run db:push   # push schema to your database
+npm run dev       # start dev server on http://localhost:3000
+```

package/templates/nextjs-postgres/drizzle.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from 'drizzle-kit'
+
+export default {
+  schema: './src/db/schema.ts',
+  out: './drizzle',
+  driver: 'pg',
+  dbCredentials: {
+    connectionString: process.env.DATABASE_URL!
+  }
+} satisfies Config

package/templates/nextjs-postgres/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "db:generate": "drizzle-kit generate",
+    "db:push": "drizzle-kit push"
+  },
+  "dependencies": {
+    "next": "^14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "pg": "^8.11.0",
+    "drizzle-orm": "^0.29.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/pg": "^8.10.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "drizzle-kit": "^0.20.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/nextjs-postgres/src/app/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '__PROJECT_NAME__',
+  description: 'Built with Next.js 14 and PostgreSQL'
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

package/templates/nextjs-postgres/src/app/page.tsx

@@ -0,0 +1,8 @@
+export default function Home() {
+  return (
+    <main style={{ fontFamily: 'sans-serif', textAlign: 'center', marginTop: '4rem' }}>
+      <h1>Welcome to __PROJECT_NAME__</h1>
+      <p>Next.js 14 + PostgreSQL + Drizzle ORM starter — edit <code>src/app/page.tsx</code> to begin.</p>
+    </main>
+  )
+}

package/templates/react-express-mongo/README.md

@@ -0,0 +1,23 @@
+# __PROJECT_NAME__
+
+A full-stack starter built with React 18 + Express + MongoDB, scaffolded by WMX CLI.
+
+## Getting started
+
+### Backend
+```bash
+cd backend
+cp .env.example .env
+# Fill in MONGODB_URI and JWT_SECRET in .env
+npm install
+npm run dev
+```
+
+### Frontend
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+The frontend runs on http://localhost:5173 and proxies `/api` requests to the backend on port 5000.

package/templates/react-express-mongo/backend/.env.example

@@ -0,0 +1,3 @@
+PORT=5000
+MONGODB_URI=
+JWT_SECRET=

package/templates/react-express-mongo/backend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__PROJECT_NAME__-backend",
+  "version": "0.1.0",
+  "type": "commonjs",
+  "scripts": {
+    "dev": "ts-node-dev --respawn src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.0.0",
+    "express": "^4.18.0",
+    "mongoose": "^8.0.0"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.13",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.0.0",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/react-express-mongo/backend/src/db.ts

@@ -0,0 +1,16 @@
+import mongoose from 'mongoose'
+
+export async function connectDB(): Promise<void> {
+  const uri = process.env.MONGODB_URI
+  if (!uri) {
+    console.warn('MONGODB_URI not set — skipping DB connection')
+    return
+  }
+  try {
+    await mongoose.connect(uri)
+    console.log('MongoDB connected')
+  } catch (err) {
+    console.error('MongoDB connection error:', err)
+    process.exit(1)
+  }
+}

package/templates/react-express-mongo/backend/src/index.ts

@@ -0,0 +1,22 @@
+import express from 'express'
+import cors from 'cors'
+import dotenv from 'dotenv'
+import { connectDB } from './db'
+
+dotenv.config()
+
+const app = express()
+const PORT = process.env.PORT || 5000
+
+app.use(cors())
+app.use(express.json())
+
+app.get('/api/health', (_req, res) => {
+  res.json({ status: 'ok', project: '__PROJECT_NAME__' })
+})
+
+connectDB().then(() => {
+  app.listen(PORT, () => {
+    console.log(`__PROJECT_NAME__ backend running on http://localhost:${PORT}`)
+  })
+})

package/templates/react-express-mongo/frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-express-mongo/frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "__PROJECT_NAME__-frontend",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  }
+}

package/templates/react-express-mongo/frontend/src/App.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+function App() {
+  return (
+    <div style={{ fontFamily: 'sans-serif', textAlign: 'center', marginTop: '4rem' }}>
+      <h1>Welcome to __PROJECT_NAME__</h1>
+      <p>React + Express + MongoDB starter — edit <code>src/App.tsx</code> to get started.</p>
+    </div>
+  )
+}
+
+export default App

package/templates/react-express-mongo/frontend/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

package/templates/react-express-mongo/frontend/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:5000'
+    }
+  }
+})

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}