Skip to content

VercelDeployment.md

Latest commit

 

History

History
134 lines (89 loc) · 4.52 KB

VercelDeployment.md

File metadata and controls

134 lines (89 loc) · 4.52 KB

Vercel Deployment Guide

This guide provides step-by-step instructions for deploying the Devoby waste management application to Vercel.

Prerequisites

Before you begin, ensure you have:

  • A Vercel account
  • A GitHub account (or GitLab/BitBucket)
  • Your project code pushed to a Git repository
  • All required API keys and environment variables

Step 1: Connect Your Repository to Vercel

  1. Log in to your Vercel dashboard
  2. Click the "Add New..." button and select "Project"
  3. Import your Git repository:
    • Select your Git provider (GitHub, GitLab, or BitBucket)
    • Authenticate with your Git provider if prompted
    • Find and select the Devoby repository

Step 2: Configure Project Settings

  1. Project Name: Enter a name for your project (e.g., "devoby")
  2. Framework Preset: Vercel should automatically detect Next.js
  3. Root Directory: Leave as default if your project is in the root of the repository
  4. Build and Output Settings: The default settings should work for a standard Next.js project

Step 3: Set Up Environment Variables

Add the following environment variables in the Vercel project settings:

```

Firebase Configuration

FIREBASE_API_KEY=your_firebase_api_key FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain FIREBASE_PROJECT_ID=your_firebase_project_id FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id FIREBASE_APP_ID=your_firebase_app_id

Google Maps

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

Mobile Money API (Placeholders)

MTN_MOBILE_MONEY_API_KEY=your_mtn_api_key ORANGE_MONEY_API_KEY=your_orange_api_key ```

Important: Variables that need to be accessible in the browser must be prefixed with NEXT_PUBLIC_.

Step 4: Deploy the Application

  1. Click the "Deploy" button
  2. Wait for the build and deployment process to complete
  3. Once deployed, Vercel will provide a URL to access your application

Step 5: Set Up a Custom Domain (Optional)

  1. In your project dashboard, go to the "Domains" tab
  2. Click "Add" and enter your domain name
  3. Follow the instructions to configure DNS settings for your domain

Continuous Deployment

Vercel automatically sets up continuous deployment from your Git repository:

  • New commits to the main branch will trigger a new production deployment
  • Pull requests will create preview deployments

Environment-Specific Deployments

Production, Preview, and Development Environments

Vercel provides different environments for different stages of your deployment:

  • Production: Deployments from the main branch
  • Preview: Deployments from pull requests
  • Development: Your local development environment

You can configure environment-specific variables in the Vercel dashboard by selecting the appropriate environment when adding variables.

Monitoring and Logs

  1. Deployment Status: View the status of your deployments in the "Deployments" tab
  2. Logs: Access build and runtime logs for each deployment
  3. Analytics: Enable Vercel Analytics to track performance and usage metrics

Scaling Considerations

Serverless Functions

Next.js API routes are deployed as serverless functions on Vercel. Consider these limitations:

  • Execution timeout: 10 seconds for Hobby tier, 60 seconds for Pro tier
  • Payload size limits: 4.5MB for Hobby tier, 5MB for Pro tier
  • Memory: 1024MB for Hobby tier, configurable for Pro tier

Edge Network

Vercel's edge network automatically caches and serves static assets globally. To optimize performance:

  • Use static generation for pages when possible
  • Implement Incremental Static Regeneration for dynamic content
  • Configure caching headers appropriately

Troubleshooting Common Issues

Build Failures

Symptom: Deployment fails during the build process

Solution:

  • Check the build logs for specific errors
  • Ensure all dependencies are correctly listed in package.json
  • Verify that your code works in the local development environment

Environment Variable Issues

Symptom: Features dependent on environment variables don't work

Solution:

  • Verify that all required environment variables are set in the Vercel dashboard
  • Ensure client-side variables are prefixed with NEXT_PUBLIC_
  • Check for typos in variable names

API Restrictions

Symptom: APIs work locally but fail in production

Solution:

  • Check if your API keys have domain restrictions
  • Update API settings to allow requests from your Vercel