PACE Pattern

Appearance

Deployment ​

Deploy your PACE.js app to production.

Build for Production ​

1. Optimize Bundle ​

bash
npm run build

This creates optimized production files:

dist/
├── index.html
├── assets/
│   ├── pace.min.js         # Minified PACE.js
│   ├── pace.min.css        # Minified CSS
│   └── app.js              # Your app code
└── products.json

2. Test Production Build ​

bash
npm run preview

Open http://localhost:4173 and verify everything works.

Deployment Platforms ​

Method 1: Drag & Drop ​

  1. Build your app: npm run build
  2. Go to Netlify Drop
  3. Drag dist/ folder
  4. Done! 🎉

Method 2: Git Integration ​

bash
# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Initialize
netlify init

# Deploy
netlify deploy --prod

netlify.toml:

toml
[build]
  command = "npm run build"
  publish = "dist"

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

Vercel ​

bash
# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

vercel.json:

json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Cloudflare Pages ​

bash
# Install Wrangler
npm install -g wrangler

# Login
wrangler login

# Deploy
wrangler pages deploy dist

wrangler.toml:

toml
name = "pace-app"
compatibility_date = "2024-01-01"

[build]
command = "npm run build"

[build.upload]
format = "directory"
dir = "dist"

GitHub Pages ​

Using GitHub Actions ​

.github/workflows/deploy.yml:

yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Manual Deployment ​

bash
npm run build
npm install -g gh-pages
gh-pages -d dist

AWS S3 + CloudFront ​

bash
# Build
npm run build

# Upload to S3
aws s3 sync dist/ s3://your-bucket-name --delete

# Invalidate CloudFront cache
aws cloudfront create-invalidation --distribution-id YOUR_DIST_ID --paths "/*"

Docker ​

Dockerfile:

dockerfile
FROM node:18-alpine AS build

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf:

nginx
server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  # Enable gzip
  gzip on;
  gzip_types text/css application/javascript application/json;
}

Build & Run:

bash
docker build -t pace-app .
docker run -p 8080:80 pace-app

Environment Variables ​

Production API Keys ​

Never commit API keys! Use environment variables:

Netlify ​

bash
netlify env:set CLAUDE_API_KEY your-key-here

Or in Netlify UI: Site Settings → Environment Variables

Vercel ​

bash
vercel env add CLAUDE_API_KEY

Or in Vercel UI: Project Settings → Environment Variables

Cloudflare Pages ​

In Cloudflare dashboard: Pages → Settings → Environment Variables

GitHub Actions ​

Repository Settings → Secrets → Actions

yaml
env:
  CLAUDE_API_KEY: ${{ secrets.CLAUDE_API_KEY }}

Performance Optimization ​

1. Enable Compression ​

Most platforms enable gzip by default. Verify:

bash
curl -H "Accept-Encoding: gzip" -I https://your-site.com

Look for: Content-Encoding: gzip

2. Set Cache Headers ​

Netlify (netlify.toml):

toml
[[headers]]
  for = "/*.js"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/*.css"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/index.html"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"

Nginx:

nginx
location ~* \.(js|css)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

location = /index.html {
  expires off;
  add_header Cache-Control "no-cache, must-revalidate";
}

3. Use CDN ​

All recommended platforms include CDN automatically:

  • ✅ Netlify CDN
  • ✅ Vercel Edge Network
  • ✅ Cloudflare CDN
  • ✅ AWS CloudFront

4. Lazy Load Products ​

javascript
const pace = new PACE({
  container: '#app',
  products: async () => {
    const response = await fetch('/api/products')
    return await response.json()
  }
})

Custom Domain ​

Netlify ​

  1. Go to Domain Settings
  2. Add custom domain
  3. Configure DNS:
    CNAME  www  your-site.netlify.app
A      @    75.2.60.5

Vercel ​

  1. Go to Project Settings → Domains
  2. Add domain
  3. Configure DNS:
    CNAME  www  cname.vercel-dns.com
A      @    76.76.21.21

Cloudflare Pages ​

  1. Go to Custom Domains
  2. Add domain (automatically configured if using Cloudflare DNS)

SSL/HTTPS ​

All recommended platforms provide free SSL automatically:

  • ✅ Netlify - Let's Encrypt
  • ✅ Vercel - Let's Encrypt
  • ✅ Cloudflare - Free SSL
  • ✅ GitHub Pages - GitHub SSL

Monitoring ​

Error Tracking ​

Sentry ​

javascript
import * as Sentry from "@sentry/browser"

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 1.0,
})

pace.on('error', ({ error }) => {
  Sentry.captureException(error)
})

Analytics ​

Google Analytics ​

javascript
pace.on('navigate', (route) => {
  gtag('config', 'GA_MEASUREMENT_ID', {
    page_path: `/#${route}`
  })
})

pace.on('product:select', ({ product }) => {
  gtag('event', 'product_view', {
    product_id: product.id,
    product_name: product.name
  })
})

Uptime Monitoring ​

  • UptimeRobot (free)
  • Pingdom
  • StatusCake

Deployment Checklist ​

Pre-Deploy ​

  • [ ] Run npm run build
  • [ ] Test production build locally
  • [ ] Set environment variables
  • [ ] Update API endpoints for production
  • [ ] Test on mobile devices
  • [ ] Run accessibility audit
  • [ ] Check performance (Lighthouse)

Deploy ​

  • [ ] Deploy to staging first
  • [ ] Test staging thoroughly
  • [ ] Deploy to production
  • [ ] Verify production works

Post-Deploy ​

  • [ ] Check error tracking
  • [ ] Monitor analytics
  • [ ] Test critical user flows
  • [ ] Verify SSL certificate
  • [ ] Test custom domain
  • [ ] Update DNS if needed

Rollback Strategy ​

Netlify ​

bash
# View deployments
netlify deploy:list

# Rollback to previous
netlify rollback

Vercel ​

bash
# List deployments
vercel ls

# Promote deployment to production
vercel promote [deployment-url]

GitHub Pages ​

bash
# Revert to previous commit
git revert HEAD
git push origin main

Zero-Downtime Deployment ​

All recommended platforms support atomic deployments:

  1. New version builds
  2. Health checks pass
  3. Traffic switches instantly
  4. Old version remains if rollback needed

No downtime! 🎉

Multi-Environment Setup ​

Development ​

javascript
// .env.development
CLAUDE_API_KEY=sk-ant-dev-...
API_URL=http://localhost:3000

Staging ​

javascript
// .env.staging
CLAUDE_API_KEY=sk-ant-staging-...
API_URL=https://api-staging.example.com

Production ​

javascript
// .env.production
CLAUDE_API_KEY=sk-ant-prod-...
API_URL=https://api.example.com

Deploy PACE.js with confidence! 🚀