Frontend Deployment

Build Configuration

Vite Production Build

The frontend uses Vite for production builds with the following optimizations:

// vite.config.ts optimizations
export default defineConfig({
  build: {
    target: 'ES2020',
    sourcemap: true,
    minify: 'esbuild',
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@radix-ui/**'],
        }
      }
    }
  }
})

Environment Configuration

Production environment variables:

VITE_API_URL=your_api_url
VITE_SOCKET_URL=your_websocket_url
VITE_GITHUB_CLIENT_ID=your_github_client_id

Deployment Strategies

Docker Deployment

1. Multi-Stage Build

   # Build stage
   FROM node:20-alpine AS builder
   WORKDIR /app
   COPY package.json yarn.lock ./
   RUN yarn install --frozen-lockfile
   COPY . .
   RUN yarn build
   
   # Production stage
   FROM nginx:alpine
   COPY --from=builder /app/dist /usr/share/nginx/html
   COPY nginx.conf /etc/nginx/conf.d/default.conf
   

2. NGINX Configuration

   server {
     listen 80;
     root /usr/share/nginx/html;
     index index.html;
   
     location / {
       try_files $uri $uri/ /index.html;
     }
   
     # Cache static assets
     location /assets {
       expires 1y;
       add_header Cache-Control "public, no-transform";
     }
   }
   

Static Hosting

1. Build Output

   dist/
   ├── assets/
   │   ├── js/
   │   ├── css/
   │   └── images/
   ├── index.html
   └── config.json
   

2. CDN Configuration

   • Configure cache headers
   • Enable CORS for assets
   • Set up SSL/TLS

Performance Optimization

Code Splitting

1. Route-Based Splitting

   const ProjectDetails = lazy(() => import('./pages/project'));
   const Settings = lazy(() => import('./pages/settings'));
   

2. Component Chunking

   const ChartComponent = lazy(() => import('./components/Chart'));
   

Asset Optimization

1. Image Handling

   • Use WebP format
   • Implement lazy loading
   • Set up responsive images

2. Font Loading

   <link
     rel="preload"
     href="/fonts/montserrat.woff2"
     as="font"
     type="font/woff2"
     crossorigin
   />
   

Monitoring and Analytics

Error Tracking

1. Error Boundary Setup

   class ErrorBoundary extends React.Component {
     componentDidCatch(error, errorInfo) {
       // Log to error tracking service
     }
   }
   

2. Performance Monitoring

   • Track Core Web Vitals
   • Monitor client-side errors
   • Track API response times

Health Checks

1. API Connection

   const checkHealth = async () => {
     try {
       await fetch('/health');
       return true;
     } catch {
       return false;
     }
   };
   

2. WebSocket Connection

   socket.on('connect_error', (error) => {
     // Handle connection errors
   });
   

Security Measures

CSP Configuration

add_header Content-Security-Policy "
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;
  img-src 'self' data: https:;
  connect-src 'self' wss: https:;
";

CORS Settings

location /api {
  add_header 'Access-Control-Allow-Origin' '$http_origin' always;
  add_header 'Access-Control-Allow-Credentials' 'true' always;
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
}

CI/CD Integration

Build Pipeline

build_frontend:
  stage: build
  script:
    - yarn install
    - yarn build
  artifacts:
    paths:
      - dist/

deploy_frontend:
  stage: deploy
  script:
    - docker build -t frontend .
    - docker push frontend
  only:
    - main

Deployment Verification

1. Smoke Tests

   • Verify main routes
   • Check API connectivity
   • Test authentication flow

2. Rollback Procedure

   • Keep previous version tagged
   • Maintain configuration backups
   • Document rollback steps