Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ihfaz297/MND/llms.txt
Use this file to discover all available pages before exploring further.
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
Local Development
1. Install Dependencies
cd MND-frontend
npm install
.env file:
VITE_API_BASE_URL=http://localhost:3000
3. Start Development Server
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
This creates an optimized production build in dist/:
MND-frontend/dist/
├── index.html
├── assets/
│ ├── index-[hash].js
│ ├── index-[hash].css
│ └── [other assets]
└── favicon.ico
- Code splitting
- Tree shaking
- Minification
- Asset hashing for cache busting
- Gzip/Brotli compression ready
3. Test Production Build Locally
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
- Install Vercel CLI:
- Login:
- Deploy:
- For production:
Deploy via Git Integration
- Push code to GitHub/GitLab/Bitbucket
- Go to vercel.com
- Click “New Project”
- Import your repository
- Configure:
- Framework Preset: Vite
- Root Directory:
MND-frontend
- Build Command:
npm run build
- Output Directory:
dist
- Add environment variables:
VITE_API_BASE_URL: Your backend URL
- 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
- Install Netlify CLI:
npm install -g netlify-cli
- Login:
- Deploy:
cd MND-frontend
netlify deploy --prod --dir=dist
Deploy via Git Integration
- Push to GitHub/GitLab/Bitbucket
- Go to netlify.com
- Click “New site from Git”
- Configure:
- Base directory:
MND-frontend
- Build command:
npm run build
- Publish directory:
dist
- Add environment variables
- 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
- Build the app:
- Copy
dist/ to web server:
scp -r dist/* user@server:/var/www/html/
- 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;
}
- 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
- Create S3 bucket
- Enable static website hosting
- Upload
dist/ contents
- Configure CloudFront distribution
- 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):
Different origin:
VITE_API_BASE_URL=https://api.yourdomain.com
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
}));
Build Size Analysis
Analyze bundle size:
npm run build -- --mode analyze
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)
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
Next Steps