Deployment Guide

This guide covers deploying your Vite + React application to various hosting platforms. The application builds to static files that can be served from any CDN or static hosting provider.

Build Process

The application uses Vite as its build tool. The build process is configured in vite.config.ts and produces optimized static assets.

Build Commands

npm run build

The production build command (npm run build) creates an optimized bundle in the dist/ directory with:

Minified JavaScript and CSS
Code splitting for optimal loading
Hashed filenames for cache busting
Optimized assets

Environment Variables

Before deploying, you need to configure the following environment variables:

VITE_SUPABASE_URL

string

required

Your Supabase project URL (e.g., https://xxxxx.supabase.co)

VITE_SUPABASE_ANON_KEY

string

required

Your Supabase anonymous/public API key

Never commit environment variables to version control. Use your platform’s environment variable management system.

Deployment Platforms

Vercel
Netlify
Cloudflare Pages
Custom Server

Vercel provides seamless deployment for Vite applications with automatic builds and previews.

Install Vercel CLI

npm install -g vercel

vercel login

Configure Project

Create a vercel.json file in your project root:

vercel.json

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install"
}

Set Environment Variables

Add your environment variables in the Vercel dashboard or via CLI:

vercel env add VITE_SUPABASE_URL
vercel env add VITE_SUPABASE_ANON_KEY

Deploy

Deploy to production:

vercel --prod

Build Settings

If deploying via the Vercel dashboard:

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install
Node Version: 18.x or higher

Netlify offers continuous deployment with Git integration and automatic HTTPS.

Install Netlify CLI

npm install -g netlify-cli

netlify login

Configure Project

Create a netlify.toml file in your project root:

netlify.toml

[build]
  command = "npm run build"
  publish = "dist"

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

The redirect rule is essential for React Router to work properly with client-side routing.

Set Environment Variables

Add environment variables via the Netlify dashboard or CLI:

netlify env:set VITE_SUPABASE_URL "your-url"
netlify env:set VITE_SUPABASE_ANON_KEY "your-key"

Deploy

Deploy to production:

netlify deploy --prod

Build Settings

If deploying via the Netlify dashboard:

Build Command: npm run build
Publish Directory: dist
Node Version: 18 or higher (set in netlify.toml or environment variables)

Cloudflare Pages provides fast global deployment with built-in CDN.

Install Wrangler CLI

npm install -g wrangler

wrangler login

Create Pages Project

Create a new Pages project:

wrangler pages project create transport-logistics

Configure Build

In the Cloudflare dashboard, configure:

Build Command: npm run build
Build Output Directory: dist
Root Directory: / (or your project root)

Set Environment Variables

Add environment variables in the Cloudflare Pages dashboard under Settings > Environment Variables:

VITE_SUPABASE_URL
VITE_SUPABASE_ANON_KEY

Deploy

Deploy using Wrangler:

npm run build
wrangler pages publish dist

Deploy to any server with Node.js or static file hosting.

Build the Application

npm run build

This creates a dist/ directory with all static files.

Configure Web Server

For Apache, create/update .htaccess in the dist/ directory:

.htaccess

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

For Nginx, update your server configuration:

nginx.conf

server {
  listen 80;
  server_name your-domain.com;
  root /var/www/transport-logistics/dist;
  index index.html;

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

Upload Files

Transfer the dist/ directory to your server:

rsync -avz dist/ user@server:/var/www/transport-logistics/

Or use FTP/SFTP to upload the contents of the dist/ directory.

Set Environment Variables

Since Vite inlines environment variables at build time, you need to rebuild with production environment variables:

VITE_SUPABASE_URL="your-url" VITE_SUPABASE_ANON_KEY="your-key" npm run build

Domain Configuration

After deployment, configure your custom domain:

Add Domain to Platform

Add your custom domain in your hosting platform’s dashboard (Vercel, Netlify, etc.).

Update DNS Records

Add the required DNS records provided by your platform:

A Record or CNAME Record pointing to your platform
AAAA Record for IPv6 (if provided)

Enable HTTPS

Most platforms automatically provision SSL certificates via Let’s Encrypt. Enable HTTPS redirect in your platform settings.

Update Supabase Redirect URLs

In your Supabase dashboard, add your production domain to the allowed redirect URLs:

Go to Authentication > URL Configuration
Add https://your-domain.com to Site URL
Add https://your-domain.com/** to Redirect URLs

Post-Deployment Checklist

Environment variables are configured correctly

Supabase connection is working

Authentication flows work properly

All routes are accessible (no 404 errors)

SSL/HTTPS is enabled

Custom domain is configured

Error monitoring is set up (optional)

Performance monitoring is configured (optional)

Continuous Deployment

Enable automatic deployments by connecting your Git repository:

Connect Repository: Link your GitHub, GitLab, or Bitbucket repository to your hosting platform
Configure Branch: Set your production branch (usually main or master)
Enable Auto-Deploy: Every push to the production branch will trigger a new deployment
Preview Deployments: Most platforms create preview deployments for pull requests

Preview deployments are useful for testing changes before merging to production.

Troubleshooting

Build Fails

Check Node.js version (18.x or higher recommended)
Verify all dependencies are installed: npm install
Check for TypeScript errors: npm run lint
Review build logs for specific error messages

Blank Page After Deployment

Verify environment variables are set correctly
Check browser console for errors
Ensure base path is configured correctly in vite.config.ts
Verify Supabase URL and API key are valid

404 on Page Refresh

Configure URL rewriting rules (see platform-specific instructions above)
Ensure all routes redirect to index.html for client-side routing

Supabase Connection Error

Verify VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are set
Check Supabase project status
Ensure API keys haven’t been regenerated
Verify domain is in Supabase allowed URLs

Next Steps

Supabase Setup

Configure your Supabase backend for production

Analytics Dashboard

Monitor your platform with real-time analytics

Architecture

Development

Deployment

Build Process

Build Commands

Environment Variables

Deployment Platforms

Build Settings

Build Settings

Domain Configuration

Post-Deployment Checklist

Continuous Deployment

Troubleshooting

Build Fails

Blank Page After Deployment

404 on Page Refresh

Supabase Connection Error

Next Steps

Supabase Setup

Analytics Dashboard

Build docs developers (and LLMs) love

Architecture

Development

Deployment

​Build Process

​Build Commands

​Environment Variables

​Deployment Platforms

​Build Settings

​Build Settings

​Domain Configuration

​Post-Deployment Checklist

​Continuous Deployment

​Troubleshooting

​Build Fails

​Blank Page After Deployment

​404 on Page Refresh

​Supabase Connection Error

​Next Steps

Supabase Setup

Analytics Dashboard

Build docs developers (and LLMs) love

Build Process

Build Commands

Environment Variables

Deployment Platforms

Build Settings

Build Settings

Domain Configuration

Post-Deployment Checklist

Continuous Deployment

Troubleshooting

Build Fails

Blank Page After Deployment

404 on Page Refresh

Supabase Connection Error

Next Steps