Deployment

​

Overview

​

Build Process

​

Production Build

pnpm build

1. Type checking: Runs tsc --noEmit to verify TypeScript types
2. Asset optimization: Minifies and bundles JavaScript, CSS, and assets
3. Output generation: Creates static files in the dist/ directory

​

Build Configuration

build: {
  assetsDir: "./",
  emptyOutDir: true,
  outDir: "../dist",
  sourcemap: command === "serve",
}

• Output directory: dist/ (relative to project root)
• Assets directory: Assets are placed in the root of dist/
• Source maps: Generated in development mode only
• Clean build: emptyOutDir ensures old files are removed

​

Build Output

dist/
├── index.html          # Entry HTML file
├── assets/
│   ├── index-[hash].js # Application JavaScript
│   └── index-[hash].css # Application styles
└── [other assets]      # Images, fonts, etc.

​

Environment Variables

​

Production Environment Variables

VITE_API_KEY_MAPBOX=your_production_mapbox_token

​

Security Considerations

• Mapbox tokens are public and restricted by domain/URL
• Configure allowed URLs in your Mapbox account settings
• Never commit .env files to version control
• Use different tokens for development and production

​

Deployment Platforms

​

Static Hosting Providers

• Vercel
• Netlify
• Cloudflare Pages
• GitHub Pages
• AWS S3 + CloudFront
• Azure Static Web Apps
• Google Cloud Storage

​

Vercel Deployment

1. Install Vercel CLI:

npm install -g vercel

2. Deploy:

vercel

3. Configure environment variables in Vercel dashboard:
   • Add VITE_API_KEY_MAPBOX in Settings → Environment Variables

​

Netlify Deployment

1. Install Netlify CLI:

npm install -g netlify-cli

2. Build and deploy:

pnpm build
netlify deploy --prod --dir=dist

3. Or connect your Git repository in Netlify dashboard with:
   • Build command: pnpm build
   • Publish directory: dist
   • Environment variables: VITE_API_KEY_MAPBOX

​

GitHub Pages

1. Build the application:

pnpm build

2. Deploy to gh-pages branch:

npx gh-pages -d dist

base: '/repository-name/'

​

Docker Deployment

# Build stage
FROM node:20-alpine AS builder

WORKDIR /app

# Install pnpm
RUN npm install -g [email protected]

# Copy package files
COPY package.json pnpm-lock.yaml ./

# Install dependencies
RUN pnpm install --frozen-lockfile

# Copy source
COPY . .

# Build application
ARG VITE_API_KEY_MAPBOX
ENV VITE_API_KEY_MAPBOX=$VITE_API_KEY_MAPBOX
RUN pnpm build

# Production stage
FROM nginx:alpine

# Copy built files
COPY --from=builder /app/dist /usr/share/nginx/html

# Copy nginx config for SPA
RUN echo 'server { \
  listen 80; \
  location / { \
    root /usr/share/nginx/html; \
    index index.html; \
    try_files $uri $uri/ /index.html; \
  } \
}' > /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

docker build --build-arg VITE_API_KEY_MAPBOX=your_token -t been .
docker run -p 8080:80 been

​

SPA Configuration

​

URL Routing

location / {
  try_files $uri $uri/ /index.html;
}

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

​

Verification

​

Local Preview

pnpm build
pnpm preview

​

Pre-deployment Checklist

• All tests pass (pnpm test and pnpm e2e)
• No linting errors (pnpm lint)
• Code is properly formatted (pnpm format)
• Production build succeeds (pnpm build)
• Environment variables are configured
• Mapbox token is valid and has correct URL restrictions
• Application loads correctly in preview mode

​

Performance Optimization

​

Build Optimizations

• Code splitting: Separates vendor and application code
• Tree shaking: Removes unused code
• Minification: Compresses JavaScript and CSS
• Asset optimization: Optimizes images and other assets

​

Caching Strategy

• index-[hash].js - Cache assets indefinitely
• index.html - Serve with no-cache or short TTL

​

CDN Configuration

1. Serve static assets from a CDN
2. Enable gzip/brotli compression
3. Set long cache headers for hashed assets
4. Set short cache headers for index.html

​

Monitoring

​

Production Monitoring

• Error tracking: Sentry, Rollbar, or similar
• Analytics: Google Analytics, Plausible, or similar
• Performance monitoring: Web Vitals tracking
• Uptime monitoring: UptimeRobot, Pingdom, or similar

​

Health Checks

• Server uptime
• Response times
• Build/deployment status

​

Rollback

• Vercel: Click “Rollback” on previous deployment
• Netlify: Deploy previous build from Deploys tab
• Manual: Keep previous dist/ builds or Git tags

​

Troubleshooting

​

Build Failures

pnpm build
# Review TypeScript errors and fix

​

Runtime Issues

​

Build Size

pnpm build
# Review the output for bundle sizes