Skip to main content
The SENTi-radar frontend is a Vite-powered React application that can be deployed to any static hosting platform. This guide covers building and deploying the production bundle.

​
Build Configuration

The project uses Vite with React and TypeScript:
vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";

export default defineConfig(({ mode }) => ({
  server: {
    host: "::",
    port: 8080,
  },
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
    dedupe: ["react", "react-dom", "react/jsx-runtime", "framer-motion"],
  },
}));

​
Build Commands

The project includes two build modes: 
npm run build
From package.json:
package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "preview": "vite preview"
  }
}
The production build optimizes assets, minifies code, and tree-shakes unused dependencies. The output is written to the dist/ directory.

​
Environment Variables

Create a .env.production file with your production environment variables:
.env.production
# Supabase Configuration
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=your-supabase-anon-key

# Scrape.do (X/Twitter & Reddit)
VITE_SCRAPE_TOKEN=your-scrape-do-token

# YouTube Data API v3 (optional)
VITE_YOUTUBE_API_KEY=your-youtube-api-key

# AI Services (optional)
VITE_GEMINI_API_KEY=your-gemini-api-key
VITE_GROQ_API_KEY=your-groq-api-key
All frontend environment variables must be prefixed with VITE_ to be accessible in the browser. Never expose secret keys (like service role keys) in frontend env vars.

​
Platform-Specific Deployment

Lovable provides zero-config deployment:
1

Push to Lovable

git push lovable main
2

Configure environment variables

Set production env vars in the Lovable dashboard under Project Settings → Environment Variables
3

Deploy

Lovable automatically builds and deploys on push

​
Vercel

1

Install Vercel CLI

npm install -g vercel
2

Build the project

npm run build
3

Deploy to Vercel

vercel --prod
4

Configure environment variables

Add production env vars in Vercel dashboard:
  • Project Settings → Environment Variables
  • Add each VITE_* variable
  • Redeploy to apply changes
Vercel Configuration (vercel.json):
vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "vite"
}

​
Netlify

1

Install Netlify CLI

npm install -g netlify-cli
2

Build the project

npm run build
3

Deploy to Netlify

netlify deploy --prod --dir=dist
Netlify Configuration (netlify.toml):
netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
The redirect rule ensures React Router works correctly with client-side routing.

​
Cloudflare Pages

1

Build the project

npm run build
2

Install Wrangler CLI

npm install -g wrangler
3

Deploy to Cloudflare Pages

wrangler pages deploy dist --project-name=senti-radar
Build Settings:
  • Build command: npm run build
  • Build output directory: dist
  • Root directory: /

​
AWS S3 + CloudFront

1

Build the project

npm run build
2

Create S3 bucket

aws s3 mb s3://senti-radar-production
3

Upload build files

aws s3 sync dist/ s3://senti-radar-production --delete
4

Configure bucket for static hosting

aws s3 website s3://senti-radar-production \
  --index-document index.html \
  --error-document index.html
5

Create CloudFront distribution

Point CloudFront to your S3 bucket origin and configure caching rules

​
Custom Domain Setup

After deploying, configure your custom domain:
  1. Go to Project Settings → Domains
  2. Add your custom domain
  3. Configure DNS records as shown
  4. Wait for SSL certificate provisioning
  1. Go to Site Settings → Domain Management
  2. Add custom domain
  3. Update DNS records to Netlify nameservers
  4. Enable HTTPS (automatic with Let’s Encrypt)
  1. Go to Custom Domains
  2. Add your domain
  3. Update DNS records (automatic if using Cloudflare DNS)
  4. SSL is automatic

​
Testing the Deployment

After deployment, verify:
1

Check environment variables

Open browser DevTools → Console and run:
console.log(import.meta.env.VITE_SUPABASE_URL)
Should output your Supabase URL (not undefined)
2

Test Supabase connection

Navigate to any page that fetches data. Check Network tab for successful API calls to Supabase
3

Verify edge functions

Create a test topic and confirm data is fetched from X/Reddit via edge functions
4

Check error handling

Open browser console and verify no critical errors

​
Performance Optimization

​
Asset Optimization

Vite automatically:
  • Minifies JavaScript and CSS
  • Tree-shakes unused code
  • Code-splits routes with dynamic imports
  • Optimizes images and fonts

​
CDN Caching

Configure cache headers for static assets:
vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'ui-vendor': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
          'chart-vendor': ['recharts'],
        },
      },
    },
  },
});

​
Bundle Analysis

Analyze bundle size: 
npm install -D rollup-plugin-visualizer
Then run: 
npm run build
View the generated stats.html to identify large dependencies.

​
Troubleshooting

Cause: Incorrect base path or missing environment variablesSolution:
  1. Check browser console for errors
  2. Verify all VITE_* env vars are set
  3. Ensure index.html is in the root of dist/
Cause: Server not configured for SPA routingSolution: Add redirect rule to serve index.html for all routes (see platform-specific configs above)
Cause: Variables not prefixed with VITE_ or not set during buildSolution:
  1. Ensure all vars start with VITE_
  2. Rebuild after adding env vars
  3. Clear build cache: rm -rf dist node_modules/.vite
Cause: Supabase edge functions not allowing your domainSolution: Check supabase/config.toml and ensure CORS headers include your production domain

​
CI/CD Pipeline

Example GitHub Actions workflow:
.github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
          VITE_SCRAPE_TOKEN: ${{ secrets.VITE_SCRAPE_TOKEN }}
      
      - name: Deploy to Vercel
        run: vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

​
Next Steps

Deploy Edge Functions

Deploy backend edge functions to Supabase

Configure Secrets

Set up production API keys and secrets

Build docs developers (and LLMs) love

Get started for freeTalk to us