Deployment

This guide walks you through the entire process on deploying on popular platforms.

Vercel

Deploy to Vercel with zero configuration:

Vercel CLI

Deploy with Vercel CLI

# Install Vercel CLI
npm install -g vercel

# Deploy from your project directory
vercel

# Deploy to production
vercel --prod

Git Integration

Git-based Deployment

# Connect your repository to Vercel
# 1. Push your code to GitHub/GitLab/Bitbucket
git add .
git commit -m "Ready for deployment"
git push origin main

# 2. Import project in Vercel dashboard
# 3. Automatic deployments on every push

Netlify

Deploy to Netlify with drag-and-drop or Git integration:

netlify.toml

Netlify configuration file:

[build]
publish = "dist"
command = "npm run build"

[build.environment]
NODE_VERSION = "18"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

[[headers]]
for = "/static/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"

GitHub Pages

Deploy to GitHub Pages using GitHub Actions:

.github/workflows/deploy.yml

GitHub Actions workflow for deployment:

name: Deploy to GitHub Pages

on:
push:
branches: [ main ]

jobs:
build-and-deploy:
runs-on: ubuntu-latest

  steps:
  - name: Checkout
    uses: actions/checkout@v3

  - name: Setup Node.js
    uses: actions/setup-node@v3
    with:
      node-version: '18'
      cache: 'npm'

  - name: Install dependencies
    run: npm ci

  - name: Build
    run: npm run build

  - name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./dist

Docker

Containerize your Refract application:

Dockerfile

Dockerfile

# Build stage
FROM node:18-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

# Production stage
FROM nginx:alpine

# Copy built assets
COPY --from=builder /app/dist /usr/share/nginx/html

# Copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

nginx.conf

nginx.conf

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        # Handle client-side routing
        location / {
            try_files $uri $uri/ /index.html;
        }

        # Cache static assets
        location /static/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}