Skip to main content

Web App Deployment

The Artbase Studio web app is deployed to Vercel for optimal Next.js performance.

Vercel Setup​

Initial Configuration​

  1. Connect Repository

    # Install Vercel CLI
    npm i -g vercel

    # Link project
    cd apps/web
    vercel link

  2. Configure Project Settings

    • Framework Preset: Next.js
    • Root Directory: apps/web
    • Build Command: pnpm build
    • Output Directory: .next

Environment Variables​

Configure in Vercel Dashboard → Settings → Environment Variables:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...

# Stripe
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...

# Resend
RESEND_API_KEY=re_...

# App URLs
NEXT_PUBLIC_APP_URL=https://app.artbase.studio
warning

Set SUPABASE_SERVICE_ROLE_KEY as "Sensitive" to prevent exposure in build logs.

Build Configuration​

next.config.ts​

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // Enable standalone output for smaller deployments
  output: 'standalone',

  // Image optimization
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '*.supabase.co',
      },
    ],
  },

  // Headers for security
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
        ],
      },
    ];
  },
};

export default nextConfig;

vercel.json​

{
  "buildCommand": "pnpm build",
  "framework": "nextjs",
  "regions": ["iad1"],
  "crons": []
}

Domain Configuration​

Custom Domain​

  1. Add domain in Vercel Dashboard → Settings → Domains
  2. Configure DNS: 
    app.artbase.studio  CNAME  cname.vercel-dns.com
  3. Wait for SSL certificate provisioning

Storefront Subdomains​

For creator storefronts ({slug}.artbase.studio):

  1. Add wildcard domain: *.artbase.studio
  2. Configure wildcard DNS: 
    *.artbase.studio  CNAME  cname.vercel-dns.com

Deployment Process​

Automatic Deployments​

Vercel automatically deploys on push to:

  • main → Production
  • Feature branches → Preview deployments

Manual Deployment​

# Deploy to production
vercel --prod

# Deploy to preview
vercel

Rollback​

# List deployments
vercel ls

# Promote previous deployment
vercel promote <deployment-url>

API Routes​

Serverless Functions​

API routes in app/api/ are deployed as Vercel Serverless Functions.

Default limits:

  • Duration: 10 seconds (Hobby), 60 seconds (Pro)
  • Memory: 1024 MB
  • Payload: 4.5 MB

Extending Timeout​

For long-running operations:

// app/api/long-task/route.ts
export const maxDuration = 60; // seconds

export async function POST(request: Request) {
  // Long-running operation
}

Performance Optimization​

Caching​

// Static page caching
export const revalidate = 3600; // 1 hour

// API response caching
return new Response(data, {
  headers: {
    'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300',
  },
});

Edge Functions​

For latency-sensitive routes:

// app/api/location/route.ts
export const runtime = 'edge';

export async function GET(request: Request) {
  // Runs at edge, closest to user
}

Monitoring​

Vercel Analytics​

Enable in project settings for:

  • Web Vitals (LCP, FID, CLS)
  • Real User Monitoring
  • Function execution metrics

Error Tracking​

Integrate Sentry for error monitoring:

// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.1,
});

Health Check​

Create a health endpoint:

// app/api/health/route.ts
export async function GET() {
  return Response.json({
    status: 'healthy',
    timestamp: new Date().toISOString(),
    version: process.env.VERCEL_GIT_COMMIT_SHA?.slice(0, 7),
  });
}

Troubleshooting​

Build Failures​

Check build logs in Vercel Dashboard:

vercel logs <deployment-url>

Common issues:

  • Missing environment variables
  • TypeScript errors
  • Import path issues

Function Timeouts​

If API routes timeout:

  1. Check external API latency
  2. Implement request queuing
  3. Move to background service

Cold Starts​

Reduce cold start times:

  • Minimize bundle size
  • Use edge runtime where possible
  • Lazy-load heavy dependencies