Skip to main content
Achromatic
Live demo
General

Deployment

Instructions for deploying the application.

Vercel Deployment

Connect Your Repository

Link your GitHub, GitLab or Bitbucket repository to Vercel.

Configure Project Settings

In the Vercel dashboard:

  • Set Framework Preset to Next.js
  • Configure Root Directory if needed
  • Set Node.js version to 20.x

Environment Variables

Add necessary environment variables in Vercel project settings:

  • Database connection strings
  • Authentication provider API keys
  • Other sensitive or environment-specific configurations

Deploy

Click "Deploy" in the Vercel dashboard. Vercel will:

  • Install dependencies
  • Build the project
  • Run database migrations (if configured)
  • Deploy to the Vercel Network

Self-Deployment

You can self-host Achromatic on your own infrastructure. This guide covers the essential steps for self-deploying your application.

Before you begin, ensure you have:

  • A server with SSH access
  • (Optional) Domain name for your application

Installation

  1. Update your server:
Terminal
sudo apt update && sudo apt upgrade -y
  1. Install Node.js:
Terminal
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
  1. Install PostgreSQL:
Terminal
sudo apt install postgresql postgresql-contrib
  1. Install Nginx:
Terminal
sudo apt install nginx
  1. Install PM2 globally:
Terminal
sudo npm install -g pm2

Database

  1. Switch to PostgreSQL user and create a database and user:
Terminal
sudo -u postgres psql
CREATE DATABASE pro;
CREATE USER postgres WITH PASSWORD 'password';
ALTER USER postgres WITH SUPERUSER;
\q

  1. Update your .env file with the database connection string.

  2. Run database migrations:

Terminal
npx prisma migrate deploy

Process management

  1. Create an ecosystem file:
Terminal
nano ecosystem.config.js

Add the following content:

ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'web',
      script: 'npm',
      args: 'start',
      instances: 'max',
      exec_mode: 'cluster',
      autorestart: true,
      watch: false,
      max_memory_restart: '24G',
      env: {
        NODE_ENV: 'production'
      }
    }
  ]
};
  1. Build your application:
Terminal
npm run build
  1. Start your application:
Terminal
pm2 start ecosystem.config.js
  1. Set PM2 to start on system reboot:
Terminal
pm2 startup
pm2 save

Reverse Proxy

  1. Create a new Nginx configuration:
Terminal
sudo nano /etc/nginx/sites-available/web

Add the following basic configuration for certbot:

/etc/nginx/sites-available/web
server {
    listen 80;
    server_name 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;
    }
}
  1. Enable the site:
Terminal
sudo ln -s /etc/nginx/sites-available/web /etc/nginx/sites-enabled/web
  1. Test and reload Nginx:
Terminal
sudo nginx -t
sudo systemctl reload nginx
  1. Install Certbot:
Terminal
sudo apt install certbot python3-certbot-nginx
  1. Obtain and install a certificate:
Terminal
sudo certbot --nginx -d yourdomain.com

Follow the prompts to configure HTTPS.

  1. Replace the Nginx configuration at /etc/nginx/sites-available/web:
/etc/nginx/sites-available/web
server {
    listen 80;
    listen [::]:80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    root /var/www/html;
    index index.html index.htm;

    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_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;
        proxy_cache_bypass $http_upgrade;
    }

    location /_next/image {
        proxy_pass http://localhost:3000/_next/image;
    }

    location /_next/static {
        proxy_pass http://localhost:3000/_next/static;
    }
}
  1. Test and reload Nginx:
Terminal
sudo nginx -t
sudo systemctl reload nginx

Remember to adapt these instructions based on your specific server environment and requirements.