dbis_core/frontend/DEPLOYMENT.md

Deployment Guide

Prerequisites

• Node.js 18+ and npm/yarn
• Backend API running on configured port (default: 3000)

Development

cd frontend
npm install
npm run dev

The app will be available at http://localhost:3001

Building for Production

npm run build

This creates an optimized production build in the dist/ directory.

Environment Variables

Create a .env file:

VITE_API_BASE_URL=http://localhost:3000
VITE_APP_NAME=DBIS Admin Console
VITE_REAL_TIME_UPDATE_INTERVAL=5000

For production, update VITE_API_BASE_URL to your production API URL.

Production Deployment

Option 1: Static Hosting (Recommended)

The build output is static files that can be served by any web server:

1. Build the application:

   npm run build
   

2. Deploy the dist/ directory to:

   • Nginx: Copy dist/ contents to /var/www/html/
   • Apache: Copy dist/ contents to web root
   • CDN: Upload to S3/CloudFront, Azure Blob, etc.
   • Vercel/Netlify: Connect repository and deploy

Option 2: Docker

Create a Dockerfile:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and run:

docker build -t dbis-admin-console .
docker run -p 80:80 dbis-admin-console

Option 3: Serve with Node.js

Install serve:

npm install -g serve

Serve the build:

serve -s dist -l 3001

Nginx Configuration

Example nginx.conf:

server {
    listen 80;
    server_name admin.dbis.local;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip compression
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # SPA routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API proxy (if needed)
    location /api {
        proxy_pass http://backend:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Environment-Specific Builds

Development

npm run dev

Staging

VITE_API_BASE_URL=https://staging-api.dbis.local npm run build

Production

VITE_API_BASE_URL=https://api.dbis.local npm run build

Health Checks

The application includes error boundaries and error handling. Monitor:

• API connectivity
• Authentication token validity
• Error rates in console/logs

Performance Optimization

• Code splitting is enabled
• Assets are minified and optimized
• Lazy loading ready for routes
• Efficient data polling (10-15s intervals)

Security Considerations

• JWT tokens stored in localStorage (consider httpOnly cookies for production)
• CORS configured on backend
• XSS protection via React
• CSRF protection via token validation
• Security headers in nginx config

Monitoring

Recommended monitoring:

• Error tracking (Sentry, LogRocket)
• Performance monitoring (Web Vitals)
• API response times
• User session tracking

Troubleshooting

Build fails

• Check Node.js version (18+)
• Clear node_modules and reinstall
• Check for TypeScript errors

API connection issues

• Verify VITE_API_BASE_URL is correct
• Check CORS settings on backend
• Verify network connectivity

Authentication issues

• Check token expiration
• Verify backend auth endpoints
• Check browser console for errors