Quick Start

Quick Start

Get a running app in minutes. The starter boots even before Firebase is configured, so you can see it work immediately.

Prerequisites

• Node.js ≥ 20 (22 recommended) + npm
• Git
• (optional, for deploy) Firebase CLI via npx --yes firebase-tools or a global firebase install.
• (optional) GitHub CLI gh

See Setup Playbook → Step 00 for the full prerequisite list (gcloud, Stripe CLI, etc.).

One-command tooling bootstrap

Instead of installing each tool by hand, let the bootstrap install, authenticate, and verify everything (Node, Git, gh, gcloud, Firebase CLI, optional Stripe, Chrome/MCP, Microsoft 365, and GoDaddy DNS):

bash .SYSTEMX/WSG-MENU.sh                          # → 1) 🚀 Start Template into Production
# …or directly:
bash .SYSTEMX/scripts/bootstrap.sh --with-stripe --with-mcp --interactive-login
bash .SYSTEMX/scripts/bootstrap.sh --with-stripe --with-mcp --with-m365 --with-godaddy --interactive-login
bash .SYSTEMX/scripts/bootstrap.sh --check         # verify only (no changes)

It's idempotent — safe to re-run any time. On macOS it installs via Homebrew + npm; on Linux/WSL it prints the exact install commands.

🚀 Start Template into Production (recommended)

The fastest path from a fresh clone to a live app is menu option #1 — a single guided, one-time, secure wizard:

bash .SYSTEMX/WSG-MENU.sh        # → 1) 🚀 Start Template into Production

Stages, in order:

1. Tooling — verify (and optionally install/auth) every SDK + CLI
2. Identity — project name / slug
3. First-time setup intake — fill the ordered .md files in .SYSTEMX/Unified-Setup-Process/intake/, then re-inject 06-AI-REINJECTION-PROMPT.md into the AI/code tooling session
4. Firebase / Google config — paste your firebaseConfig, a raw .env block, or point at GoogleService-Info.plist / google-services.json (processed once)
5. Seed env files — writes .env.local (client) + .secrets.env (server, chmod 600) securely
6. Prompt Ingest — point at your project build-spec .md; it's copied to PROMPT-INGEST.md for your AI agent to build on top of the template
7. Verify — npm install + production build
8. Deploy — Firebase login/project select + deploy (optional)
9. Security wrap-up — reminds you to delete the AI chat (live keys handled)

Make WSG-MENU typeable

bash .SYSTEMX/scripts/install-command.sh   # adds WSG-MENU to ~/.zshrc / ~/.bashrc
# then, in a new terminal:
WSG-MENU

Option A — Use this template (recommended)

gh repo create my-app --template WayneTechLab/SFWA-WTL-TEMPLATE --private --clone
cd my-app
npm install
npm run dev          # → http://localhost:5173

…or click the green “Use this template” button on the repo page.

Option B — Clone and run

git clone https://github.com/WayneTechLab/SFWA-WTL-TEMPLATE.git my-app
cd my-app
npm install
npm run dev          # → http://localhost:5173

Add your Firebase config

The app runs without Firebase, but Auth/Firestore/Storage stay dormant until you add credentials:

cp .env.example .env.local
# Fill VITE_FIREBASE_* from:
#   Firebase console → Project settings → General → Your apps → SDK setup & config

See Environment Variables for the full contract.

Build & preview

npm run build        # production build → dist/
npm run preview      # serve the production build locally

Deploy (optional)

bash .SYSTEMX/scripts/deploy.sh hosting --dry-run
bash .SYSTEMX/scripts/deploy.sh hosting --project your-firebase-project-id

Full details in Deployment.

Available scripts

Script	Description
npm run dev	Start the Vite dev server
npm run build	Production build to dist/
npm run preview	Preview the production build
npm run typecheck	TypeScript checks (tsc --noEmit)
npm run lint	ESLint
npm run lint:fix	ESLint with autofix
npm run ci:lint	ESLint with --max-warnings=0 (CI gate)
npm run ci:security	Rules/config/audit/account-level security gate
npm run ci:build	Production build (CI gate)

Next steps

• Want the full guided build (Stripe, Functions, CI, monitoring)? Go to the Setup Playbook.
• Curious about the tech choices? See Architecture & Stack.