Deployment Best Practices for AI-Built Apps

Why AI-Built Apps Need Different Deployment Strategies

AI-generated applications have specific quirks that affect deployment. Most AI tools output React or Next.js projects with default configurations that work locally but break in production. The code often includes hardcoded values, missing build optimizations, and overlooked security settings.

Lovable apps typically export as Vite-based React projects. Claude-generated apps vary more widely but often use Next.js or vanilla React. Both need proper environment variable handling, build commands, and framework-specific configurations that the AI doesn't always include.

The biggest issue: AI tools optimize for speed of creation, not deployment readiness. They generate working code but skip production concerns like caching strategies, API route protection, and proper error boundaries.

Setting Up Vercel for AI-Generated Projects

Vercel is the most common deployment target for AI-built apps. The process looks simple but requires specific configurations based on your framework.

Framework Presets

When you import your repository, Vercel auto-detects the framework. For Lovable apps, this usually selects Vite. Verify this is correct. If your app uses Next.js, the preset must match your Next.js version.

• Vite apps: Use the “Vite” framework preset
• Next.js apps: Verify the detected Next.js version matches your package.json
• Create React App: Use “Create React App” preset, though CRA is increasingly outdated
• Custom setups: Select “Other” and manually configure build commands

Build Commands and Output Directory

AI-generated projects sometimes have non-standard build configurations. Check your package.json for the actual build script, then verify Vercel uses it.

• Build Command: Usually npm run build or yarn build
• Output Directory: dist for Vite, .next for Next.js, build for CRA
• Install Command: Typically auto-detected, but specify npm install if you have dependency issues

If your build fails, the first place to check is whether these settings match what works locally.

Environment Variables and API Keys

This is where most AI-built deployments break. The AI often hardcodes API keys in the source code or uses .env files that don't transfer to production.

Setting Variables in Vercel

Go to Project Settings → Environment Variables. Add each variable your app needs. Vercel supports different values for Production, Preview, and Development environments.

• Production: Values used in your live app
• Preview: Values for pull request previews (often same as Production)
• Development: Values for local development when using vercel dev

Common Variables for AI Apps

AI-generated apps typically need these environment variables:

• VITE_API_KEY or NEXT_PUBLIC_API_KEY: Client-side API keys (exposed to browser)
• API_SECRET_KEY: Server-side API keys (never exposed to client)
• DATABASE_URL: Database connection strings
• VITE_API_BASE_URL or NEXT_PUBLIC_API_URL: Backend API URLs
• NODE_ENV: Usually set automatically by Vercel, but check if your app relies on it

The naming prefix matters. Vite requires VITE_ prefix for client-accessible variables. Next.js uses NEXT_PUBLIC_. Variables without these prefixes are only available server-side.

Security Considerations

Never expose sensitive keys to the client. If your AI-generated code uses an API key directly in frontend code, you need to create a backend proxy. This is a common issue in Lovable apps that call external APIs directly from React components.

Handling API Routes and Backend Functions

AI tools often generate API routes or serverless functions that need specific configuration. Next.js API routes usually work out of the box on Vercel, but other setups need manual configuration.

Next.js API Routes

If your AI-generated app includes a pages/api or app/apidirectory, these become serverless functions automatically on Vercel. Verify they have proper error handling and don't expose sensitive operations.

Vite/React Apps with Backend Needs

Lovable apps often generate pure frontend code without backend functions. If you need server-side logic, you have three options:

• Add a separate backend service and configure CORS properly
• Use Vercel Serverless Functions by adding an api/ directory at project root
• Migrate to Next.js for integrated API routes

The third option is often the cleanest for apps that need both frontend and backend in one deployment.

Function Configuration

Serverless functions have execution limits. On Vercel's free tier, functions timeout after 10 seconds. If your AI-generated API routes do heavy processing, you need to optimize or upgrade your plan.

Create a vercel.json file to configure function behavior:

{
  "functions": {
    "api/**/*.js": {
      "maxDuration": 10
    }
  }
}

Build Optimization and Performance

AI-generated code often lacks build optimizations. These settings improve load times and reduce deployment size.

Asset Optimization

Check if your app properly optimizes images and static assets. Vercel automatically optimizes images in Next.js using the Image component, but Vite apps need manual configuration.

• Replace <img> tags with optimized components
• Compress images before committing them
• Use proper image formats (WebP for photos, SVG for icons)
• Implement lazy loading for below-fold images

Code Splitting

Most modern frameworks handle code splitting automatically, but verify your AI-generated app actually implements it. Check your build output for multiple chunk files. If you see one massive JavaScript bundle, code splitting isn't working.

Caching Strategy

Configure proper cache headers for static assets. Add this to your vercel.json:

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Custom Domains and SSL

Once your app deploys successfully, configure a custom domain. Vercel provides free SSL certificates automatically, but setup requires correct DNS configuration.

Adding a Domain

In Project Settings → Domains, add your custom domain. Vercel provides DNS records to add at your domain registrar:

• A record pointing to Vercel's IP (76.76.21.21)
• CNAME record for www subdomain (optional but recommended)

SSL certificates provision automatically within minutes of correct DNS setup. If your domain shows “Invalid Configuration” after an hour, double-check the DNS records.

Redirect Configuration

Set up proper redirects in vercel.json to handle common URL patterns:

{
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ]
}

Monitoring and Error Tracking

Deployment isn't complete until you have visibility into production errors. AI-generated apps rarely include proper error tracking.

Built-in Vercel Analytics

Enable Vercel Analytics in Project Settings for basic performance metrics. This shows page load times and Web Vitals scores but doesn't catch JavaScript errors.

Adding Sentry or Similar Tools

Integrate a proper error tracking service. Sentry is the most common choice. Add the SDK to your project and configure it with your DSN as an environment variable.

For Next.js apps, use @sentry/nextjs. For Vite apps, use @sentry/react. Both require initialization in your app's entry point.

Log Aggregation

Vercel Functions provide logs in the dashboard, but they're difficult to search. For production apps, consider forwarding logs to a service like LogTail or Datadog.

Common Deployment Issues and Fixes

These are the issues we see most often when deploying AI-generated applications.

Build Fails with Module Not Found

Usually caused by case-sensitive imports. AI tools sometimes generate imports with incorrect casing that work on macOS/Windows but fail on Linux build servers. Check import statements match actual file names exactly.

Environment Variables Undefined in Browser

Variables without proper prefixes don't reach the client. Add VITE_ or NEXT_PUBLIC_ prefix and redeploy. You must redeploy for environment variable changes to take effect.

API Routes Return 404

Check your API route file structure matches framework conventions. Next.js requires specific directory structures. Vite apps need explicit Vercel Serverless Function configuration.

CORS Errors When Calling External APIs

This means you're calling APIs from client-side code that don't allow browser requests. Create a backend proxy route to make the API call server-side, then call that route from your frontend.

Hydration Mismatches in React

Often caused by random values or timestamps rendered during SSR that differ on client hydration. Wrap time-dependent content in useEffect or mark components as client-only.

How FinishLine AI Handles This

We deploy AI-generated apps regularly. Most projects need 2-4 hours of configuration work to go from “works in development” to “production-ready deployment.”

Our $100 Quick Audit identifies deployment blockers in your AI-built project. We review your code, check environment configurations, and provide a specific list of issues preventing proper deployment. You get a written report with exact fixes needed.

If you need hands-on help, our Fix & Finish service ($5k-$15k) takes AI-generated apps and makes them production-ready. This includes proper environment configuration, security hardening, performance optimization, error tracking setup, and validated deployment. Most projects complete in 1-2 weeks.

We use the same deployment practices for all our custom builds. Whether you're rescuing an AI-generated project or building from scratch, the deployment foundation stays consistent: proper environment handling, optimized builds, monitoring in place, and security configured correctly.