Skip to main content

Admin Dashboard Deployment

Guide for deploying the admin dashboard to production.

Build​

  1. Install dependencies
npm install
  1. Set environment variables

Create .env.production:

REACT_APP_API_URL=https://api.thepluggnamibia.com
  1. Build for production
npm run build

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

Deployment Options​

Netlify​

  1. Connect repository to Netlify
  2. Build command: npm run build
  3. Publish directory: build
  4. Add environment variables in Netlify dashboard

Vercel​

  1. Connect repository to Vercel
  2. Framework preset: Create React App
  3. Build command: npm run build
  4. Output directory: build
  5. Add environment variables

AWS S3 + CloudFront​

  1. Build the app
npm run build
  1. Upload to S3
aws s3 sync build/ s3://your-bucket-name --delete
  1. Configure CloudFront
    • Create distribution
    • Point to S3 bucket
    • Configure caching
    • Set up custom domain (optional)

Traditional Web Server​

  1. Build the app
  2. Upload build/ directory contents to web server
  3. Configure web server (nginx, Apache) to serve static files
  4. Set up routing for client-side routing

Nginx Configuration Example:

server {
    listen 80;
    server_name admin.thepluggnamibia.com;
    
    root /var/www/admin/build;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Environment Configuration​

Set production API URL:

REACT_APP_API_URL=https://api.thepluggnamibia.com

Security Considerations​

  1. HTTPS: Always use HTTPS in production
  2. API Key: Store API key securely, never in client code
  3. CORS: Configure CORS on backend to allow admin domain
  4. Authentication: Implement proper admin authentication
  5. Rate Limiting: Backend should rate limit admin API calls

Monitoring​

  • Set up error tracking (Sentry, etc.)
  • Monitor API response times
  • Track user actions (analytics)
  • Set up uptime monitoring

Updates​

After deploying updates:

  1. Clear browser cache
  2. Verify API endpoints are accessible
  3. Test critical functionality
  4. Monitor for errors