Skip to main content
Jet is optimized for deployment on modern hosting platforms with first-class support for Vercel.

Pre-deployment Checklist

Before deploying, ensure you’ve completed these steps:
1

Update base URL

Find and replace the demo URL with your production URL:
# Find all occurrences
grep -r "https://jet-tau.vercel.app" .

# Replace throughout project
find . -type f -exec sed -i 's|https://jet-tau.vercel.app|https://your-domain.com|g' {} +
2

Configure environment variables

Set up production environment variables:
  • NG_APP_SUPABASE_URL: Your production Supabase URL
  • NG_APP_SUPABASE_PUBLISHABLE_OR_ANON_KEY: Production Supabase key
  • NG_APP_GOOGLE_ANALYTICS_MEASUREMENT_ID: GA4 measurement ID
  • NG_APP_IS_ANALYTICS_ENABLED: Set to true
  • NG_APP_IS_LOGGING_ENABLED: Set to false for production
3

Update sitemap

Update URLs in public/sitemaps/sitemap-main.xml:
<url>
  <loc>https://your-domain.com/</loc>
  <changefreq>monthly</changefreq>
  <priority>1.0</priority>
</url>
4

Test production build

Build and test locally:
npm run build
Verify the build completes without errors and check bundle sizes.

Deploying to Vercel

Vercel is the recommended deployment platform for Jet, offering zero-configuration deployment for Angular applications.

Initial Setup

1

Install Vercel CLI (optional)

npm install -g vercel
2

Connect your repository

  1. Go to vercel.com
  2. Click “Add New” → “Project”
  3. Import your Git repository
  4. Vercel auto-detects Angular configuration
3

Configure project settings

Vercel automatically detects these settings from vercel.json:
  • Framework Preset: Angular
  • Build Command: ng build
  • Output Directory: dist/jet/browser
  • Install Command: npm install
4

Add environment variables

In Vercel dashboard, go to Settings → Environment Variables:
NG_APP_SUPABASE_URL=https://your-project.supabase.co
NG_APP_SUPABASE_PUBLISHABLE_OR_ANON_KEY=your-key
NG_APP_GOOGLE_ANALYTICS_MEASUREMENT_ID=G-XXXXXXXXXX
NG_APP_IS_ANALYTICS_ENABLED=true
NG_APP_IS_LOGGING_ENABLED=false
Set these for:
  • Production
  • Preview (optional)
  • Development (optional)
5

Deploy

Click “Deploy” or push to your main branch to trigger automatic deployment.

Vercel CLI Deployment

Deploy directly from the command line:
vercel --prod

Vercel Configuration

Jet includes a vercel.json configuration file:
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "angular",
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'none'; base-uri 'self'; connect-src 'self' https://*.google-analytics.com https://www.googletagmanager.com https://*.supabase.co; ..."
        },
        { "key": "Cross-Origin-Embedder-Policy", "value": "credentialless" },
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Resource-Policy", "value": "same-origin" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains; preload"
        },
        { "key": "X-Content-Type-Options", "value": "nosniff" }
      ]
    },
    {
      "source": "/ngsw-worker.js",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'none'; connect-src 'self' https:;"
        }
      ]
    }
  ],
  "outputDirectory": "dist/jet/browser"
}

Security Headers

Jet includes production-ready security headers:
Restricts resource loading to prevent XSS attacks:
  • Scripts only from self and Google Tag Manager
  • Styles from self, Google Fonts, and inline (for Angular Material)
  • Connects to self, Supabase, and Google Analytics
  • No iframes, forms, or arbitrary content
  • COEP: credentialless - Allows loading resources without CORS
  • COOP: same-origin - Prevents other origins from opening popups
  • CORP: same-origin - Prevents other sites from embedding resources
Forces HTTPS for one year, including subdomains:
max-age=31536000; includeSubDomains; preload
  • Referrer-Policy: Sends referrer only to same-origin HTTPS
  • X-Content-Type-Options: Prevents MIME sniffing

Deploying to Other Platforms

Netlify

1

Create netlify.toml

[build]
  command = "npm run build"
  publish = "dist/jet/browser"

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

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'none'; base-uri 'self'; ..."
    Cross-Origin-Embedder-Policy = "credentialless"
    Cross-Origin-Opener-Policy = "same-origin"
    Cross-Origin-Resource-Policy = "same-origin"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
    X-Content-Type-Options = "nosniff"
2

Connect repository

  1. Go to netlify.com
  2. Import your Git repository
  3. Configure build settings (auto-detected from netlify.toml)
3

Set environment variables

In Netlify dashboard, go to Site settings → Environment variables
4

Deploy

Push to your main branch or click “Deploy site”

Firebase Hosting

1

Install Firebase CLI

npm install -g firebase-tools
2

Initialize Firebase

firebase init hosting
Configure:
  • Public directory: dist/jet/browser
  • Single-page app: Yes
  • Set up GitHub Actions: Optional
3

Configure firebase.json

{
  "hosting": {
    "public": "dist/jet/browser",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Content-Security-Policy",
            "value": "default-src 'none'; base-uri 'self'; ..."
          }
        ]
      }
    ]
  }
}
4

Build and deploy

npm run build
firebase deploy

AWS S3 + CloudFront

1

Build the app

npm run build
2

Create S3 bucket

aws s3 mb s3://your-app-bucket
aws s3 website s3://your-app-bucket --index-document index.html
3

Upload files

aws s3 sync dist/jet/browser s3://your-app-bucket --delete
4

Configure CloudFront

  1. Create CloudFront distribution
  2. Set S3 bucket as origin
  3. Configure custom error responses (404 → /index.html)
  4. Add custom headers using Lambda@Edge or CloudFront Functions

Continuous Deployment

GitHub Actions (Example)

Create .github/workflows/deploy.yml:
name: Deploy to Production

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
        env:
          NG_APP_SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
          NG_APP_SUPABASE_PUBLISHABLE_OR_ANON_KEY: ${{ secrets.SUPABASE_KEY }}
          NG_APP_GOOGLE_ANALYTICS_MEASUREMENT_ID: ${{ secrets.GA_ID }}
          NG_APP_IS_ANALYTICS_ENABLED: true
          NG_APP_IS_LOGGING_ENABLED: false
      
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

Post-Deployment

Verify Deployment

1

Check security headers

Use Mozilla Observatory to verify security headers.Jet should score 80+ (A grade).
2

Test performance

Use PageSpeed Insights to verify performance.Jet should score 80+ on all metrics.
3

Verify PWA

  1. Open DevTools → Application
  2. Check Service Worker is registered
  3. Verify offline functionality
4

Test analytics

If analytics is enabled, verify events are being sent to Google Analytics.

Custom Domain Setup

For Vercel:
  1. Go to Project Settings → Domains
  2. Add your custom domain
  3. Follow DNS configuration instructions
  4. SSL certificate is automatically provisioned

Troubleshooting

Ensure all required environment variables are set in your platform’s dashboard:
  • NG_APP_SUPABASE_URL
  • NG_APP_SUPABASE_PUBLISHABLE_OR_ANON_KEY
Configure your hosting platform to redirect all routes to /index.html. This is already configured in vercel.json for Vercel.
Check browser console for CSP violations. Update vercel.json or your platform’s header configuration to allow necessary resources.
The service worker caches aggressively. Clear cache or use hard refresh (Ctrl+Shift+R) during development.

Build docs developers (and LLMs) love