Deployment

Deploy your Craft projects to production and share them with the world. This guide covers deployment options, configuration, and best practices.

Deployment Options#

Vercel (Recommended)#

The easiest option for Next.js applications.

Benefits:

• Zero configuration deployment
• Automatic SSL
• Global CDN
• Preview deployments
• Easy environment variables

Other Platforms#

Craft projects work with any Next.js-compatible host:

• Netlify - Similar to Vercel
• Railway - Great for full-stack apps
• AWS Amplify - AWS ecosystem integration
• Cloudflare Pages - Edge performance

Deploying to Vercel#

Quick Deploy#

1. Open Project Settings
2. Click Deploy
3. Connect your Vercel account
4. Configure settings
5. Click Deploy

Manual Deploy#

Export and deploy manually:

1. Export project from Craft
2. Push to GitHub/GitLab
3. Import in Vercel dashboard
4. Configure environment variables
5. Deploy

Environment Variables#

Set production variables in Vercel:

1. Go to Project Settings
2. Navigate to Environment Variables
3. Add your variables
4. Select environments (Production, Preview, Development)

Pre-Deployment Checklist#

Code Quality#

• [ ] No console.log statements in production code
• [ ] Error boundaries in place
• [ ] Loading states implemented
• [ ] Form validation working

Performance#

• [ ] Images optimized
• [ ] Fonts properly loaded
• [ ] No unnecessary dependencies
• [ ] Code splitting implemented

Security#

• [ ] Environment variables set
• [ ] No secrets in code
• [ ] HTTPS enforced
• [ ] Input validation in place

SEO#

• [ ] Meta tags configured
• [ ] Open Graph images
• [ ] Sitemap generated
• [ ] robots.txt in place

Domain Configuration#

Custom Domain#

1. Go to Vercel project settings
2. Navigate to Domains
3. Add your domain
4. Configure DNS records

DNS Setup#

Add these records at your DNS provider:

| Type | Name | Value | | ----- | ---- | -------------------- | | A | @ | 76.76.21.21 | | CNAME | www | cname.vercel-dns.com |

SSL Certificate#

Vercel automatically provisions SSL certificates. No action required!

Deployment Configuration#

Build Settings#

Configure in next.config.ts:

const nextConfig = {
  output: "standalone", // For Docker deployments
  images: {
    domains: ["your-image-domain.com"],
  },
};

Environment-Specific Config#

const isProd = process.env.NODE_ENV === "production";

const config = {
  apiUrl: isProd ? "https://api.production.com" : "http://localhost:3001",
};

Continuous Deployment#

GitHub Integration#

Every push to main automatically deploys:

1. Connect GitHub repository
2. Configure branch settings
3. Enable automatic deployments

Preview Deployments#

Pull requests get unique preview URLs:

• Test changes before merging
• Share for review
• Automatic cleanup

Monitoring#

Vercel Analytics#

Built-in analytics for:

• Page views
• Web Vitals
• Error tracking

Enable in project settings.

Error Tracking#

Recommended services:

• Sentry - Detailed error reports
• LogRocket - Session replay
• Datadog - Full observability

Troubleshooting#

Build Failures#

Common issues:

1. Missing environment variables

   • Add all required variables in Vercel

2. TypeScript errors

   • Fix type errors locally first
   • Check strict mode settings

3. Dependency issues

   • Clear node_modules and reinstall
   • Check for version conflicts

Runtime Errors#

1. Check Vercel function logs
2. Review error messages
3. Test locally with production build:

npm run build
npm start

Performance Issues#

1. Analyze with Lighthouse
2. Check bundle size
3. Review Core Web Vitals
4. Optimize images and fonts

Rollback#

Quick Rollback#

In Vercel dashboard:

1. Go to Deployments
2. Find the previous working deployment
3. Click the three dots menu
4. Select "Promote to Production"

Automatic Rollback#

Configure in project settings for automatic rollback on errors.

Best Practices#

Use Preview Deployments#

• Test all changes in preview
• Share preview links for review
• Don't skip to production

Monitor After Deploy#

• Watch error rates
• Check performance metrics
• Monitor user feedback

Keep Dependencies Updated#

• Regular security updates
• Performance improvements
• New features

Document Deployment Process#

• Environment variables needed
• Configuration requirements
• Rollback procedures

Next Steps#

• Environment Variables - Production config
• Database Integration - Database deployment
• Best Practices - Production tips