Deployment - Dyeink

Dyeink can be deployed to various platforms including Vercel, Cloudflare Workers, or traditional servers. This guide covers deployment options and environment configuration.

Deployment Options

Choose the deployment platform that best fits your needs:

Vercel

Best for easy deployment with zero configuration. Excellent for Next.js and frontend hosting.

Cloudflare Workers

Best for global edge deployment with low latency. Great for serverless backends.

Traditional Servers

Best for full control and custom infrastructure. VPS, AWS EC2, etc.

Vercel Deployment

Vercel provides seamless deployment for both frontend and backend components.

Prerequisites

Vercel account (vercel.com)
Git repository (GitHub, GitLab, or Bitbucket)
Completed Auth0, MongoDB, and Storage setup

Deploy Frontend (Platform)

Connect repository

Log in to Vercel
Click Add New > Project
Import your Git repository
Vercel will auto-detect the framework settings

Configure build settings

Set the following for your platform frontend:

Framework Preset: Vite (or auto-detected)
Root Directory: platform
Build Command: npm run build or vite build
Output Directory: dist
Install Command: npm install

Add environment variables

In Settings > Environment Variables, add:

VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-spa-client-id
VITE_AUTH0_AUDIENCE=https://api.dyeink.com
VITE_AUTH0_REDIRECT_URI=https://yourdomain.com
VITE_API_BASE_URL=/api

Update VITE_AUTH0_REDIRECT_URI to your production domain after deployment.

Deploy

Click Deploy
Wait for the build to complete
Visit your deployed site at the provided URL
Optionally, add a custom domain in Settings > Domains

Deploy Backend (API)

Create backend project

Create a new Vercel project for your backend
Import the same repository
Set Root Directory to backend

Configure build settings

Framework Preset: Other
Root Directory: backend
Build Command: npm run build (if using TypeScript)
Output Directory: Leave empty for Node.js
Install Command: npm install

Add environment variables

Add all backend environment variables:

# MongoDB
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/dyeink?retryWrites=true&w=majority

# Auth0
AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id
AUTH0_CLIENT_SECRET=your-client-secret
AUTH0_AUDIENCE=https://api.dyeink.com
AUTH0_MANAGEMENT_API_TOKEN=your-management-api-token

# Cloudflare R2
R2_ACCOUNT_ID=your-account-id
R2_ACCESS_KEY_ID=your-access-key-id
R2_SECRET_ACCESS_KEY=your-secret-access-key
R2_BUCKET_NAME=dyeink-images
R2_PUBLIC_URL=https://cdn.yourdomain.com

# Vercel (for domain management)
VERCEL_TOKEN=your-vercel-token
VERCEL_PROJECT_ID=your-project-id
VERCEL_TEAM_ID=your-team-id

# App
PORT=3000
NODE_ENV=production
FRONTEND_URL=https://yourdomain.com

Deploy

Click Deploy and wait for completion.

Get Vercel API Credentials

For domain management features, you need Vercel API access:

Create access token

Go to Settings > Tokens in Vercel dashboard
Click Create Token
Name it “Dyeink API Access”
Set expiration (or no expiration)
Click Create and copy the token

Get project and team IDs

Project ID:

Navigate to your project settings
Copy the Project ID from the General tab

Team ID (if using teams):

Go to your team settings
Copy the Team ID
If not using teams, omit this variable

Add to environment variables

Update your backend environment variables:

VERCEL_TOKEN=your_access_token
VERCEL_PROJECT_ID=prj_xxxxxxxxxxxxx
VERCEL_TEAM_ID=team_xxxxxxxxxxxxx

Cloudflare Workers Deployment

Deploy your backend as serverless functions at the edge.

Prerequisites

Cloudflare account with Workers enabled
Wrangler CLI installed: npm install -g wrangler
Cloudflare API token

Setup

Install Wrangler

npm install -g wrangler
wrangler login

Configure wrangler.toml

Create wrangler.toml in your backend directory:

name = "dyeink-api"
main = "src/index.js"
compatibility_date = "2024-01-01"

[env.production]
workers_dev = false
route = "api.yourdomain.com/*"
zone_id = "your_zone_id"

[vars]
NODE_ENV = "production"

Add secrets

Use Wrangler to add sensitive environment variables:

wrangler secret put MONGODB_URI
wrangler secret put AUTH0_CLIENT_SECRET
wrangler secret put R2_SECRET_ACCESS_KEY
wrangler secret put VERCEL_TOKEN

Enter each value when prompted.

Deploy

wrangler deploy

Your API will be deployed to Cloudflare’s global network.

Cloudflare Workers have a 10ms CPU time limit per request. Optimize database queries and use caching for best performance.

Traditional Server Deployment

Deploy to a VPS, AWS EC2, DigitalOcean Droplet, or similar.

Prerequisites

Linux server (Ubuntu 20.04+ recommended)
Node.js 18+ installed
Nginx or Apache for reverse proxy
SSL certificate (Let’s Encrypt recommended)

Backend Deployment

Set up the server

# Update system
sudo apt update && sudo apt upgrade -y

# Install Node.js 18+
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

# Install PM2 for process management
sudo npm install -g pm2

Clone and build

# Clone repository
git clone https://github.com/yourusername/dyeink.git
cd dyeink/backend

# Install dependencies
npm install --production

# Build if using TypeScript
npm run build

Configure environment

Create .env file:

cp .env.example .env
nano .env

Add all production environment variables (see Environment Variables below).

Start with PM2

# Start application
pm2 start npm --name "dyeink-api" -- start

# Save PM2 configuration
pm2 save

# Set PM2 to start on boot
pm2 startup

Configure Nginx

Create Nginx configuration:

server {
    listen 80;
    server_name api.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Save to /etc/nginx/sites-available/dyeink-api and enable:

sudo ln -s /etc/nginx/sites-available/dyeink-api /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Set up SSL with Let's Encrypt

# Install certbot
sudo apt install certbot python3-certbot-nginx

# Get certificate
sudo certbot --nginx -d api.yourdomain.com

# Auto-renewal is configured automatically

Frontend Deployment

Build frontend

cd ../platform
npm install
npm run build

Configure Nginx for frontend

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    root /var/www/dyeink/platform/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Enable gzip compression
    gzip on;
    gzip_vary on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

Copy build files and enable site:

sudo mkdir -p /var/www/dyeink/platform
sudo cp -r dist/* /var/www/dyeink/platform/
sudo ln -s /etc/nginx/sites-available/dyeink /etc/nginx/sites-enabled/
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
sudo systemctl reload nginx

Environment Variables Reference

Complete list of all environment variables for production deployment:

Frontend Variables

Variable	Description	Example
`VITE_AUTH0_DOMAIN`	Auth0 tenant domain	`your-tenant.auth0.com`
`VITE_AUTH0_CLIENT_ID`	Auth0 SPA client ID	`abc123...`
`VITE_AUTH0_AUDIENCE`	Auth0 API identifier	`https://api.dyeink.com`
`VITE_AUTH0_REDIRECT_URI`	OAuth callback URL	`https://yourdomain.com`
`VITE_API_BASE_URL`	Backend API base URL	`/api` or `https://api.yourdomain.com`

Backend Variables

Variable	Description	Example
`MONGODB_URI`	MongoDB connection string	`mongodb+srv://...`
`AUTH0_DOMAIN`	Auth0 tenant domain	`your-tenant.auth0.com`
`AUTH0_CLIENT_ID`	Auth0 application client ID	`abc123...`
`AUTH0_CLIENT_SECRET`	Auth0 application client secret	`secret123...`
`AUTH0_AUDIENCE`	Auth0 API identifier	`https://api.dyeink.com`
`AUTH0_MANAGEMENT_API_TOKEN`	Auth0 Management API token	`token123...`
`R2_ACCOUNT_ID`	Cloudflare account ID	`abc123...`
`R2_ACCESS_KEY_ID`	R2 access key ID	`access123...`
`R2_SECRET_ACCESS_KEY`	R2 secret access key	`secret123...`
`R2_BUCKET_NAME`	R2 bucket name	`dyeink-images`
`R2_PUBLIC_URL`	Public URL for R2 bucket	`https://cdn.yourdomain.com`
`VERCEL_TOKEN`	Vercel API token (optional)	`token123...`
`VERCEL_PROJECT_ID`	Vercel project ID (optional)	`prj_...`
`VERCEL_TEAM_ID`	Vercel team ID (optional)	`team_...`
`PORT`	Server port	`3000`
`NODE_ENV`	Environment name	`production`
`FRONTEND_URL`	Frontend URL for CORS	`https://yourdomain.com`

Always use separate environment variables for development, staging, and production environments.

CI/CD Setup

Automate deployments with GitHub Actions.

GitHub Actions Example

name: Deploy to Production

on:
  push:
    branches:
      - main

jobs:
  deploy-frontend:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          
      - name: Install and build
        working-directory: ./platform
        run: |
          npm ci
          npm run build
        env:
          VITE_AUTH0_DOMAIN: ${{ secrets.VITE_AUTH0_DOMAIN }}
          VITE_AUTH0_CLIENT_ID: ${{ secrets.VITE_AUTH0_CLIENT_ID }}
          VITE_AUTH0_AUDIENCE: ${{ secrets.VITE_AUTH0_AUDIENCE }}
          VITE_AUTH0_REDIRECT_URI: ${{ secrets.VITE_AUTH0_REDIRECT_URI }}
          VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
          
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: ./platform

  deploy-backend:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          
      - name: Install dependencies
        working-directory: ./backend
        run: npm ci
          
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_BACKEND_PROJECT_ID }}
          working-directory: ./backend

Add secrets to GitHub

Go to your repository Settings > Secrets and variables > Actions
Click New repository secret
Add all required secrets (VERCEL_TOKEN, environment variables, etc.)

Commit workflow

git add .github/workflows/deploy.yml
git commit -m "Add deployment workflow"
git push origin main

Monitor deployment

Navigate to the Actions tab in your repository to monitor deployment progress.

Post-Deployment Checklist

Troubleshooting

Build fails on Vercel

Check build logs for specific errors
Verify all environment variables are set
Ensure package.json scripts are correct
Check Node.js version compatibility
Try building locally first: npm run build

API returns 500 errors

Check backend logs for stack traces
Verify database connection string
Ensure all required environment variables are set
Check Auth0 configuration
Verify R2 credentials are correct

Authentication not working

Verify Auth0 callback URLs match your domain
Check that AUTH0_AUDIENCE is identical in frontend and backend
Ensure cookies are enabled
Check browser console for CORS errors
Verify JWT token is being sent in Authorization header

Images not loading

Check R2_PUBLIC_URL is correct
Verify CORS settings on R2 bucket
Ensure images were uploaded successfully
Check Content-Type headers
Test direct access to R2 URL

Performance Optimization

Enable Vercel Edge Network for global CDN
Use Cloudflare for DNS and DDoS protection
Implement Redis caching for frequently accessed data
Enable gzip/brotli compression
Optimize images before upload
Use lazy loading for images
Implement pagination for large datasets
Enable HTTP/2 or HTTP/3
Monitor Core Web Vitals

Next Steps

Auth0 Setup

Review authentication configuration

MongoDB Setup

Review database configuration

Storage Setup

Review storage configuration

Documentation Index

​Deployment Options

Vercel

Cloudflare Workers

Traditional Servers

​Vercel Deployment

​Prerequisites

​Deploy Frontend (Platform)

​Deploy Backend (API)

​Get Vercel API Credentials

​Cloudflare Workers Deployment

​Prerequisites

​Setup

​Traditional Server Deployment

​Prerequisites

​Backend Deployment

​Frontend Deployment

​Environment Variables Reference

​Frontend Variables

​Backend Variables

​CI/CD Setup

​GitHub Actions Example

​Post-Deployment Checklist

​Troubleshooting

​Performance Optimization

​Next Steps

Auth0 Setup

MongoDB Setup

Storage Setup

Deployment Options

Vercel Deployment

Prerequisites

Deploy Frontend (Platform)

Deploy Backend (API)

Get Vercel API Credentials

Cloudflare Workers Deployment

Prerequisites

Setup

Traditional Server Deployment

Prerequisites

Backend Deployment

Frontend Deployment

Environment Variables Reference

Frontend Variables

Backend Variables

CI/CD Setup

GitHub Actions Example

Post-Deployment Checklist

Troubleshooting

Performance Optimization

Next Steps