Production Deployment

Complete guide to deploying Smart Shelf to production environments with recommended platforms and configurations.

Deployment Overview

Smart Shelf can be deployed to various platforms. This guide covers the most common and recommended deployment options.

Vercel provides the easiest and most optimized deployment for Next.js applications.

1. Prepare for Deployment

Update Environment Variables:

# Create production environment file
cp .env.local .env.production

# Update for production
NEXT_PUBLIC_SUPABASE_URL=https://[project-id].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=[production-anon-key]
NEXT_PUBLIC_APP_URL=https://yourdomain.com
NODE_ENV=production

Optimize Build:

# Test production build locally
pnpm build
pnpm start

# Check for build errors
pnpm lint
pnpm type-check

2. Deploy via Git Integration

Connect Repository:

  1. Push your code to GitHub/GitLab/Bitbucket
  2. Go to vercel.com
  3. Click "Add New Project"
  4. Import your repository

Configure Project:

Framework Preset: Next.js
Root Directory: ./
Build Command: pnpm build
Output Directory: .next
Install Command: pnpm install

Environment Variables: Add in Vercel dashboard:

NEXT_PUBLIC_SUPABASE_URL=https://[project-id].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=[production-key]
NEXT_PUBLIC_APP_URL=https://yourdomain.vercel.app

3. Deploy via CLI

Install Vercel CLI:

npm install -g vercel

Login and Deploy:

# Login to Vercel
vercel login

# Deploy to production
vercel --prod

# Follow the prompts:
# Set up and deploy? Yes
# Which scope? [Your team]
# Link to existing project? No
# Project name: smart-shelf
# Directory: ./

4. Custom Domain Setup

Add Custom Domain:

  1. Go to your project dashboard
  2. Navigate to "Domains"
  3. Add your custom domain
  4. Configure DNS records as instructed

DNS Configuration:

Type: CNAME
Name: www (or subdomain)
Value: cname.vercel-dns.com

Type: A
Name: @ (root domain)
Value: 76.76.19.61

Netlify Deployment

Alternative deployment platform with excellent features.

1. Deploy via Git

Connect Repository:

  1. Go to netlify.com
  2. Click "Add new site" → "Import an existing project"
  3. Connect your Git provider
  4. Select your repository

Build Settings:

Base directory: (leave empty)
Build command: pnpm build
Publish directory: .next

2. Environment Variables

Add in Netlify Dashboard:

NEXT_PUBLIC_SUPABASE_URL=https://[project-id].supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=[production-key]
NEXT_PUBLIC_APP_URL=https://[site-name].netlify.app

3. Custom Domain

Add Domain:

  1. Go to "Domain settings"
  2. Add custom domain
  3. Configure DNS records
  4. Enable HTTPS (automatic)

Railway Deployment

Modern platform with built-in database options.

1. Deploy from GitHub

Setup:

  1. Go to railway.app
  2. Click "Deploy from GitHub repo"
  3. Select your repository
  4. Railway auto-detects Next.js

Environment Variables:

NEXT_PUBLIC_SUPABASE_URL=${{SUPABASE_URL}}
NEXT_PUBLIC_SUPABASE_ANON_KEY=${{SUPABASE_ANON_KEY}}
NEXT_PUBLIC_APP_URL=${{RAILWAY_STATIC_URL}}

2. Custom Domain

Add Domain:

  1. Go to your service dashboard
  2. Click "Settings" → "Domains"
  3. Add custom domain
  4. Update DNS records

Digital Ocean App Platform

Scalable deployment with integrated services.

1. Deploy via Console

Create App:

  1. Go to digitalocean.com
  2. Navigate to "Apps"
  3. Create app from GitHub repository

App Spec Configuration:

name: smart-shelf
services:
- name: web
  source_dir: /
  github:
    repo: [your-username]/smart-shelf
    branch: main
  run_command: pnpm start
  build_command: pnpm build
  environment_slug: node-js
  instance_count: 1
  instance_size_slug: basic-xxs
  envs:
  - key: NEXT_PUBLIC_SUPABASE_URL
    value: https://[project-id].supabase.co
  - key: NEXT_PUBLIC_SUPABASE_ANON_KEY
    value: [production-key]

Docker Deployment

For containerized deployments and enterprise environments.

1. Create Dockerfile

# Dockerfile
FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json pnpm-lock.yaml* ./
RUN npm install -g pnpm && pnpm install --frozen-lockfile

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Build the application
RUN npm install -g pnpm && pnpm build

# Production image
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

2. Build and Deploy

# Build Docker image
docker build -t smart-shelf .

# Run locally
docker run -p 3000:3000 \
  -e NEXT_PUBLIC_SUPABASE_URL=https://[project-id].supabase.co \
  -e NEXT_PUBLIC_SUPABASE_ANON_KEY=[key] \
  smart-shelf

# Deploy to container registry
docker tag smart-shelf your-registry/smart-shelf:latest
docker push your-registry/smart-shelf:latest

AWS Deployment

1. AWS Amplify

Deploy via Console:

  1. Go to AWS Amplify Console
  2. Connect repository
  3. Configure build settings
  4. Deploy

Build Specification:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install -g pnpm
        - pnpm install
    build:
      commands:
        - pnpm build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

2. AWS ECS (Advanced)

For enterprise deployments with full AWS integration.

Task Definition:

{
  "family": "smart-shelf",
  "networkMode": "awsvpc",
  "requiresCompatibilities": ["FARGATE"],
  "cpu": "256",
  "memory": "512",
  "executionRoleArn": "arn:aws:iam::account:role/ecsTaskExecutionRole",
  "containerDefinitions": [
    {
      "name": "smart-shelf",
      "image": "your-account.dkr.ecr.region.amazonaws.com/smart-shelf:latest",
      "portMappings": [
        {
          "containerPort": 3000,
          "protocol": "tcp"
        }
      ],
      "environment": [
        {
          "name": "NEXT_PUBLIC_SUPABASE_URL",
          "value": "https://[project-id].supabase.co"
        }
      ],
      "logConfiguration": {
        "logDriver": "awslogs",
        "options": {
          "awslogs-group": "/ecs/smart-shelf",
          "awslogs-region": "us-east-1",
          "awslogs-stream-prefix": "ecs"
        }
      }
    }
  ]
}

Production Configuration

1. Supabase Production Setup

Update Authentication Settings:

Site URL: https://yourdomain.com
Redirect URLs:
- https://yourdomain.com/auth/callback
- https://yourdomain.com/auth/confirm

Database Considerations:

  • Upgrade to Pro plan for production workloads
  • Enable daily backups
  • Set up monitoring and alerts
  • Configure connection pooling

2. Performance Optimization

Next.js Configuration:

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
  images: {
    domains: ['[project-id].supabase.co'],
    formats: ['image/webp', 'image/avif'],
  },
  // Enable static optimization
  output: 'standalone',
  // Compress pages
  compress: true,
  // Enable SWC minification
  swcMinify: true,
  // Optimize bundle
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
      };
    }
    return config;
  },
}

export default nextConfig;

Environment Variables for Production:

# Performance
NEXT_PUBLIC_ENABLE_SOURCE_MAPS=false
ANALYZE=false

# Security
NEXT_PUBLIC_APP_ENV=production

3. Security Hardening

Headers Configuration:

// next.config.mjs
const securityHeaders = [
  {
    key: 'X-DNS-Prefetch-Control',
    value: 'on'
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'Referrer-Policy',
    value: 'origin-when-cross-origin'
  }
]

const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: securityHeaders,
      },
    ]
  },
}

Monitoring and Maintenance

1. Error Tracking

Sentry Integration:

# Install Sentry
pnpm add @sentry/nextjs

# Configure
npx @sentry/wizard -i nextjs

2. Analytics

Vercel Analytics:

pnpm add @vercel/analytics

# Add to app/layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

3. Uptime Monitoring

Setup Monitoring:

  • Use Vercel's built-in monitoring
  • Configure UptimeRobot for external monitoring
  • Set up Supabase monitoring alerts
  • Monitor application logs

Deployment Checklist

Pre-Deployment

  • Build succeeds locally
  • Tests pass (if implemented)
  • Environment variables configured
  • Database migrations applied
  • Supabase settings updated for production
  • Domain and SSL configured

Post-Deployment

  • Application loads correctly
  • Authentication works with production URLs
  • Database connections established
  • API endpoints responding
  • Admin user can be created
  • Monitoring configured
  • Backups scheduled
  • Documentation updated with production URLs

Troubleshooting Deployment

Common Issues

Build Failures

# Check build logs
vercel logs [deployment-url]

# Common fixes
pnpm add @types/node
pnpm update

Environment Variable Issues

  • Verify all required variables are set
  • Check for typos in variable names
  • Ensure client variables start with NEXT_PUBLIC_

Supabase Connection Issues

  • Verify production URLs in Supabase settings
  • Check RLS policies work with production data
  • Confirm API keys are correct

Domain/SSL Issues

  • Check DNS propagation with dig yourdomain.com
  • Verify CNAME records point to correct targets
  • Wait for SSL certificate provisioning (can take up to 24 hours)

Next Steps

After successful deployment:

  1. Initial Configuration - Set up your production environment
  2. User Guide - Learn how to use Smart Shelf
  3. Maintenance - Keep your deployment running smoothly

Deployment complete! Your Smart Shelf application is now live in production. Monitor the application and refer to the Troubleshooting Guide for any issues.