Skip to content

DEPLOYMENT.md

Latest commit

 

History

History
149 lines (118 loc) · 2.91 KB

DEPLOYMENT.md

File metadata and controls

149 lines (118 loc) · 2.91 KB

Deployment Guide

Quick Deploy Options

Option 1: Vercel (Recommended)

  1. Push your code to GitHub
  2. Go to vercel.com
  3. Click "New Project"
  4. Import your GitHub repository
  5. Vercel will auto-detect Vite and configure build settings
  6. Click "Deploy"

Build Settings (auto-configured):

  • Build Command: npm run build
  • Output Directory: dist
  • Install Command: npm install

Option 2: Netlify

  1. Push your code to GitHub
  2. Go to netlify.com
  3. Click "Add new site" → "Import an existing project"
  4. Connect to GitHub and select your repository
  5. Configure build settings:
    • Build command: npm run build
    • Publish directory: dist
  6. Click "Deploy site"

Option 3: GitHub Pages

  1. Install gh-pages:
npm install --save-dev gh-pages
  1. Add to package.json:
{
  "homepage": "https://yourusername.github.io/sales-dashboard",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  }
}
  1. Update vite.config.ts:
export default defineConfig({
  base: '/sales-dashboard/',
  plugins: [react()]
})
  1. Deploy:
npm run deploy

Option 4: AWS Amplify

  1. Push code to GitHub
  2. Go to AWS Amplify Console
  3. Click "New app" → "Host web app"
  4. Connect your repository
  5. Build settings:
    • Build command: npm run build
    • Output directory: dist
  6. Click "Save and deploy"

Option 5: Docker

Create Dockerfile:

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

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and run:

docker build -t sales-dashboard .
docker run -p 8080:80 sales-dashboard

Environment Variables

For production, create .env.production:

VITE_API_URL=https://your-api.com
VITE_WS_URL=wss://your-websocket.com

Build Optimization

The production build is already optimized with:

  • Code splitting
  • Tree shaking
  • Minification
  • Asset optimization

Build size: ~150KB gzipped

Post-Deployment Checklist

  • Test all interactive features
  • Verify drag-and-drop works
  • Check responsive design
  • Test in multiple browsers
  • Verify all animations work
  • Check console for errors
  • Test call completion flow
  • Verify notifications appear

Custom Domain

Vercel

  1. Go to Project Settings → Domains
  2. Add your custom domain
  3. Configure DNS with provided records

Netlify

  1. Go to Domain Settings
  2. Add custom domain
  3. Configure DNS or use Netlify DNS

Performance Tips

  1. Enable CDN caching for static assets
  2. Use HTTP/2
  3. Enable Brotli compression
  4. Set proper cache headers
  5. Use a CDN for faster global delivery

Monitoring

Consider adding:

  • Error tracking (Sentry)
  • Analytics (Google Analytics, Plausible)
  • Performance monitoring (Web Vitals)