Deployment

Deploy your Fast Forward Dev application to production with this comprehensive guide.

Deployment Overview

Fast Forward Dev consists of two separate applications that need to be deployed:

1. Client (Frontend): Next.js application → Deploy to Vercel (recommended)
2. Server (Backend): Express application → Deploy to Heroku, Railway, or similar

Deploy the Client (Frontend)

Option 1: Vercel (Recommended)

Vercel is built by the creators of Next.js and offers the best experience for Next.js applications.

NEXTAUTH_URL=https://yourdomain.com
NEXTAUTH_SECRET=your-production-secret
PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...

Option 2: Netlify

npm install -g netlify-cli

cd my-project-client
npm run build

netlify deploy --prod

Deploy the Server (Backend)

Option 1: Heroku

cd my-project-server
heroku create my-app-name

heroku buildpacks:set heroku/nodejs

heroku config:set MONGODB_URI="your-mongodb-uri"
heroku config:set JWT_SECRET="your-jwt-secret"
heroku config:set STRIPE_SECRET_KEY="sk_live_..."
heroku config:set STRIPE_WEBHOOK_SECRET="whsec_..."
heroku config:set RESEND_API_KEY="re_..."
heroku config:set GOOGLE_CLIENT_ID="..."
heroku config:set NODE_ENV="production"
heroku config:set CLIENT_URL="https://yourdomain.com"

git push heroku master

heroku logs --tail
heroku open

Option 2: Railway

Option 3: DigitalOcean App Platform

Update Backend URL in Client

After deploying your server, update the backend URL in your client configuration:

export const appConfig = {
  nextConfig: {
    backendUrl: isProd()
      ? 'https://your-server-domain.herokuapp.com'  // Your production server URL
      : 'http://localhost:5001',
    // ...
  },
  // ...
}

Redeploy your client after making this change.

Configure Stripe Webhooks for Production

https://your-server-domain.com/api/stripe/webhook

STRIPE_WEBHOOK_SECRET=whsec_live_...

Configure Google OAuth for Production

https://yourdomain.com

Database Setup (MongoDB)

MongoDB Atlas Production Cluster

Environment Variables Checklist

Client (Frontend)

• NEXTAUTH_URL - Your production domain
• NEXTAUTH_SECRET - Production secret (different from dev)
• PUBLIC_STRIPE_PUBLISHABLE_KEY - Live publishable key
• GOOGLE_CLIENT_ID - OAuth client ID
• GOOGLE_CLIENT_SECRET - OAuth client secret

Server (Backend)

• MONGODB_URI - Production database connection
• JWT_SECRET - Production JWT secret
• STRIPE_SECRET_KEY - Live secret key (sk_live_)
• STRIPE_WEBHOOK_SECRET - Production webhook secret
• RESEND_API_KEY - Resend API key
• GOOGLE_CLIENT_ID - OAuth client ID
• NODE_ENV=production
• CLIENT_URL - Your production frontend URL
• PORT - Usually set by hosting provider

Post-Deployment

Test Your Application

Monitoring & Maintenance

Set Up Error Tracking

Sentry (Recommended):

npm install @sentry/nextjs
npm install @sentry/node

Configure in both client and server for error tracking.

Set Up Analytics

Add analytics to track user behavior:

• Google Analytics
• Vercel Analytics
• Plausible
• PostHog

Monitor Performance

• Monitor API response times
• Check database performance
• Track Core Web Vitals

Regular Maintenance

• Keep dependencies updated
• Monitor security vulnerabilities
• Back up your database regularly
• Review error logs weekly

Rollback Strategy

If something goes wrong:

Vercel (Client)

1. Go to your project
2. Click “Deployments”
3. Find the last working deployment
4. Click the three dots → “Promote to Production”

Heroku (Server)

# View releases
heroku releases
 
# Rollback to previous release
heroku rollback v123

Railway (Server)

Railway automatically keeps deployment history. Use the dashboard to rollback to a previous deployment.

Security Checklist

• All secrets are production-specific (not dev secrets)
• MongoDB has IP restrictions or secure VPC
• Stripe is in live mode with proper webhook signature verification
• CORS is properly configured on server
• HTTPS is enabled (automatic with Vercel)
• Rate limiting is enabled on API endpoints
• Environment variables are not exposed in client code

Troubleshooting

”Cannot connect to server” errors

• Verify server is running: Visit your server URL directly
• Check CORS configuration allows your client domain
• Verify CLIENT_URL in server matches your frontend domain
• Check backendUrl in client config points to server

Authentication not working

• Verify NEXTAUTH_URL matches your domain exactly
• Check Google OAuth redirect URIs include production URLs
• Ensure NEXTAUTH_SECRET is set in production

Stripe webhooks failing

• Verify webhook endpoint URL is correct
• Check webhook secret is for production endpoint
• Look at webhook logs in Stripe Dashboard
• Ensure server is accessible from Stripe’s IPs

Next Steps

Your application is now deployed! Consider:

• Admin Components - Manage your users
• Setting up CI/CD for automatic deployments
• Implementing monitoring and logging
• Creating a backup strategy