Skip to content

DEPLOYMENT.md

Latest commit

 

History

History
180 lines (135 loc) · 5.27 KB

DEPLOYMENT.md

File metadata and controls

180 lines (135 loc) · 5.27 KB
Raw

Deploying Rent Management System to Vercel

This guide will walk you through deploying your full-stack Rent Management System to Vercel.

Prerequisites

  1. Vercel Account: Sign up at vercel.com
  2. GitHub Repository: Your code should be in a GitHub repository
  3. Supabase Project: Have your Supabase database ready with credentials

Step 1: Prepare Your Repository

Ensure all the deployment files are committed:

git add .
git commit -m "feat: Add Vercel deployment configuration"
git push origin main

Step 2: Set Up Vercel Project

Option A: Deploy via Vercel Dashboard

  1. Go to vercel.com/dashboard
  2. Click "New Project"
  3. Import your GitHub repository
  4. Vercel will detect it as a Node.js project

Option B: Deploy via Vercel CLI

# Install Vercel CLI globally
npm install -g vercel

# Login to Vercel
vercel login

# Deploy from your project directory
cd /path/to/Rent-Management-System
vercel --prod

Step 3: Configure Environment Variables

In your Vercel dashboard, go to Project Settings → Environment Variables and add:

Required Variables:

SUPABASE_URL=https://your-project-id.supabase.co
SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
SUPABASE_JWT_SECRET=your_supabase_jwt_secret
NODE_ENV=production

Optional Variables (if using these features):

EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_email_app_password
PESAPAL_CONSUMER_KEY=your_pesapal_consumer_key
PESAPAL_CONSUMER_SECRET=your_pesapal_consumer_secret
PESAPAL_BASE_URL=https://cybqa.pesapal.com/pesapalv3
SMS_PROVIDER=africastalking
AT_USERNAME=your_africastalking_username
AT_API_KEY=your_africastalking_api_key
AT_SENDER_ID=your_approved_sender_id

Step 4: Domain Configuration

  1. Custom Domain (Optional): In Vercel dashboard → Domains, add your custom domain
  2. Default URL: Vercel provides a URL like https://rent-management-system.vercel.app

Step 5: Database Setup

Ensure your Supabase database is properly configured:

  1. Row Level Security (RLS): Enable RLS on all tables
  2. Policies: Set up proper security policies for your tables
  3. API Keys: Use the Service Role key for server-side operations

Step 6: Test Your Deployment

  1. Visit your Vercel URL
  2. Test the main functionality:
    • User authentication
    • Property management
    • Tenant management
    • Payment recording

Troubleshooting

Common Issues:

  1. Build Errors: Check Vercel build logs for specific error messages
  2. Environment Variables: Ensure all required env vars are set in Vercel
  3. Database Connection: Verify Supabase credentials and network access
  4. API Routes: Check that serverless functions are working at /api/*

Debug Steps:

  1. Check Logs: Vercel → Functions tab shows runtime logs
  2. Test API: Visit https://your-app.vercel.app/api/health for health check
  3. Build Locally: Run npm run build:vercel to test build process

Performance Optimization

Recommendations:

  1. Code Splitting: The build shows chunks > 500KB - consider dynamic imports
  2. Image Optimization: Use Vercel's Image component for better performance
  3. Caching: Implement proper caching strategies for API responses

Example Code Splitting:

// Instead of direct imports
import { SomeComponent } from './components/SomeComponent';

// Use dynamic imports
const SomeComponent = lazy(() => import('./components/SomeComponent'));

Production Considerations

  1. Environment Variables: Never commit .env files
  2. Security: Review all API endpoints for proper authentication
  3. Monitoring: Set up error tracking (Sentry, etc.)
  4. Backups: Ensure regular Supabase backups are configured

Support

If you encounter issues:

  1. Check Vercel documentation: vercel.com/docs
  2. Review build logs in Vercel dashboard
  3. Test locally with production environment variables

Current Deployment Status

  • ✅ Frontend build configured and working
  • ✅ Basic serverless API health check
  • ⚠️ Full API integration requires additional setup
  • ✅ Environment variables configured
  • ✅ Build process optimized

Full Backend Deployment Options

The current setup provides a basic API health check. For full backend functionality, you have several options:

Option 1: Vercel API Routes (Recommended)

Convert your Express routes to individual Vercel API routes:

api/
  auth/
    login.js
    user.js
  tenants/
    index.js
    [id].js
  properties/
    index.js
    [id].js
  payments/
    index.js

Option 2: Alternative Hosting for Backend

  • Railway: Excellent for full Express.js apps
  • Render: Great for full-stack Node.js applications
  • DigitalOcean App Platform: Supports both frontend and backend

Option 3: Serverless Adaptation

Adapt the Express server to work with Vercel's serverless functions by restructuring routes.

Quick Test

After deployment, visit:

  • Frontend: https://your-app.vercel.app
  • API Health: https://your-app.vercel.app/api/health

Note: The current deployment focuses on getting the frontend live quickly. The API placeholder provides a foundation for further backend integration.