/netlify-deploy

name: memstack-deployment-netlify-deploy
description: "Use this skill when the user says 'deploy to Netlify', 'Netlify setup', 'netlify-deploy', or needs to deploy a static site or serverless functions to Netlify with build configuration and custom domains. Do NOT use for Railway, Vercel, or VPS deployments."
version: 1.0.0
license: "Proprietary, MemStack™ Pro by CW Affiliate Investments LLC. See LICENSE.txt"

🌐 Netlify Deploy: Pre-flight check and deploy to Netlify...

*Validates build config, redirects, environment variables, and deployment readiness for Netlify static/SPA hosting.*

Activation

When this skill activates, output:

`🌐 Netlify Deploy: Running pre-flight checks...`

Then execute the protocol below.

| Context | Status | |---------|--------| | User says "deploy to netlify" or "netlify deploy" | ACTIVE | | User says "deploy frontend" or "deploy static site" | ACTIVE | | Preparing a React/Vue/Svelte/Next.js static export for hosting | ACTIVE | | Deploying a backend service or API server | DORMANT: use railway-deploy | | Discussing Netlify pricing or features generally | DORMANT |

Anti-patterns

| Trap | Reality Check | |------|---------------| | "I'll configure it in the Netlify UI" | `netlify.toml` is version-controlled and portable. UI settings get lost across teams. | | "Redirects work fine without _redirects" | SPA routing breaks on refresh without `/* /index.html 200`. Every SPA needs this. | | "Environment vars are the same everywhere" | Build-time vars (baked into JS bundle) vs runtime vars (Netlify Functions) are different. `NEXT_PUBLIC_` prefix exposes to client. | | "The API proxy just works" | `/api/*` redirects must point to your actual backend URL. Forgetting to update after backend redeploy breaks the frontend. | | "I'll check the deploy after pushing" | `netlify deploy --build` locally catches build failures before they hit production. Always build locally first. |

Protocol

Step 1: Check Build Configuration

Look for Netlify config and verify build settings:

# Check for Netlify configuration
ls netlify.toml _redirects _headers 2>/dev/null

# Check package.json for build script
cat package.json | grep -A2 '"scripts"' | grep '"build"'

If `netlify.toml` exists, verify it:

# Expected structure
[build]
  command = "npm run build"    # or "yarn build", "pnpm build"
  publish = "dist"             # or "build", "out", ".next" (varies by framework)

[build.environment]
  NODE_VERSION = "20"          # Pin Node version for reproducible builds

| Framework | Build Command | Publish Directory | |-----------|--------------|-------------------| | React (CRA) | `npm run build` | `build` | | React (Vite) | `npm run build` | `dist` | | Next.js (static) | `next build && next export` | `out` | | Vue | `npm run build` | `dist` | | Svelte/SvelteKit | `npm run build` | `build` | | Astro | `npm run build` | `dist` | | Plain HTML | none | `.` or `public` |

**Flag if:** `netlify.toml` missing or publish directory doesn't match framework default.

Step 2: Verify Redirects and API Proxy

# Check redirect files
cat netlify.toml 2>/dev/null | grep -A5 '\[\[redirects\]\]'
cat _redirects 2>/dev/null

Check for the API proxy pattern (frontend → backend):

# netlify.toml, API proxy to Railway/external backend
[[redirects]]
  from = "/api/*"
  to = "https://your-backend.up.railway.app/api/:splat"
  status = 200
  force = true

Or in `_redirects`:

/api/*  https://your-backend.up.railway.app/api/:splat  200

**Verify:**

• ✅ Backend URL is the production URL (not localhost)
• ✅ `status = 200` (proxy, not redirect, preserves the URL for the client)
• ✅ `force = true` if the proxy should override static files at the same path
• ❌ Backend URL still points to `localhost:3000`: update to production

**Flag if:** Code references `/api/` paths but no proxy redirect is configured.

Step 3: Verify SPA Routing

Single-page apps need a catch-all redirect so deep links and page refreshes work:

# Check for SPA redirect
grep -r "\/\*.*\/index\.html\|\/\*.*200" netlify.toml _redirects 2>/dev/null

Required for SPAs (React Router, Vue Router, etc.):

# In _redirects (must be LAST rule, order matters)
/*  /index.html  200

Or in `netlify.toml`:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

**Flag if:** Project uses client-side routing but no catch-all redirect exists. Symptoms: pages work when navigated to via links, but return 404 on direct URL access or refresh.

**Note:** Next.js static export handles this differently. Each page is pre-rendered as its own HTML file. SPA redirect is NOT needed for static Next.js.

Step 4: Verify Environment Variables

# Find env vars used in frontend code
grep -rn "process\.env\.\|import\.meta\.env\.\|VITE_\|NEXT_PUBLIC_\|REACT_APP_" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx" . | grep -v node_modules

**Build-time vs runtime separation:**

| Prefix | Framework | When Available | Exposed to Client? | |--------|-----------|---------------|-------------------| | `REACT_APP_` | CRA | Build time | ⚠️ YES: baked into JS bundle | | `NEXT_PUBLIC_` | Next.js | Build time | ⚠️ YES: baked into JS bundle | | `VITE_` | Vite | Build time | ⚠️ YES: baked into JS bundle | | No prefix | Any | Build time only | ❌ No, server-side/build scripts only |

**Critical security check:**

# Search for secrets that might be exposed to client
grep -rn "NEXT_PUBLIC_.*SECRET\|NEXT_PUBLIC_.*KEY\|VITE_.*SECRET\|REACT_APP_.*SECRET" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.env*" . | grep -v node_modules

**Flag if:** Any secret (API keys with write access, database URLs, auth secrets) uses a client-exposed prefix. These are baked into the JavaScript bundle and visible to anyone who opens DevTools.

**Output:** List each variable with where to set it:

• Netlify UI: Site Settings → Environmen