Lovable → GitHub → Vercel: The Complete Deployment Flow for SEO-Ready Apps

Why This Flow?

Lovable is fantastic for generating web apps. But for production deployments with SEO requirements, you need more:

• Version control – Who changed what and when?
• CI/CD – Automatic builds and tests on every push
• Edge delivery – Static assets served from CDN nodes worldwide
• Preview deployments – Every branch gets its own URL for testing
• Custom domain – Your own domain instead of a subdomain

The Lovable → GitHub → Vercel flow solves all of this. And combined with Playwright SSG and automatic JSON-LD Schema, your app becomes fully SEO-ready.

Context: This article is part of our Vibe Coding SEO Playbook.

Step 1: Export Code from Lovable to GitHub

Activate GitHub Integration

1. Open your Lovable project
2. Click Settings → GitHub
3. Connect your GitHub account
4. Choose a repository (create new or use existing)
5. Click Push to GitHub

Lovable pushes the entire source code – including package.json, vite.config.ts, and all components.

What Gets Exported?

my-lovable-app/
├── src/
│   ├── components/    # React components
│   ├── pages/         # Pages
│   ├── hooks/         # Custom hooks
│   ├── lib/           # Utility functions
│   └── App.tsx        # Root component
├── public/            # Static assets
├── package.json       # Dependencies
├── vite.config.ts     # Build configuration
├── tailwind.config.ts # Styling
└── tsconfig.json      # TypeScript

Important: After the initial export, you can continue working in both Lovable and locally. Lovable syncs bidirectionally with GitHub.

Step 2: Repository Structure and Branch Strategy

Recommended Branch Strategy

main          → Production (Vercel Production Deployment)
├── develop   → Staging (Vercel Preview Deployment)
│   ├── feature/seo-optimization
│   ├── feature/new-landing-page
│   └── fix/mobile-navigation

Add Important Files

After export, you should add these files:

.github/workflows/ci.yml – CI Pipeline:

name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - run: npm run lint

vercel.json – Vercel Configuration:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

The rewrites rule is critical for SPAs: it ensures all routes point to index.html so React Router works properly.

Step 3: Create a Vercel Project

Connect Vercel with GitHub

1. Go to vercel.com and create an account
2. Click New Project
3. Select Import Git Repository
4. Authorize access to your GitHub repository
5. Vercel auto-detects: Vite Framework, dist Output Directory
6. Click Deploy

That's it. From now on, every push to main is automatically deployed.

What Vercel Does Automatically

• ✅ Build: npm run build on every push
• ✅ Preview URLs: Every branch/PR gets its own URL
• ✅ SSL: Automatic HTTPS certificate
• ✅ CDN: Global edge distribution
• ✅ Rollbacks: One-click rollback to any version

Step 4: Optimize Build Settings

Environment Variables

In Vercel → Settings → Environment Variables:

VITE_API_URL=https://api.your-domain.com
VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJ...

Important: All Vite variables must start with VITE_ to be available in the client bundle.

Build Configuration

Optimize your vite.config.ts for production:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
    sourcemap: true,
  },
});

Why manualChunks? Vendor libraries rarely change. By splitting them into separate chunks, browsers can cache them longer → faster subsequent visits.

Step 5: Custom Domain & Edge Functions

Set Up Custom Domain

1. Vercel → Settings → Domains
2. Add your domain: your-domain.com
3. Vercel shows you the DNS records to set at your domain registrar
4. Wait for DNS propagation (usually < 1 hour)

Edge Functions for Dynamic Content

If you need server-side logic (e.g., API proxying, redirects), use Vercel Edge Functions:

// api/og-image.ts
import { ImageResponse } from '@vercel/og';

export const config = { runtime: 'edge' };

export default function handler(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    <div style={{ display: 'flex', fontSize: 48, background: '#1a2744', color: 'white', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
      {title}
    </div>,
    { width: 1200, height: 630 }
  );
}

The Result

After implementing this flow, you have:

Complete SEO Stack

This deployment flow is the foundation. For complete SEO, you additionally need:

1. Playwright SSG → Renders static HTML for search engines
2. JSON-LD Schema → Structured data for rich snippets
3. Meta tags → Open Graph, Twitter Cards, canonical URLs
4. Sitemap → Automatically generated

All together, this creates the stack we used to bring till-freitag.com to Lighthouse 100.

---

Want the complete stack implemented for you? We'll do it →

Our SEO audit analyzes your current situation and delivers a concrete implementation plan – including deployment setup.

Related Articles

• 📸 OG-Image Best Practices for SPAs – Your Vercel deploy is live but LinkedIn shows no preview? Here's the fix.
• 📊 Google Search Console for Vibe Coding Projects – After deployment: how to verify your domain and track indexing.