Web Deployment

Deploy the MND React frontend to production

Overview

The MND web frontend is built with React 19, TypeScript, and Vite. It compiles to static files that can be hosted on any web server or CDN.

Prerequisites

• Node.js 18+
• npm or yarn
• Backend API running (see Backend Setup)

Local Development

1. Install Dependencies

cd MND-frontend
npm install

2. Configure Environment

Create .env file:

VITE_API_BASE_URL=http://localhost:3000

See Environment Variables for all options.

3. Start Development Server

npm run dev

The app runs on http://localhost:5173 by default.

Development features:

• Hot module replacement (HMR)
• Fast refresh
• Source maps
• Error overlay

Building for Production

1. Set Production Environment

Create .env.production:

# Same-origin deployment (backend on same domain)
VITE_API_BASE_URL=/api

# OR separate API server
VITE_API_BASE_URL=https://api.yourdomain.com

2. Run Build

npm run build

This creates an optimized production build in dist/:

MND-frontend/dist/
├── index.html
├── assets/
│   ├── index-[hash].js
│   ├── index-[hash].css
│   └── [other assets]
└── favicon.ico

Build optimizations:

• Code splitting
• Tree shaking
• Minification
• Asset hashing for cache busting
• Gzip/Brotli compression ready

3. Test Production Build Locally

npm run preview

Serves the production build on http://localhost:4173.

Deployment Options

Option 1: Vercel (Recommended)

Vercel is optimized for Vite and React apps.

Deploy via CLI

1. Install Vercel CLI:

npm install -g vercel

2. Login:

vercel login

3. Deploy:

cd MND-frontend
vercel

4. For production:

vercel --prod

Deploy via Git Integration

1. Push code to GitHub/GitLab/Bitbucket
2. Go to vercel.com
3. Click “New Project”
4. Import your repository
5. Configure:
   • Framework Preset: Vite
   • Root Directory: MND-frontend
   • Build Command: npm run build
   • Output Directory: dist
6. Add environment variables:
   • VITE_API_BASE_URL: Your backend URL
7. Deploy

Vercel configuration (vercel.json):

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://your-backend.com/api/:path*"
    }
  ]
}

Option 2: Netlify

Deploy via CLI

1. Install Netlify CLI:

npm install -g netlify-cli

2. Login:

netlify login

3. Deploy:

cd MND-frontend
netlify deploy --prod --dir=dist

Deploy via Git Integration

1. Push to GitHub/GitLab/Bitbucket
2. Go to netlify.com
3. Click “New site from Git”
4. Configure:
   • Base directory: MND-frontend
   • Build command: npm run build
   • Publish directory: dist
5. Add environment variables
6. Deploy

Netlify configuration (netlify.toml):

[build]
  base = "MND-frontend/"
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/api/*"
  to = "https://your-backend.com/api/:splat"
  status = 200
  force = true

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

Option 3: Static Hosting (Nginx, Apache)

Nginx Configuration

1. Build the app:

npm run build

2. Copy dist/ to web server:

scp -r dist/* user@server:/var/www/html/

3. Configure Nginx (/etc/nginx/sites-available/mnd):

server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/html;
    index index.html;

    # Serve static files
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Proxy API requests to backend
    location /api/ {
        proxy_pass http://localhost:3000/api/;
        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;
    }

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

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

4. Enable and restart:

sudo ln -s /etc/nginx/sites-available/mnd /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Apache Configuration

.htaccess in dist folder:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

# Cache static assets
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

Option 4: AWS S3 + CloudFront

1. Create S3 bucket
2. Enable static website hosting
3. Upload dist/ contents
4. Configure CloudFront distribution
5. Point to S3 origin

AWS CLI deployment:

aws s3 sync dist/ s3://your-bucket-name --delete
aws cloudfront create-invalidation --distribution-id YOUR_DIST_ID --paths "/*"

Environment Configuration

API Base URL

Configure based on deployment:

Same origin (frontend and backend on same domain):

VITE_API_BASE_URL=/api

Different origin:

VITE_API_BASE_URL=https://api.yourdomain.com

Local development:

VITE_API_BASE_URL=http://localhost:3000

CORS Configuration

If frontend and backend are on different domains, configure CORS in backend:

// MND-backend/src/server.ts
app.use(cors({
  origin: 'https://yourdomain.com',
  credentials: true
}));

Performance Optimization

Build Size Analysis

Analyze bundle size:

npm run build -- --mode analyze

Or add to vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    react(),
    visualizer({ open: true })
  ]
})

Code Splitting

Vite automatically splits code. For manual control:

// Lazy load routes
import { lazy, Suspense } from 'react'

const RouteMap = lazy(() => import('./pages/RouteMap'))
const Favorites = lazy(() => import('./pages/Favorites'))

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/map" element={<RouteMap />} />
        <Route path="/favorites" element={<Favorites />} />
      </Routes>
    </Suspense>
  )
}

Asset Optimization

• Images: Use WebP format, compress with tools like ImageOptim
• Fonts: Subset fonts to include only needed characters
• SVG: Optimize with SVGO

Caching Strategy

Cache-Control headers:

# index.html - no cache (always fetch)
location = /index.html {
    add_header Cache-Control "no-cache";
}

# JS/CSS with hashes - cache forever
location ~* \.(js|css)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
}

# Images - cache for 1 week
location ~* \.(png|jpg|jpeg|gif|svg)$ {
    add_header Cache-Control "public, max-age=604800";
}

SSL/HTTPS

Let’s Encrypt (Free)

# Install Certbot
sudo apt install certbot python3-certbot-nginx

# Get certificate
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

# Auto-renewal (runs twice daily)
sudo systemctl enable certbot.timer

Vercel/Netlify

Automatic HTTPS included.

Monitoring

Error Tracking

Add Sentry for error tracking:

npm install @sentry/react

import * as Sentry from '@sentry/react'

Sentry.init({
  dsn: 'your-sentry-dsn',
  environment: import.meta.env.MODE
})

Analytics

Add Google Analytics:

<!-- index.html -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Troubleshooting

Build Fails

# Clear cache and reinstall
rm -rf node_modules package-lock.json dist/
npm install
npm run build

API Requests Fail

Check CORS and API URL:

console.log('API URL:', import.meta.env.VITE_API_BASE_URL)

Verify backend CORS allows frontend origin.

404 on Refresh

Ensure server is configured for SPA routing (see Nginx/Apache config above).

Blank Page After Deploy

Check browser console for errors. Common issues:

• Incorrect base in vite.config.ts
• Missing environment variables
• API CORS errors

Deployment Checklist

• Environment variables configured
• Production build succeeds
• API URL points to production backend
• CORS configured on backend
• HTTPS/SSL enabled
• Caching headers configured
• Error tracking enabled
• Analytics configured
• Custom domain configured
• Tested on mobile devices
• Tested on multiple browsers

Next Steps

• Deploy Mobile App
• Set up Monitoring
• Configure Google APIs