Deployment

    Learn how we deploy our website to production with Vercel

    Deployment is the process of putting your code live on the internet so users can access it. We use Vercel, which handles deployment automatically when we push code to GitHub.

    How Deployment Works

    What is Vercel?

    What: Vercel is a cloud platform for hosting web applications. It's made by the same company that created Next.js.

    Why we use it: Vercel automatically builds and deploys our website whenever we push code to GitHub. No manual deployment needed!

    Key feature: Every pull request gets its own preview URL so you can test changes before merging.

    📚 Official Documentation:

    Vercel Documentation

    The Deployment Workflow

    Here's what happens when you make changes to the codebase:

    1️⃣

    Create a Branch and Make Changes

    You create a new Git branch and make your code changes locally.

    2️⃣

    Create a Pull Request

    You open a pull request (PR) on GitHub to merge your changes into the main branch.

    3️⃣

    Vercel Creates a Preview Deployment

    Vercel automatically builds your code and creates a unique preview URL (e.g., gdg-website-abc123.vercel.app). This lets you test your changes before merging.

    4️⃣

    Check the Preview

    Click the Vercel preview link in your PR. Make sure everything works correctly!

    ⚠️ IMPORTANT: Always check that the preview deployment succeeds and works as expected.

    5️⃣

    Merge to Main

    Once the preview looks good and your PR is approved, merge it into the main branch.

    6️⃣

    Vercel Deploys to Production

    Vercel automatically deploys the main branch to production (the live website). Your changes are now live!

    What Happens During Build

    When Vercel deploys your code, it runs npm run build. This command:

    • Compiles TypeScript to JavaScript
    • Bundles and minifies all code (makes it smaller and faster)
    • Optimizes CSS and images
    • Pre-renders static pages
    • Checks for type errors and other issues

    ⚠️ If the build fails:

    1. Check the Vercel logs to see the error message
    2. Run npm run build locally to reproduce the error
    3. Fix the error in your code
    4. Push the fix and Vercel will automatically retry

    Test the build locally:

    Run npm run build — if it succeeds locally, it should succeed on Vercel.

    Environment Variables

    What: Environment variables are secret values (like Firebase API keys) that your app needs to run.

    Why: We store these separately (not in the code) for security. Different environments (production, preview, development) can have different values.

    How to add environment variables on Vercel:

    1. Go to your project on vercel.com
    2. Click Settings → Environment Variables
    3. Add each variable (name and value)
    4. Select which environments need it: Production, Preview, and/or Development
    5. Click Save

    Our required environment variables:

    Check .env.local.example in the project root for the full list of required Firebase environment variables.

    Edge Runtime Limitations

    Our backend routes run on Vercel's Edge Runtime, which is a lightweight JavaScript environment. It's fast and globally distributed, but has some limitations:

    ❌ What you CANNOT do on the Edge:

    • File system operations — No reading/writing files with fs
    • WebSockets or Socket.io — No persistent connections
    • In-memory caching — State doesn't persist between requests
    • Some Node.js APIs — Only a subset is available
    • Long-running processes — Requests timeout after a certain duration

    ✅ What you CAN do:

    • Fetch data from APIs (including Firebase)
    • Process HTTP requests and return responses
    • Run middleware and authentication checks
    • Use most modern JavaScript features

    📚 Learn more:

    Next.js — Edge and Node.js Runtimes

    Debugging Failed Deployments

    If your deployment fails, here's how to debug it:

    1. Check Vercel Logs

      Click on the failed deployment in Vercel to see the error logs. The error message will tell you what went wrong.

    2. Reproduce Locally

      Run npm run build on your computer. If it fails locally, you can debug more easily.

    3. Common Issues
      • TypeScript errors (type mismatches, missing properties)
      • Missing dependencies in package.json
      • Environment variables not set correctly
      • Import errors (wrong file paths, missing files)
    4. Fix and Push

      Once you fix the issue, commit and push. Vercel will automatically retry the deployment.

    ✅ Deployment Checklist

    Before merging your PR, make sure:

    • ☐ The Vercel preview deployment succeeds (green checkmark on GitHub)
    • ☐ You've clicked the preview link and tested your changes
    • ☐ No TypeScript errors or warnings
    • ☐ npm run build succeeds locally
    • ☐ Your PR has been reviewed and approved

    📚 Additional Resources

    ← Firebase GuideBack to Documentation Home