🌐 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.

Anti-patterns

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

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:

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 → Environment Variables (for secrets)
• netlify.toml [build.environment] (for non-sensitive build config like NODE_VERSION)

Step 5: Check Custom Domain and SSL

# Check for domain configuration
cat netlify.toml 2>/dev/null | grep -A5 '\[context\]'

Verify in Netlify dashboard:

• ✅ Custom domain added (Domain Management → Add domain)
• ✅ DNS points to Netlify (CNAME to *.netlify.app or A record to Netlify load balancer)
• ✅ SSL certificate provisioned (automatic via Let's Encrypt: check HTTPS section)
• ✅ Force HTTPS enabled (redirects http → https)
• ✅ www redirect configured (www → apex or apex → www: pick one, be consistent)

Flag if: Domain is added but DNS hasn't propagated or SSL shows "Waiting for DNS verification."

Step 6: Check for Netlify Functions

# Check for serverless functions
ls netlify/functions/ functions/ 2>/dev/null
cat netlify.toml 2>/dev/null | grep 'functions'

If functions exist, verify:

• Function directory is specified in netlify.toml: [functions] directory = "netlify/functions"
• Functions have correct export pattern: export const handler = async (event, context) => { ... }
• Environment variables needed by functions are set in Netlify dashboard (these are runtime, not build-time)
• Functions are not importing large dependencies that exceed Netlify's 50MB bundle limit

Step 7: Check Headers Configuration

# Check for security headers
cat netlify.toml 2>/dev/null | grep -A10 '\[\[headers\]\]'
cat _headers 2>/dev/null

Recommended security headers:

# netlify.toml
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Permissions-Policy = "camera=(), microphone=(), geolocation=()"

Step 8: Pre-Deploy Checklist

Build locally to catch errors before Netlify builds:

# Local build test
npm run build

# Check output directory exists and has content
ls -la dist/  # or build/, out/, etc.

# Check for common issues
grep -rn "http://localhost\|http://127\.0\.0\.1" dist/ 2>/dev/null

Output pre-deploy summary:

🌐 Netlify Deploy: Pre-flight Complete

Project: [name] ([framework])
Build: ✅ passes → [publish directory]
Redirects: ✅ SPA routing + API proxy configured
Env vars: ✅ 8 build-time vars, no secrets exposed
Domain: ✅ [domain] with SSL
Functions: ✅ 2 functions in netlify/functions/
Headers: ✅ security headers configured

Ready to deploy.
  Preview:    netlify deploy --build
  Production: netlify deploy --build --prod

Step 9: Post-Deploy Verification

After deployment completes:

1. Preview deploy: Netlify generates a unique URL for every deploy: test there first
2. Check build log: Netlify dashboard → Deploys → click deploy → Build Log
3. Test SPA routing: Navigate directly to a deep route (e.g., /dashboard/settings): should load, not 404
4. Test API proxy: Open DevTools Network tab, trigger an API call, verify it reaches backend
5. Check SSL: Visit https://[domain], padlock should appear, no mixed content warnings
6. Test redirects: Visit http://[domain]: should redirect to https://

Rollback plan:

• Netlify keeps every deploy as an immutable snapshot
• Dashboard → Deploys → click any previous deploy → "Publish deploy"
• Instant rollback, no rebuild required

Level History

• Lv.1: Base: Build config validation, redirect/proxy verification, SPA routing, env var security audit, domain/SSL checks, Netlify Functions, security headers, pre/post-deploy checklists. Based on AdminStack marketing site, GreenAcres frontend, and other Netlify deployments. (Origin: MemStack Pro v3.2, Mar 2026)