Deploying to Vercel and Firebase

Let's get your AI app live on the internet. This tutorial covers the two most popular platforms for AI web apps: Vercel (perfect for Next.js) and Firebase Hosting (perfect for any static app or Firebase-backed project). We'll walk through each one step by step.

Deploying to Vercel

Vercel is built by the creators of Next.js, making it the ideal platform for Next.js apps. But it also works great with Vite, React, Vue, and other frameworks.

Why Vercel for AI Apps?

• Serverless functions — API routes become functions automatically (great for AI API calls)
• Edge functions — Run code close to your users for lower latency
• Streaming support — Built-in support for streaming AI responses
• Preview deployments — Every pull request gets its own URL
• Zero config — Detects your framework and configures everything

Step 1: Install the Vercel CLI

npm install -g vercel

Step 2: Login

vercel login

Follow the prompts to authenticate with your email or GitHub account.

Step 3: Deploy

From your project directory:

vercel

That's it! Vercel will:

1. Detect your framework (Next.js, Vite, etc.)
2. Build your project
3. Deploy it
4. Give you a URL like https://my-app-abc123.vercel.app

For subsequent deployments:

# Deploy to preview (default)
vercel

# Deploy to production
vercel --prod

Step 4: Set Environment Variables

# Add a secret environment variable
vercel env add OPENAI_API_KEY

# You'll be prompted:
# - Enter the value
# - Choose environments (Production, Preview, Development)

Or set them in the Vercel dashboard: Project → Settings → Environment Variables.

Step 5: Connect to GitHub (Recommended)

The best workflow is connecting Vercel to your GitHub repository:

1. Go to vercel.com and sign in
2. Click "New Project"
3. Import your GitHub repository
4. Configure settings (usually the defaults are perfect)
5. Click "Deploy"

Now every push to main automatically deploys to production, and every pull request gets a preview deployment.

What to ask your AI: "Set up my Next.js app for Vercel deployment. I have API routes that call OpenAI. Make sure environment variables are configured correctly."

Vercel Project Settings

Key settings to check in your Vercel dashboard:

Deploying to Firebase Hosting

Firebase Hosting is excellent for static sites and single-page applications. If you're already using Firestore and Firebase Auth, it's a natural choice.

Why Firebase Hosting?

• Global CDN — Fast loading worldwide
• Free SSL — HTTPS out of the box
• Tight Firebase integration — Works seamlessly with Firestore, Auth, Functions
• Preview channels — Test before going live
• Simple CLI — One command to deploy

Step 1: Install Firebase CLI

npm install -g firebase-tools

Step 2: Login and Initialize

firebase login
firebase init hosting

During initialization, you'll be asked:

• Public directory: dist (Vite), build (CRA), or out (Next.js static export)
• Single-page app: Yes (if using React Router or similar)
• GitHub Actions: Optional (we'll cover CI/CD later)

Step 3: Configure firebase.json

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ]
  }
}

Step 4: Build and Deploy

# Build your app
npm run build

# Deploy to Firebase
firebase deploy --only hosting

Output:

✓ Deploy complete!

Hosting URL: https://your-project.web.app

Step 5: Add a Deploy Script

Add to your package.json:

{
  "scripts": {
    "deploy": "npm run build && firebase deploy --only hosting"
  }
}

Now deployment is just:

npm run deploy

What to ask your AI: "Configure Firebase Hosting for my [Vite/React/Vue] app. Include rewrites for client-side routing and caching headers for static assets."

Custom Domains

Both platforms support custom domains. Here's how to set them up.

Custom Domain on Vercel

1. Go to your project in the Vercel dashboard
2. Click Settings → Domains
3. Enter your domain (e.g., myaiapp.com)
4. Vercel shows you DNS records to add
5. Add the records at your domain registrar
6. Wait for DNS propagation (usually minutes, sometimes up to 48 hours)
7. Vercel automatically provisions an SSL certificate

Custom Domain on Firebase

1. Go to Firebase Console → Hosting
2. Click "Add custom domain"
3. Enter your domain
4. Firebase shows you DNS records to add
5. Add the records at your domain registrar
6. Wait for DNS propagation and SSL provisioning

DNS Records Cheat Sheet

What to ask your AI: "I bought a domain from [registrar]. Walk me through connecting it to my [Vercel/Firebase] deployment."

Preview Deployments

Preview deployments let you test changes before they go live. Both platforms support this.

Vercel Preview Deployments

If connected to GitHub, every pull request automatically gets a preview URL:

Push to PR → Vercel builds → Preview URL generated
https://my-app-git-feature-branch-username.vercel.app

You can also create previews manually:

vercel  # Without --prod flag creates a preview

Firebase Preview Channels

# Create a preview channel
firebase hosting:channel:deploy my-feature

# Output:
# ✓ Channel URL: https://your-project--my-feature-abc123.web.app

Preview channels expire after 7 days by default. You can customize this:

firebase hosting:channel:deploy my-feature --expires 14d

Platform Comparison

Troubleshooting Common Issues

"Build failed"

• Check that npm run build works locally first
• Verify environment variables are set on the platform
• Check the build logs for specific errors

"Page not found" after deployment

• For SPAs, make sure rewrites are configured (all routes → index.html)
• Check that the public directory in firebase.json matches your build output folder

"API calls failing in production"

• Environment variables might not be set on the platform
• API keys might be in client-side variables (exposed) instead of server-side
• CORS issues — your API might not accept requests from the deployed domain

"AI features work locally but not in production"

• AI API keys are not set as environment variables on the hosting platform
• The API key variable name doesn't match between local and production
• Rate limits or spending limits on the AI API are being hit

What to ask your AI: "My app deployed but [specific feature] isn't working. Here's what I see: [describe]. Here's my hosting config: [paste]. Help me debug."

What's Next?

Your app is deployed! But deploying manually every time gets old. Next, we'll set up CI/CD (Continuous Integration/Continuous Deployment) so your app deploys automatically whenever you push code.

What to ask your AI: "My AI app is deployed to [platform]. Help me set up automatic deployments when I push to GitHub."

---

🌐 www.genai-mentor.ai