Deployment

Docs

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

Update your server:
```
sudo apt update && sudo apt upgrade -y
```

Install Node.js:

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

Install PostgreSQL:

sudo apt install postgresql postgresql-contrib

Install Nginx:
```
sudo apt install nginx
```
Install PM2 globally:
```
sudo npm install -g pm2
```

Database

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

Please generate a stronger password instead of using 'password'.

Update your .env file with the database connection string.
Run database migrations:
```
npx prisma migrate deploy
```

Process management

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'
      }
    }
  ]
};

Build your application:
```
npm run build
```
Start your application:
```
pm2 start ecosystem.config.js
```
Set PM2 to start on system reboot:
```
pm2 startup
pm2 save
```

Reverse Proxy

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;
    }
}

Enable the site:

sudo ln -s /etc/nginx/sites-available/achromatic-pro /etc/nginx/sites-enabled/achromatic-pro

Test and reload Nginx:

sudo nginx -t
sudo systemctl reload nginx

Install Certbot:

sudo apt install certbot python3-certbot-nginx

Obtain and install a certificate:
```
sudo certbot --nginx -d yourdomain.com
```
Follow the prompts to configure HTTPS.

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;
    }
}

Test and reload Nginx:

sudo nginx -t
sudo systemctl reload nginx

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

Caching Base components