Buy Pro
Docs
Deployment

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:

    sudo apt update && sudo apt upgrade -y
  2. Install Node.js:

    curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
    sudo apt-get install -y nodejs
  3. Install PostgreSQL:

    sudo apt install postgresql postgresql-contrib
  4. Install Nginx:

    sudo apt install nginx
  5. Install PM2 globally:

    sudo npm install -g pm2

Database

  1. Switch to PostgreSQL user and create a database and user:

    sudo -u postgres psql
    CREATE DATABASE achromatic_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:

    npx prisma migrate deploy

Process management

  1. Create an ecosystem file:

    nano ecosystem.config.js

    Add the following content:

    module.exports = {
      apps: [
        {
          name: 'achromatic-pro',
          script: 'npm',
          args: 'start',
          instances: 'max',
          exec_mode: 'cluster',
          autorestart: true,
          watch: false,
          max_memory_restart: '24G',
          env: {
            NODE_ENV: 'production'
          }
        }
      ]
    };
  2. Build your application:

    npm run build
  3. Start your application:

    pm2 start ecosystem.config.js
  4. Set PM2 to start on system reboot:

    pm2 startup
    pm2 save

Reverse Proxy

  1. Create a new Nginx configuration:

    sudo nano /etc/nginx/sites-available/achromatic-pro

    Add the following basic configuration for certbot:

    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;
        }
    }
  2. Enable the site:

    sudo ln -s /etc/nginx/sites-available/achromatic-pro /etc/nginx/sites-enabled/achromatic-pro
  3. Test and reload Nginx:

    sudo nginx -t
    sudo systemctl reload nginx
  4. Install Certbot:

    sudo apt install certbot python3-certbot-nginx
  5. Obtain and install a certificate:

    sudo certbot --nginx -d yourdomain.com

    Follow the prompts to configure HTTPS.

  6. Replace the Nginx configuration at /etc/nginx/sites-available/achromatic-pro:

    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;
        }
    }
  7. Test and reload Nginx:

    sudo nginx -t
    sudo systemctl reload nginx

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