Production Deployment Guide

Learn more about Mintlify

Enter your email to receive updates about new features and product releases.

Overview
Architecture
Pre-Deployment Checklist
Build Process
Frontend Build
Build Configuration
Environment Variables Setup
Required Variables
Setting Environment Variables
CORS Configuration
Production CORS Setup
API Endpoints
Contact Form API
Custom Plan API
Card Plan API
Deployment Steps
Post-Deployment Verification
Frontend Checks
Backend Checks
Database Checks
Troubleshooting
Build Failures
API Errors
CORS Errors
Email Not Sending
Performance Optimization
Frontend
Backend
Database
Security Best Practices
Continuous Deployment
Next Steps

Overview

DevAurva is a full-stack application built with React (Vite) for the frontend and serverless Node.js functions for the backend API. This guide covers the complete production deployment process.

Architecture

The application consists of:

Frontend: React SPA built with Vite
Backend: Serverless API functions (/api routes)
Database: MongoDB for data persistence
Email Service: Nodemailer with Gmail SMTP

Pre-Deployment Checklist

Before deploying to production, ensure you have:

Environment Variables

Prepare all required environment variables:

MONGODB_URI - MongoDB connection string
EMAIL_USER - Gmail account for sending emails
EMAIL_PASS - Gmail app-specific password
EMAIL_RECIPIENT - Email address to receive form submissions

Database Setup

Set up your production MongoDB database:

Create a MongoDB Atlas cluster or use your preferred MongoDB hosting
Whitelist your deployment platform’s IP addresses
Create a database user with appropriate permissions
Test the connection string

Email Configuration

Configure Gmail for sending emails:

Enable 2-factor authentication on your Gmail account
Generate an app-specific password
Test email sending in development environment

Code Review

Perform final code checks:

Run npm run lint to check for code issues
Verify all API endpoints are working
Test form submissions and email notifications
Check CORS configuration for production domains

Never commit environment variables or sensitive credentials to your repository. Always use environment variable management provided by your hosting platform.

Build Process

Frontend Build

The frontend is built using Vite:

npm run build

This command:

Compiles React components
Bundles JavaScript and CSS
Optimizes assets for production
Outputs to the dist/ directory

Build Configuration

The Vite configuration (vite.config.js) includes:

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined
      }
    }
  }
})

The build output directory is dist/ with assets in the assets/ subdirectory. Ensure your hosting platform serves static files from the correct directory.

Environment Variables Setup

Required Variables

Configure these environment variables in your production environment:

Variable	Description	Example
`MONGODB_URI`	MongoDB connection string	`mongodb+srv://user:[email protected]/devaurva`
`EMAIL_USER`	Gmail account for SMTP	`[email protected]`
`EMAIL_PASS`	Gmail app password	`xxxx xxxx xxxx xxxx`
`EMAIL_RECIPIENT`	Email to receive notifications	`[email protected]`

Setting Environment Variables

The method depends on your hosting platform: Vercel:

vercel env add MONGODB_URI
vercel env add EMAIL_USER
vercel env add EMAIL_PASS
vercel env add EMAIL_RECIPIENT

Manual (Platform Dashboard):

Navigate to your project settings
Find Environment Variables section
Add each variable with its value
Save and redeploy if necessary

For Gmail, you must use an app-specific password, not your regular password. Generate one at: https://myaccount.google.com/apppasswords

CORS Configuration

Production CORS Setup

All API endpoints include CORS headers for cross-origin requests:

res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,PATCH,DELETE,POST,PUT');
res.setHeader('Access-Control-Allow-Headers', 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version');

Security Notice: The current configuration allows requests from any origin (*). For production, consider restricting to specific domains:

const allowedOrigins = ['https://devaurva.com', 'https://www.devaurva.com'];
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
  res.setHeader('Access-Control-Allow-Origin', origin);
}

API Endpoints

The application includes three serverless API endpoints:

Contact Form API

Endpoint: /api/contact.js

Handles contact form submissions
Sends email notifications via Nodemailer
No database persistence

Custom Plan API

Endpoint: /api/custom-plan.js

Saves custom plan requests to MongoDB
Sends email notifications
Includes error recovery for partial failures

Card Plan API

Endpoint: /api/card-plan.js

Processes pricing card selections
Saves to MongoDB
Sends confirmation emails

All API endpoints handle OPTIONS requests for CORS preflight and return appropriate error messages for unsupported HTTP methods.

Deployment Steps

Install Dependencies

npm install

Build for Production

npm run build

Verify the dist/ directory is created with all assets.

Configure Environment Variables

Set all required environment variables in your hosting platform’s dashboard or CLI.

Deploy Frontend and Backend

Deploy both the static frontend and serverless API functions. The method varies by platform (see platform-specific guides).

Test Deployment

After deployment:

Visit your production URL
Test form submissions
Verify emails are received
Check browser console for errors
Test API endpoints directly

Monitor and Debug

Check serverless function logs
Monitor database connections
Verify email delivery
Set up error tracking (recommended: Sentry, LogRocket)

Post-Deployment Verification

Frontend Checks

Website loads without errors
All pages are accessible
Assets (images, fonts) load correctly
Routing works for all pages
Mobile responsiveness is maintained

Backend Checks

API endpoints respond correctly
Contact form submissions work
Custom plan submissions are saved to database
Email notifications are delivered
Error messages are appropriate and user-friendly

Database Checks

MongoDB connection is stable
Data is being saved correctly
Connection pool is configured appropriately
Database credentials are secure

Troubleshooting

Build Failures

Issue: npm run build fails Solutions:

Run npm install to ensure all dependencies are installed
Check Node.js version (requires Node 16+)
Review build errors for missing imports or syntax errors

API Errors

Issue: API endpoints return 500 errors Solutions:

Verify environment variables are set correctly
Check serverless function logs for detailed errors
Ensure MongoDB connection string is valid
Verify Gmail credentials and app password

CORS Errors

Issue: Browser console shows CORS errors Solutions:

Verify CORS headers are set in API functions
Check that OPTIONS requests are handled
Ensure your domain is allowed in CORS configuration

Email Not Sending

Issue: Emails are not being delivered Solutions:

Verify Gmail app password is correct
Check Gmail account has 2FA enabled
Review serverless function logs for email errors
Test with a different email service if needed

If emails fail but database saves succeed, the API returns a 207 (Multi-Status) response with partial success. Monitor logs for these cases.

Performance Optimization

Frontend

Enable compression on your hosting platform
Use CDN for static assets
Implement caching headers
Optimize images before deployment

Backend

Reuse MongoDB connections across function invocations
Implement connection pooling
Set appropriate function timeout limits
Monitor cold start times

Database

Create indexes on frequently queried fields
Monitor connection count
Use MongoDB Atlas performance advisor
Set up automated backups

Security Best Practices

Critical Security Measures:

Never expose API keys or credentials in frontend code
Use environment variables for all sensitive data
Implement rate limiting on API endpoints
Validate and sanitize all user inputs
Use HTTPS for all production traffic
Restrict CORS to specific domains
Keep dependencies updated
Monitor for security vulnerabilities

Continuous Deployment

For automated deployments:

Connect Git Repository: Link your GitHub/GitLab repository to your hosting platform
Configure Build Settings: Set build command to npm run build
Set Environment Variables: Add all required variables
Enable Auto-Deploy: Configure automatic deployments on push to main branch

Most platforms support preview deployments for pull requests, allowing you to test changes before merging to production.

Next Steps

Vercel Deployment Guide - Step-by-step Vercel deployment
Set up custom domain
Configure SSL certificate
Implement monitoring and analytics
Set up automated backups

Email Setup

Vercel Deployment Guide

⌘I

Build docs developers (and LLMs) love

Get started for free Talk to us

Setup

Going Live

​Overview

​Architecture

​Pre-Deployment Checklist

​Build Process

​Frontend Build

​Build Configuration

​Environment Variables Setup

​Required Variables

​Setting Environment Variables

​CORS Configuration

​Production CORS Setup

​API Endpoints

​Contact Form API

​Custom Plan API

​Card Plan API

​Deployment Steps

​Post-Deployment Verification

​Frontend Checks

​Backend Checks

​Database Checks

​Troubleshooting

​Build Failures

​API Errors

​CORS Errors

​Email Not Sending

​Performance Optimization

​Frontend

​Backend

​Database

​Security Best Practices

​Continuous Deployment

​Next Steps

Build docs developers (and LLMs) love

Overview

Architecture

Pre-Deployment Checklist

Build Process

Frontend Build

Build Configuration

Environment Variables Setup

Required Variables

Setting Environment Variables

CORS Configuration

Production CORS Setup

API Endpoints

Contact Form API

Custom Plan API

Card Plan API

Deployment Steps

Post-Deployment Verification

Frontend Checks

Backend Checks

Database Checks

Troubleshooting

Build Failures

API Errors

CORS Errors

Email Not Sending

Performance Optimization

Frontend

Backend

Database

Security Best Practices

Continuous Deployment

Next Steps