create-apollo-monorepo 0.9.1 → 0.9.3

package/README.md

@@ -6,15 +6,15 @@ mounted as a **git submodule** backend (read-only — pull updates only).
 ## Usage
 
 ```bash
-npx create-apollo-monorepo thamc-new
+npx create-apollo-monorepo my-site
 ```
 
 With flags:
 
 ```bash
-npx create-apollo-monorepo thamc-new \
-  --frontend-name "@thamc/frontend" \
-  --db "postgresql://user:pass@localhost:5432/thamc" \
+npx create-apollo-monorepo my-site \
+  --frontend-name "@my-site/frontend" \
+  --db "postgresql://user:pass@localhost:5432/my-site" \
   --url "http://localhost:3000" \
   --locale th
 ```
@@ -22,9 +22,9 @@ npx create-apollo-monorepo thamc-new \
 ## Result
 
 ```
-thamc-new/
+my-site/
 ├── apps/
-│   ├── frontend/          ← @thamc/frontend (Next.js skeleton)
+│   ├── frontend/          ← @my-site/frontend (Next.js skeleton)
 │   └── backend/           ← git submodule → apollo-cms
 ├── package.json           ← root workspace
 ├── pnpm-workspace.yaml
@@ -89,7 +89,7 @@ subdomains (e.g. `cms.example.com` + `example.com`).
 ## After install
 
 ```bash
-cd thamc-new
+cd my-site
 pnpm backend:setup   # push schema + seed apollo-cms
 pnpm dev             # frontend :3001 + backend :3000 in parallel
 ```

package/index.mjs

@@ -16,7 +16,7 @@
 
 import { execSync } from "node:child_process";
 import { randomBytes } from "node:crypto";
-import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, writeFileSync, symlinkSync, rmSync } from "node:fs";
 import { resolve, basename } from "node:path";
 import { createInterface } from "node:readline";
 
@@ -27,7 +27,14 @@ const BACKEND_BRANCH = "main";
 const BACKEND_PATH = "apps/backend";
 const FRONTEND_PATH = "apps/frontend";
 const PROXY_PATH = "apps/proxy";
-const MIN_NODE_MAJOR = 20;
+const MIN_NODE_MAJOR = 22;
+
+// Default dev ports. Kept in sync with scripts/with-env.mjs and the proxy
+// template. .env.local is the runtime source of truth — these are the
+// installer-side fallbacks for computing initial URL defaults.
+const DEFAULT_PROXY_PORT = 3030;
+const DEFAULT_FRONTEND_PORT = 3001;
+const DEFAULT_BACKEND_PORT = 3002;
 
 const COLORS = {
   reset: "\x1b[0m",
@@ -46,9 +53,9 @@ ${COLORS.bold}Usage:${COLORS.reset}
   npx create-apollo-monorepo <directory> [flags]
 
 ${COLORS.bold}Examples:${COLORS.reset}
-  npx create-apollo-monorepo thamc-new
-  npx create-apollo-monorepo thamc-new --frontend-name "@thamc/frontend"
-  npx create-apollo-monorepo thamc-new --backend-branch develop --skip-install
+  npx create-apollo-monorepo my-site
+  npx create-apollo-monorepo my-site --frontend-name "@my-site/frontend"
+  npx create-apollo-monorepo my-site --backend-branch develop --skip-install
 
 ${COLORS.bold}Flags:${COLORS.reset}
       --frontend-name <name>   Frontend package name (default: "@<dir>/frontend")
@@ -283,7 +290,14 @@ async function gatherEnv(flags, { singleOrigin }) {
   let dbUrl = flags.db;
   // In single-origin mode the frontend is the public entry → default :3001.
   // In separate-origins mode the backend is the public CMS URL → default :3000.
-  const defaultSiteUrl = singleOrigin ? "http://localhost:3001" : "http://localhost:3000";
+  // Public origin = frontend in single-origin mode (frontend rewrites /admin/*,
+  // /api/*, /uploads/* to the backend), backend in separate-origins mode.
+  // For `pnpm dev:rp` switch this to http://localhost:${PROXY_PORT} in .env.local.
+  // Derived from the PORT constants so changing a default updates both the
+  // .env.local seed and the prompt's suggested value.
+  const defaultSiteUrl = singleOrigin
+    ? `http://localhost:${DEFAULT_FRONTEND_PORT}`
+    : `http://localhost:${DEFAULT_BACKEND_PORT}`;
   let siteUrl = flags.url ?? defaultSiteUrl;
   let locale = flags.locale ?? "en";
 
@@ -355,16 +369,17 @@ function writeRootPackageJson(targetDir, dirName) {
       // rebuild and the backend's plugin loader picks up the fresh
       // dist/server.mjs on next request.
       dev:
-        "pnpm predev:setup && concurrently -k -n FE,BE,PL -c blue,magenta,yellow \"pnpm --filter ./apps/frontend dev\" \"pnpm --filter ./apps/backend exec next dev\" \"pnpm cms-plugins:dev\"",
+        "pnpm predev:setup && concurrently -k -n FE,BE,PL -c blue,magenta,yellow \"pnpm dev:frontend\" \"pnpm dev:backend\" \"pnpm cms-plugins:dev\"",
       // Optional single-origin dev: same as `pnpm dev` but adds a Node.js
-      // reverse proxy on :3030 that fronts FE :3001 + BE :3000. Use it when
-      // you want one URL, shared cookies, and no CORS — without nginx.
+      // reverse proxy on :3030 (PROXY_PORT) that fronts FE :3001 (FRONTEND_PORT)
+      // + BE :3002 (BACKEND_PORT). Ports come from .env.local; override there.
       "dev:rp":
-        "pnpm predev:setup && concurrently -k -n FE,BE,PL,PX -c blue,magenta,yellow,cyan \"pnpm --filter ./apps/frontend dev\" \"pnpm --filter ./apps/backend exec next dev\" \"pnpm cms-plugins:dev\" \"pnpm dev:proxy\"",
-      "dev:proxy": "node apps/proxy/server.mjs",
-      "dev:frontend": "pnpm --filter ./apps/frontend dev",
+        "pnpm predev:setup && concurrently -k -n FE,BE,PL,PX -c blue,magenta,yellow,cyan \"pnpm dev:frontend\" \"pnpm dev:backend\" \"pnpm cms-plugins:dev\" \"pnpm dev:proxy\"",
+      "dev:proxy": "node scripts/with-env.mjs node apps/proxy/server.mjs",
+      "dev:frontend":
+        "node scripts/with-env.mjs --port=FRONTEND_PORT pnpm --filter ./apps/frontend exec next dev",
       "dev:backend":
-        "pnpm predev:setup && pnpm --filter ./apps/backend exec next dev",
+        "pnpm predev:setup && node scripts/with-env.mjs --port=BACKEND_PORT pnpm --filter ./apps/backend exec next dev",
       "dev:cron": "pnpm --filter ./apps/backend exec bun scripts/dev-cron.ts",
       // Build pipeline: cms-plugins → apollo-cms's own plugins → backend → frontend.
       // `prebuild` runs first (npm/pnpm convention) and fails fast if the
@@ -375,17 +390,19 @@ function writeRootPackageJson(targetDir, dirName) {
       "build:backend":
         "pnpm cms-plugins:build && pnpm --filter ./apps/backend exec bun run plugins:build && pnpm --filter ./apps/backend build",
       "build:frontend": "pnpm --filter ./apps/frontend build",
-      // Production start. Runs FE :3001 + BE :3000 in parallel via
-      // \`next start\`. Run \`pnpm backend:upgrade\` BEFORE this — start does
-      // NOT run migrations on boot (zero-downtime restart safety).
+      // Production start. Runs FE :FRONTEND_PORT + BE :BACKEND_PORT (defaults
+      // 3001 + 3002 from .env.local). Run \`pnpm backend:upgrade\` BEFORE this —
+      // start does NOT run migrations on boot (zero-downtime restart safety).
       start:
-        "concurrently -k -n FE,BE -c blue,magenta \"pnpm --filter ./apps/frontend start\" \"pnpm --filter ./apps/backend exec next start\"",
-      // Single-origin production: FE + BE + Node reverse proxy on :3030.
+        "concurrently -k -n FE,BE -c blue,magenta \"pnpm start:frontend\" \"pnpm start:backend\"",
+      // Single-origin production: FE + BE + Node reverse proxy on :PROXY_PORT.
       "start:rp":
-        "concurrently -k -n FE,BE,PX -c blue,magenta,cyan \"pnpm --filter ./apps/frontend start\" \"pnpm --filter ./apps/backend exec next start\" \"pnpm start:proxy\"",
-      "start:proxy": "NODE_ENV=production node apps/proxy/server.mjs",
-      "start:frontend": "pnpm --filter ./apps/frontend start",
-      "start:backend": "pnpm --filter ./apps/backend exec next start",
+        "concurrently -k -n FE,BE,PX -c blue,magenta,cyan \"pnpm start:frontend\" \"pnpm start:backend\" \"pnpm start:proxy\"",
+      "start:proxy": "NODE_ENV=production node scripts/with-env.mjs node apps/proxy/server.mjs",
+      "start:frontend":
+        "node scripts/with-env.mjs --port=FRONTEND_PORT pnpm --filter ./apps/frontend exec next start",
+      "start:backend":
+        "node scripts/with-env.mjs --port=BACKEND_PORT pnpm --filter ./apps/backend exec next start",
       // Self-hosted scheduler fallback. Vercel deploys use Vercel Cron via
       // apps/backend/vercel.json — skip this on Vercel. For Docker / VPS
       // you can either run \`pnpm start:cron\` alongside \`pnpm start\` (PM2
@@ -418,33 +435,7 @@ function writeRootPackageJson(targetDir, dirName) {
     devDependencies: {
       concurrently: "^9.0.0",
     },
-    engines: { node: ">=20", pnpm: ">=9" },
-    pnpm: {
-      // apollo-cms transitively pulls multiple esbuild versions (0.18, 0.25, 0.27).
-      // pnpm's binary symlink can pick the wrong platform binary for esbuild's
-      // postinstall version check, failing with "Expected X.Y.Z but got A.B.C".
-      // Allow listed packages to run their build/postinstall scripts; the rest
-      // are skipped (pnpm 10 default is empty allow-list).
-      onlyBuiltDependencies: [
-        "@parcel/watcher",
-        "@rolldown/binding-darwin-arm64",
-        "@rolldown/binding-linux-arm64-gnu",
-        "@rolldown/binding-linux-x64-gnu",
-        "@sentry/cli",
-        "@swc/core",
-        "@swc/core-darwin-arm64",
-        "@swc/core-darwin-x64",
-        "@swc/core-linux-arm64-gnu",
-        "@swc/core-linux-x64-gnu",
-        "better-sqlite3",
-        "core-js",
-        "core-js-pure",
-        "esbuild",
-        "msw",
-        "sharp",
-        "unrs-resolver",
-      ],
-    },
+    engines: { node: ">=22", pnpm: ">=10" },
   };
   writeFileSync(resolve(targetDir, "package.json"), JSON.stringify(pkg, null, 2) + "\n");
 
@@ -458,17 +449,77 @@ function writeRootPackageJson(targetDir, dirName) {
       "strict-peer-dependencies=false",
       "public-hoist-pattern[]=*esbuild*",
       "public-hoist-pattern[]=*types*",
+      // Next.js 16's instrumentation hook (used by Sentry / OpenTelemetry
+      // shipped via apollo-cms) loads require-in-the-middle / import-in-the-middle
+      // at runtime via a bare require. Under pnpm's strict node_modules these
+      // sit deep inside .pnpm/ and the resolver can't see them — Next then
+      // crashes on boot with "Failed to load external module require-in-the-middle".
+      // Hoisting them (plus their `shimmer` dep) to the root node_modules fixes it.
+      "public-hoist-pattern[]=*require-in-the-middle*",
+      "public-hoist-pattern[]=*import-in-the-middle*",
+      "public-hoist-pattern[]=*shimmer*",
       "shell-emulator=true",
       "",
     ].join("\n"),
   );
 }
 
+// Link an app's .env.local to the monorepo root .env.local so the root file
+// stays the single source of truth. Next.js only reads .env.local from its
+// own CWD, so this symlink lets `cd apps/<app> && next dev|build` see the
+// shared config. Falls back to a regular copy (with a warning) on platforms
+// where symlink creation requires elevation (Windows non-admin).
+function linkRootEnvLocal(targetDir, appRelPath, fallbackLines) {
+  const envPath = resolve(targetDir, appRelPath, ".env.local");
+  // appRelPath is `apps/<name>` (2 segments deep) → `../../.env.local`.
+  const depth = appRelPath.split("/").filter(Boolean).length;
+  const linkTarget = "../".repeat(depth) + ".env.local";
+  if (existsSync(envPath)) rmSync(envPath);
+  try {
+    symlinkSync(linkTarget, envPath);
+    success(`${appRelPath}/.env.local → ${linkTarget} (symlink)`);
+  } catch {
+    writeFileSync(envPath, [...fallbackLines, ""].join("\n"));
+    warn(
+      `symlink failed — wrote a copy at ${appRelPath}/.env.local (keep it in sync with the root file manually).`,
+    );
+  }
+}
+
 function writePnpmWorkspace(targetDir) {
-  writeFileSync(
-    resolve(targetDir, "pnpm-workspace.yaml"),
-    "packages:\n  - 'apps/*'\n  - 'apps/cms-plugins/*'\n",
-  );
+  // pnpm 10 reads `onlyBuiltDependencies` from pnpm-workspace.yaml (the
+  // package.json#pnpm location is deprecated for workspaces). apollo-cms
+  // transitively pulls multiple esbuild versions (0.18, 0.25, 0.27); pnpm's
+  // binary symlink can pick the wrong platform binary for esbuild's
+  // postinstall version check, failing with "Expected X.Y.Z but got A.B.C".
+  // Allow listed packages to run their build/postinstall scripts; the rest
+  // are skipped (pnpm 10 default is empty allow-list).
+  const yaml = [
+    "packages:",
+    "  - 'apps/*'",
+    "  - 'apps/cms-plugins/*'",
+    "",
+    "onlyBuiltDependencies:",
+    "  - '@parcel/watcher'",
+    "  - '@rolldown/binding-darwin-arm64'",
+    "  - '@rolldown/binding-linux-arm64-gnu'",
+    "  - '@rolldown/binding-linux-x64-gnu'",
+    "  - '@sentry/cli'",
+    "  - '@swc/core'",
+    "  - '@swc/core-darwin-arm64'",
+    "  - '@swc/core-darwin-x64'",
+    "  - '@swc/core-linux-arm64-gnu'",
+    "  - '@swc/core-linux-x64-gnu'",
+    "  - 'better-sqlite3'",
+    "  - 'core-js'",
+    "  - 'core-js-pure'",
+    "  - 'esbuild'",
+    "  - 'msw'",
+    "  - 'sharp'",
+    "  - 'unrs-resolver'",
+    "",
+  ].join("\n");
+  writeFileSync(resolve(targetDir, "pnpm-workspace.yaml"), yaml);
 }
 
 // Single-origin nginx reference. Only emitted when adminPrefix is set, since
@@ -545,10 +596,43 @@ function writeProxyApp(targetDir, dirName, adminPrefix) {
 
 import http from "node:http";
 import net from "node:net";
+import { readFileSync, existsSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// Load root .env.local so the proxy honors PROXY_PORT/FRONTEND_PORT/BACKEND_PORT
+// alongside the frontend & backend. Process env still wins (12-factor friendly).
+(function loadRootEnv() {
+  try {
+    const here = dirname(fileURLToPath(import.meta.url));
+    const envPath = resolve(here, "../../.env.local");
+    if (!existsSync(envPath)) return;
+    for (const raw of readFileSync(envPath, "utf8").split(/\\r?\\n/)) {
+      const line = raw.trim();
+      if (!line || line.startsWith("#")) continue;
+      const eq = line.indexOf("=");
+      if (eq < 0) continue;
+      const key = line.slice(0, eq).trim();
+      if (!/^[A-Z_][A-Z0-9_]*$/i.test(key)) continue;
+      if (process.env[key] !== undefined) continue;
+      let val = line.slice(eq + 1).trim();
+      if ((val.startsWith('"') && val.endsWith('"')) || (val.startsWith("'") && val.endsWith("'"))) {
+        val = val.slice(1, -1);
+      }
+      process.env[key] = val;
+    }
+  } catch {
+    // Best-effort. The proxy still runs on its hardcoded fallbacks.
+  }
+})();
 
-const PORT = Number(process.env.PORT ?? 3030);
-const BACKEND = parseTarget(process.env.BACKEND ?? "http://127.0.0.1:3000");
-const FRONTEND = parseTarget(process.env.FRONTEND ?? "http://127.0.0.1:3001");
+// Backward-compatible: PROXY_PORT/FRONTEND_PORT/BACKEND_PORT are the new names;
+// PORT/FRONTEND/BACKEND are still honored if explicitly set in process.env.
+const PORT = Number(process.env.PROXY_PORT ?? process.env.PORT ?? 3030);
+const BACKEND_HOST = process.env.BACKEND ?? \`http://127.0.0.1:\${process.env.BACKEND_PORT ?? 3002}\`;
+const FRONTEND_HOST = process.env.FRONTEND ?? \`http://127.0.0.1:\${process.env.FRONTEND_PORT ?? 3001}\`;
+const BACKEND = parseTarget(BACKEND_HOST);
+const FRONTEND = parseTarget(FRONTEND_HOST);
 
 const ADMIN_PREFIX = process.env.ADMIN_PREFIX ?? "${prefix}";
 // Pipe-separated list of /api/<segment> paths that route to the backend.
@@ -762,7 +846,7 @@ function parseTarget(input) {
     scripts: {
       start: "node server.mjs",
     },
-    engines: { node: ">=20" },
+    engines: { node: ">=22" },
   };
   writeFileSync(resolve(dir, "package.json"), JSON.stringify(pkg, null, 2) + "\n");
 
@@ -830,6 +914,10 @@ The Node proxy is intended for dev and small self-hosted deploys.
 }
 
 function writeRootGitignore(targetDir) {
+  // NOTE: .env.local is intentionally NOT ignored — it holds shared dev port
+  // defaults (PROXY_PORT/FRONTEND_PORT/BACKEND_PORT) and other non-secret
+  // workspace knobs that should travel with the repo. Keep real secrets in
+  // .env (ignored) or apps/backend/.env.local (ignored by the submodule).
   const ignore = [
     "node_modules",
     ".pnpm-store",
@@ -838,8 +926,6 @@ function writeRootGitignore(targetDir) {
     "dist",
     "build",
     ".env",
-    ".env.local",
-    ".env*.local",
     "*.log",
     ".DS_Store",
     "",
@@ -847,16 +933,16 @@ function writeRootGitignore(targetDir) {
   writeFileSync(resolve(targetDir, ".gitignore"), ignore);
 }
 
-function writeRootEnv(targetDir, { dbUrl, siteUrl, locale, authSecret, cronSecret, adminPrefix, backendInternalUrl }) {
+function writeRootEnv(targetDir, { dbUrl, siteUrl, locale, authSecret, cronSecret, adminPrefix, backendInternalUrl, pm2Namespace }) {
   const header = adminPrefix
     ? [
         "# Single-origin monorepo dev env",
-        "# Public origin = frontend (apps/frontend on :3001). Frontend rewrites /admin/*,",
-        "# /api/*, /uploads/*, and the asset prefix to the backend (apps/backend on :3000).",
+        `# Public origin = frontend (apps/frontend on :${DEFAULT_FRONTEND_PORT}). Frontend rewrites /admin/*,`,
+        `# /api/*, /uploads/*, and the asset prefix to the backend (apps/backend on :${DEFAULT_BACKEND_PORT}).`,
       ]
     : [
         "# Separate-origins monorepo dev env",
-        "# Backend runs at http://localhost:3000, frontend at http://localhost:3001.",
+        `# Backend runs at http://localhost:${DEFAULT_BACKEND_PORT}, frontend at http://localhost:${DEFAULT_FRONTEND_PORT}.`,
         "# To switch to single-origin: set APOLLO_ASSET_PREFIX (default: /admin) and",
         "# BACKEND_INTERNAL_URL, then add rewrites() to apps/frontend/next.config.ts.",
       ];
@@ -864,10 +950,25 @@ function writeRootEnv(targetDir, { dbUrl, siteUrl, locale, authSecret, cronSecre
   const lines = [
     ...header,
     "",
+    "# ── Dev server ports ─────────────────────────────────────────────",
+    "# Single source of truth for local ports. Consumed by:",
+    "#   • apps/proxy/server.mjs  (PROXY_PORT, FRONTEND_PORT, BACKEND_PORT)",
+    "#   • scripts/with-env.mjs   (maps FRONTEND_PORT/BACKEND_PORT → PORT",
+    "#                             when launching apps/frontend & apps/backend,",
+    "#                             and derives NEXT_PUBLIC_SITE_URL /",
+    "#                             BACKEND_INTERNAL_URL when those are unset)",
+    "# Override any of these; the proxy/frontend/backend will follow.",
+    `PROXY_PORT=${DEFAULT_PROXY_PORT}`,
+    `FRONTEND_PORT=${DEFAULT_FRONTEND_PORT}`,
+    `BACKEND_PORT=${DEFAULT_BACKEND_PORT}`,
+    "",
     "# ── Shared (consumed by both apps) ───────────────────────────────",
     `DATABASE_URL=${dbUrl}`,
     `APOLLO_SECRET=${authSecret}`,
     `CRON_SECRET=${cronSecret}`,
+    "# Public origin. In dev, leave blank to auto-derive from FRONTEND_PORT",
+    "# (single-origin) or BACKEND_PORT (separate-origins) via scripts/with-env.mjs.",
+    "# In prod set to the real domain (e.g. https://cms.example.com).",
     `NEXT_PUBLIC_SITE_URL=${siteUrl}`,
     `NEXT_PUBLIC_DEFAULT_LOCALE=${locale}`,
     "",
@@ -882,8 +983,15 @@ function writeRootEnv(targetDir, { dbUrl, siteUrl, locale, authSecret, cronSecre
       `APOLLO_ASSET_PREFIX=${adminPrefix}`,
       "# Project-specific plugins — keeps the apollo-cms submodule clean.",
       `APOLLO_EXTRA_PLUGINS_DIR=../cms-plugins`,
+      "# PM2 namespace — groups this project's processes so you can",
+      "# `pm2 stop <namespace>` / `pm2 restart <namespace>` independently of",
+      "# other projects on the same host. Consumed by ecosystem.config.cjs.",
+      `PM2_NAMESPACE=${pm2Namespace}`,
       "",
       "# ── Frontend (apps/frontend) ─────────────────────────────────────",
+      "# Where the frontend's rewrites point internally. In dev, leave blank",
+      "# to auto-derive http://127.0.0.1:${BACKEND_PORT} via scripts/with-env.mjs.",
+      "# In prod set to a private hostname (e.g. http://backend.internal:3000).",
       `BACKEND_INTERNAL_URL=${backendInternalUrl}`,
       "",
     );
@@ -892,6 +1000,10 @@ function writeRootEnv(targetDir, { dbUrl, siteUrl, locale, authSecret, cronSecre
       "# ── Backend (apps/backend) ───────────────────────────────────────",
       "# Project-specific plugins — keeps the apollo-cms submodule clean.",
       `APOLLO_EXTRA_PLUGINS_DIR=../cms-plugins`,
+      "# PM2 namespace — groups this project's processes so you can",
+      "# `pm2 stop <namespace>` / `pm2 restart <namespace>` independently of",
+      "# other projects on the same host. Consumed by ecosystem.config.cjs.",
+      `PM2_NAMESPACE=${pm2Namespace}`,
       "",
       "# ── Frontend (apps/frontend) ─────────────────────────────────────",
       `NEXT_PUBLIC_BACKEND_URL=${siteUrl}`,
@@ -913,9 +1025,12 @@ function writeFrontendApp(targetDir, frontendName, siteUrl, adminPrefix, backend
     version: "0.0.0",
     private: true,
     scripts: {
-      dev: "next dev -p 3001",
+      // No -p flag: Next.js reads PORT from env. The repo-root scripts use
+      // scripts/with-env.mjs --port=FRONTEND_PORT to inject the right value
+      // from .env.local (default 3001).
+      dev: "next dev",
       build: "next build",
-      start: "next start -p 3001",
+      start: "next start",
       lint: "next lint",
       typecheck: "tsc --noEmit",
     },
@@ -1045,7 +1160,8 @@ export default config;
 
   writeFileSync(
     resolve(dir, ".gitignore"),
-    ["node_modules", ".next", "dist", ".env.local", ""].join("\n"),
+    // .env.local is intentionally committed — it only contains dev port hints.
+    ["node_modules", ".next", "dist", ""].join("\n"),
   );
 
   // Vercel project config for the frontend. Skip cron + region pinning is
@@ -1273,6 +1389,88 @@ console.log(\`Run: pnpm install && pnpm cms-plugins:build && pnpm dev:backend\`)
   writeFileSync(resolve(scriptsDir, "new-cms-plugin.mjs"), script);
 }
 
+// Small launcher that loads root .env.local, applies port defaults
+// (PROXY_PORT=3030 / FRONTEND_PORT=3001 / BACKEND_PORT=3002), optionally maps
+// one of them onto PORT (Next.js reads PORT), and execs the rest of argv.
+//
+// Usage:
+//   node scripts/with-env.mjs [--port=VAR_NAME] <command> [args...]
+function writeWithEnvScript(targetDir) {
+  const scriptsDir = resolve(targetDir, "scripts");
+  mkdirSync(scriptsDir, { recursive: true });
+  const script = `#!/usr/bin/env node
+// Loads <repo-root>/.env.local so frontend / backend / proxy all share one
+// source of truth for ports. Process env still wins.
+//
+// Usage:
+//   node scripts/with-env.mjs [--port=VAR_NAME] <command> [args...]
+// --port=FRONTEND_PORT copies process.env.FRONTEND_PORT onto PORT before exec,
+// so \`next dev\` and \`next start\` pick up the right port without --port flags.
+
+import { existsSync, readFileSync } from "node:fs";
+import { spawn } from "node:child_process";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const envPath = resolve(here, "../.env.local");
+
+if (existsSync(envPath)) {
+  for (const raw of readFileSync(envPath, "utf8").split(/\\r?\\n/)) {
+    const line = raw.trim();
+    if (!line || line.startsWith("#")) continue;
+    const eq = line.indexOf("=");
+    if (eq < 0) continue;
+    const k = line.slice(0, eq).trim();
+    if (!/^[A-Z_][A-Z0-9_]*$/i.test(k)) continue;
+    if (process.env[k] !== undefined) continue;
+    let v = line.slice(eq + 1).trim();
+    if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) {
+      v = v.slice(1, -1);
+    }
+    process.env[k] = v;
+  }
+}
+
+// Fallbacks — keep in sync with apps/proxy/server.mjs and PM2 config.
+process.env.PROXY_PORT ||= "3030";
+process.env.FRONTEND_PORT ||= "3001";
+process.env.BACKEND_PORT ||= "3002";
+
+// Derive URL vars from PORTs when unset. Dev-friendly: edit a port and
+// everything follows. Prod-friendly: set these explicitly to real hostnames
+// (e.g. https://cms.example.com, http://backend.internal:3000) and the
+// derivation is bypassed.
+//
+// NEXT_PUBLIC_SITE_URL is the public origin — defaults to the frontend port
+// (frontend rewrites /admin, /api, /uploads to the backend). For \`pnpm dev:rp\`
+// set it to http://localhost:\${PROXY_PORT} so Better Auth / OAuth callbacks
+// land on the unified origin.
+process.env.NEXT_PUBLIC_SITE_URL ||= \`http://localhost:\${process.env.FRONTEND_PORT}\`;
+process.env.BACKEND_INTERNAL_URL ||= \`http://127.0.0.1:\${process.env.BACKEND_PORT}\`;
+
+const args = process.argv.slice(2);
+if (args[0]?.startsWith("--port=")) {
+  const name = args.shift().slice(7);
+  if (process.env[name]) process.env.PORT = process.env[name];
+}
+
+if (!args.length) {
+  console.error("Usage: node scripts/with-env.mjs [--port=VAR] <command> [args...]");
+  process.exit(2);
+}
+
+const [cmd, ...rest] = args;
+const child = spawn(cmd, rest, {
+  stdio: "inherit",
+  env: process.env,
+  shell: process.platform === "win32",
+});
+child.on("exit", (code, sig) => process.exit(sig ? 1 : code ?? 0));
+`;
+  writeFileSync(resolve(scriptsDir, "with-env.mjs"), script);
+}
+
 // Pre-build env check. Fails the build before \`next build\` runs if backend
 // required vars are missing, so users don't sit through a 30s build only to
 // hit a runtime error on first request.
@@ -1332,55 +1530,111 @@ console.log("✓ env check passed");
 // since Next.js handles that internally and the proxy is single-threaded by design).
 function writePm2Config(targetDir, dirName, adminPrefix) {
   const singleOrigin = !!adminPrefix;
+  // The proxy `env` block conditionally includes ADMIN_PREFIX in single-origin
+  // mode. Built outside the template so we don't emit a stray comma or blank line.
+  const proxyEnv = [
+    "NODE_ENV: 'production',",
+    "PROXY_PORT,",
+    "FRONTEND_PORT,",
+    "BACKEND_PORT,",
+    ...(singleOrigin ? [`ADMIN_PREFIX: '${adminPrefix}',`] : []),
+  ].map((l) => "        " + l).join("\n");
+
   const config = `// PM2 ecosystem config for ${dirName}.
+//
+// Loads .env.local at the top so PM2 picks up PROXY_PORT / FRONTEND_PORT /
+// BACKEND_PORT / PM2_NAMESPACE without a shell wrapper. The .env.local file
+// is the single source of truth — edit ports there, not here.
+//
 // Usage:
 //   pnpm install
 //   pnpm backend:upgrade
 //   pnpm build
-//   pm2 start ecosystem.config.cjs                    # FE + BE
-//   pm2 start ecosystem.config.cjs --only proxy       # add reverse proxy
+//   pm2 start ecosystem.config.cjs                    # FE + BE + proxy + cron
+//   pm2 start ecosystem.config.cjs --only proxy       # only the reverse proxy
 //   pm2 start ecosystem.config.cjs --only cron        # self-hosted cron fallback
+//   pm2 stop  \${PM2_NAMESPACE}                         # stop everything in this project
 //   pm2 save && pm2 startup                           # persist across reboots
 
+const fs = require('fs');
+const path = require('path');
+
+// Inline .env.local parser. Kept tiny (no dotenv dep) so the ecosystem file
+// stays runnable before \`pnpm install\` finishes.
+const envPath = path.resolve(__dirname, '.env.local');
+if (fs.existsSync(envPath)) {
+  for (const line of fs.readFileSync(envPath, 'utf8').split('\\n')) {
+    const m = line.match(/^\\s*([A-Z0-9_]+)\\s*=\\s*(.*?)\\s*$/i);
+    if (!m) continue;
+    const k = m[1];
+    let v = m[2];
+    if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) v = v.slice(1, -1);
+    if (process.env[k] === undefined) process.env[k] = v;
+  }
+}
+
+const NAMESPACE     = process.env.PM2_NAMESPACE || '${dirName}';
+const FRONTEND_PORT = Number(process.env.FRONTEND_PORT) || 3001;
+const BACKEND_PORT  = Number(process.env.BACKEND_PORT)  || 3002;
+const PROXY_PORT    = Number(process.env.PROXY_PORT)    || 3030;
+
+// Backend's internal URL (loopback). Cron MUST target this, never the proxy or
+// frontend — going through the FE just adds a failure mode (HTML error → JSON
+// parse blowup in dev-cron.ts).
+const BACKEND_INTERNAL_URL = process.env.BACKEND_INTERNAL_URL || \`http://127.0.0.1:\${BACKEND_PORT}\`;
+
 module.exports = {
   apps: [
     {
-      name: "frontend",
-      cwd: "./apps/frontend",
-      script: "node_modules/next/dist/bin/next",
-      args: "start",
-      env: { NODE_ENV: "production", PORT: 3001 },
-      max_memory_restart: "1G",
+      name: \`frontend:\${FRONTEND_PORT}\`,
+      namespace: NAMESPACE,
+      cwd: './apps/frontend',
+      script: 'node_modules/next/dist/bin/next',
+      args: 'start',
+      env: {
+        NODE_ENV: 'production',
+        PORT: FRONTEND_PORT,
+        // Next.js rewrites read this at request time. Without it the FE
+        // falls back to http://localhost:3000 and every /admin, /api, and
+        // /uploads request returns ECONNREFUSED.
+        BACKEND_INTERNAL_URL,
+      },
+      max_memory_restart: '1G',
       autorestart: true,
     },
     {
-      name: "backend",
-      cwd: "./apps/backend",
-      script: "node_modules/next/dist/bin/next",
-      args: "start",
-      env: { NODE_ENV: "production", PORT: 3000 },
-      max_memory_restart: "1G",
+      name: \`backend:\${BACKEND_PORT}\`,
+      namespace: NAMESPACE,
+      cwd: './apps/backend',
+      script: 'node_modules/next/dist/bin/next',
+      args: 'start',
+      env: { NODE_ENV: 'production', PORT: BACKEND_PORT },
+      max_memory_restart: '1G',
       autorestart: true,
     },
     {
-      name: "proxy",
-      script: "./apps/proxy/server.mjs",
+      name: \`proxy:\${PROXY_PORT}\`,
+      namespace: NAMESPACE,
+      script: './apps/proxy/server.mjs',
       env: {
-        NODE_ENV: "production",
-        PORT: 3030,
-        BACKEND: "http://127.0.0.1:3000",
-        FRONTEND: "http://127.0.0.1:3001",
-        ${singleOrigin ? `ADMIN_PREFIX: "${adminPrefix}",` : ""}
+${proxyEnv}
       },
-      max_memory_restart: "256M",
+      max_memory_restart: '256M',
       autorestart: true,
     },
     {
-      name: "cron",
-      cwd: "./apps/backend",
-      script: "scripts/dev-cron.ts",
-      interpreter: "bun",
-      env: { NODE_ENV: "production" },
+      name: 'cron',
+      namespace: NAMESPACE,
+      cwd: './apps/backend',
+      script: 'scripts/dev-cron.ts',
+      interpreter: 'bun',
+      env: {
+        NODE_ENV: 'production',
+        // dev-cron.ts derives its target from NEXT_PUBLIC_SITE_URL. Override
+        // it to the backend loopback so cron skips the FE/proxy entirely.
+        NEXT_PUBLIC_SITE_URL: BACKEND_INTERNAL_URL,
+        CRON_SECRET: process.env.CRON_SECRET,
+      },
       autorestart: true,
     },
   ],
@@ -1659,12 +1913,18 @@ The installer scaffolds \`ecosystem.config.cjs\`. To supervise everything:
 
 \`\`\`bash
 pm2 start ecosystem.config.cjs                  # FE + BE + proxy + cron (all four)
-pm2 start ecosystem.config.cjs --only frontend,backend   # just the two apps
+pm2 start ecosystem.config.cjs --only proxy     # only the reverse proxy
 pm2 save && pm2 startup                         # persist across reboots
-pm2 logs                                        # tail all processes
-pm2 reload all                                  # zero-downtime restart
+pm2 logs \${PM2_NAMESPACE:-${dirName}}             # tail just this project's logs
+pm2 reload \${PM2_NAMESPACE:-${dirName}}            # zero-downtime restart (namespace-scoped)
+pm2 stop   \${PM2_NAMESPACE:-${dirName}}            # stop only this project
 \`\`\`
 
+All four processes are grouped under the \`PM2_NAMESPACE\` set in \`.env.local\`
+(defaults to \`${dirName}\`), so namespace commands target only this project
+even when other PM2 apps share the host. Process names embed the bound port
+(\`frontend:3001\`, \`backend:3002\`, \`proxy:3030\`) for quick \`pm2 ls\` triage.
+
 The proxy and cron processes can be omitted with \`--only\` if you front the
 apps with nginx/Caddy or use platform cron (system cron, k8s CronJob).
 
@@ -1758,7 +2018,7 @@ async function main() {
 
   if (!flags.directory) {
     log(HELP_TEXT);
-    fatal("Please provide a directory name.\n  Example: npx create-apollo-monorepo thamc-new");
+    fatal("Please provide a directory name.\n  Example: npx create-apollo-monorepo my-site");
   }
 
   log(`\n${COLORS.bold}${COLORS.cyan}  Apollo CMS Monorepo Installer${COLORS.reset}\n`);
@@ -1777,7 +2037,7 @@ async function main() {
   // Required by apollo-cms's /api/cron route and scripts/dev-cron.ts in dev.
   // Without it the dev cron loop hits 403 "CRON_SECRET not configured".
   const cronSecret = randomBytes(24).toString("hex");
-  const backendInternalUrl = "http://localhost:3000";
+  const backendInternalUrl = `http://localhost:${DEFAULT_BACKEND_PORT}`;
   success(`Frontend pkg name: ${frontendName}`);
   success(`Admin prefix: ${adminPrefix || "(disabled — separate origins)"}`);
 
@@ -1788,17 +2048,18 @@ async function main() {
   writeRootPackageJson(targetDir, dirName);
   writePnpmWorkspace(targetDir);
   writeRootGitignore(targetDir);
-  writeRootEnv(targetDir, { dbUrl, siteUrl, locale, authSecret, cronSecret, adminPrefix, backendInternalUrl });
+  writeRootEnv(targetDir, { dbUrl, siteUrl, locale, authSecret, cronSecret, adminPrefix, backendInternalUrl, pm2Namespace: dirName });
   writeReadme(targetDir, dirName, frontendName, adminPrefix);
   writeClaudeMd(targetDir, adminPrefix);
   if (adminPrefix) writeNginxSample(targetDir, adminPrefix);
   writeProxyApp(targetDir, dirName, adminPrefix);
   writeCheckEnvScript(targetDir);
+  writeWithEnvScript(targetDir);
   writePm2Config(targetDir, dirName, adminPrefix);
   success(
     `package.json, pnpm-workspace.yaml, .gitignore, .env.local, README.md, CLAUDE.md${
       adminPrefix ? ", nginx.conf.sample" : ""
-    }, apps/proxy, ecosystem.config.cjs, scripts/check-env.mjs`,
+    }, apps/proxy, ecosystem.config.cjs, scripts/check-env.mjs, scripts/with-env.mjs`,
   );
 
   // ── Step 4: git init ──
@@ -1838,23 +2099,27 @@ async function main() {
       );
     }
 
-    // Mirror env to backend
-    const backendEnvLines = [
+    const backendFallback = [
       `DATABASE_URL=${dbUrl}`,
       `APOLLO_SECRET=${authSecret}`,
       `CRON_SECRET=${cronSecret}`,
       `NEXT_PUBLIC_SITE_URL=${siteUrl}`,
       `NEXT_PUBLIC_DEFAULT_LOCALE=${locale}`,
       `APOLLO_EXTRA_PLUGINS_DIR=../cms-plugins`,
+      `PM2_NAMESPACE=${dirName}`,
     ];
-    if (adminPrefix) {
-      backendEnvLines.push(`APOLLO_ASSET_PREFIX=${adminPrefix}`);
-    }
-    backendEnvLines.push("");
-    writeFileSync(resolve(targetDir, BACKEND_PATH, ".env.local"), backendEnvLines.join("\n"));
-    success("apps/backend/.env.local");
+    if (adminPrefix) backendFallback.push(`APOLLO_ASSET_PREFIX=${adminPrefix}`);
+    linkRootEnvLocal(targetDir, BACKEND_PATH, backendFallback);
   }
 
+  // Frontend gets the same treatment — Next.js running in apps/frontend
+  // can't see the root file otherwise, and next.config.ts references
+  // BACKEND_INTERNAL_URL for the rewrites destination.
+  const frontendFallback = adminPrefix
+    ? [`BACKEND_INTERNAL_URL=${backendInternalUrl}`]
+    : [`NEXT_PUBLIC_BACKEND_URL=${siteUrl}`];
+  linkRootEnvLocal(targetDir, FRONTEND_PATH, frontendFallback);
+
   // ── Step 7: Install ──
   if (flags.skipInstall) {
     step(7, "Skipping dependency installation (--skip-install)");

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "create-apollo-monorepo",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "Scaffold a monorepo with a frontend app and Apollo CMS as a git submodule backend (single-origin via Next.js rewrites + assetPrefix)",
   "bin": {
     "create-apollo-monorepo": "index.mjs"
   },
   "type": "module",
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "keywords": [
     "apollo",
@@ -21,7 +21,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/5Lab-Group-Co-Ltd/apollo-cms.git",
+    "url": "git+https://github.com/5Lab-Group-Co-Ltd/apollo-cms.git",
     "directory": "installer-monorepo"
   },
   "license": "MIT"