Pre-deployment Checklist
Before deploying, ensure you’ve completed these steps:Configure environment variables
Set up production environment variables:
NG_APP_SUPABASE_URL: Your production Supabase URLNG_APP_SUPABASE_PUBLISHABLE_OR_ANON_KEY: Production Supabase keyNG_APP_GOOGLE_ANALYTICS_MEASUREMENT_ID: GA4 measurement IDNG_APP_IS_ANALYTICS_ENABLED: Set totrueNG_APP_IS_LOGGING_ENABLED: Set tofalsefor production
Deploying to Vercel
Vercel is the recommended deployment platform for Jet, offering zero-configuration deployment for Angular applications.Initial Setup
Connect your repository
- Go to vercel.com
- Click “Add New” → “Project”
- Import your Git repository
- Vercel auto-detects Angular configuration
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
Add environment variables
In Vercel dashboard, go to Settings → Environment Variables:Set these for:
- Production
- Preview (optional)
- Development (optional)
Vercel CLI Deployment
Deploy directly from the command line:- Production
- Preview
Vercel Configuration
Jet includes avercel.json configuration file:
Security Headers
Jet includes production-ready security headers:Content Security Policy (CSP)
Content Security Policy (CSP)
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
Cross-Origin Policies
Cross-Origin Policies
- 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
HSTS (HTTP Strict Transport Security)
HSTS (HTTP Strict Transport Security)
Forces HTTPS for one year, including subdomains:
Other Security Headers
Other Security Headers
- Referrer-Policy: Sends referrer only to same-origin HTTPS
- X-Content-Type-Options: Prevents MIME sniffing
Deploying to Other Platforms
Netlify
Connect repository
- Go to netlify.com
- Import your Git repository
- Configure build settings (auto-detected from netlify.toml)
Firebase Hosting
Initialize Firebase
- Public directory:
dist/jet/browser - Single-page app: Yes
- Set up GitHub Actions: Optional
AWS S3 + CloudFront
Continuous Deployment
GitHub Actions (Example)
Create.github/workflows/deploy.yml:
Post-Deployment
Verify Deployment
Check security headers
Use Mozilla Observatory to verify security headers.Jet should score 80+ (A grade).
Test performance
Use PageSpeed Insights to verify performance.Jet should score 80+ on all metrics.
Verify PWA
- Open DevTools → Application
- Check Service Worker is registered
- Verify offline functionality
Custom Domain Setup
For Vercel:- Go to Project Settings → Domains
- Add your custom domain
- Follow DNS configuration instructions
- SSL certificate is automatically provisioned
Troubleshooting
Build fails with environment variable errors
Build fails with environment variable errors
Ensure all required environment variables are set in your platform’s dashboard:
NG_APP_SUPABASE_URLNG_APP_SUPABASE_PUBLISHABLE_OR_ANON_KEY
404 errors on page refresh
404 errors on page refresh
Configure your hosting platform to redirect all routes to
/index.html. This is already configured in vercel.json for Vercel.CSP violations
CSP violations
Check browser console for CSP violations. Update
vercel.json or your platform’s header configuration to allow necessary resources.Service Worker not updating
Service Worker not updating
The service worker caches aggressively. Clear cache or use hard refresh (Ctrl+Shift+R) during development.