Hosting Options

Overview

BoxApp is a static React application that can be deployed to any hosting platform that supports single-page applications (SPAs). This guide covers the most popular hosting options with step-by-step instructions.

Vercel (Recommended)

Vercel is the recommended hosting platform for BoxApp due to its seamless integration with Vite and excellent performance.

Prerequisites

Vercel account (free tier available)
GitHub, GitLab, or Bitbucket repository
Completed Deployment Guide steps

Deploy to Vercel

Connect Your Repository

Go to vercel.com
Click Add New Project
Import your repository
Select the repository containing BoxApp

Configure Build Settings

Vercel should auto-detect Vite settings. Verify:

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install

Add Environment Variables

In the Environment Variables section, add:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your_production_anon_key

Add these variables for all environments (Production, Preview, Development) or configure them separately per environment.

Deploy

Click Deploy and wait for the build to complete. Vercel will:

Clone your repository
Install dependencies
Run the build command
Deploy to a global CDN
Provide a production URL

Vercel Configuration File

BoxApp includes a vercel.json configuration for SPA routing:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

This ensures all routes are handled by React Router, allowing direct navigation to any route without 404 errors.

Custom Domain

Add Domain in Vercel

Go to your project Settings > Domains
Click Add
Enter your domain name

Configure DNS

Add the following DNS records at your domain registrar:

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Or use Vercel’s nameservers for easier management.

Update Supabase Redirect URLs

In your Supabase dashboard, add your custom domain to Authentication > URL Configuration > Redirect URLs:

https://yourdomain.com/**

Continuous Deployment

Vercel automatically deploys when you push to your repository:

Production: Pushes to main branch
Preview: Pull requests and other branches
Rollback: One-click rollback to previous deployments

Each pull request gets a unique preview URL for testing before merging.

Netlify

Netlify is another excellent option with similar features to Vercel.

Deploy to Netlify

Connect Repository

Log in to netlify.com
Click Add new site > Import an existing project
Connect to your Git provider
Select your repository

Configure Build Settings

Set the following build configuration:

Base directory: (leave empty)
Build command: npm run build
Publish directory: dist

Add Environment Variables

Under Site settings > Environment variables, add:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your_production_anon_key

Configure Redirects

Create a netlify.toml file in your project root:

netlify.toml

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

This handles SPA routing for all paths.

Deploy

Click Deploy site to start the first deployment.

Netlify Features

Forms: Built-in form handling (can integrate with BoxApp lead forms)
Functions: Serverless functions for backend logic
Split Testing: A/B testing capabilities
Analytics: Built-in analytics (paid feature)

Cloudflare Pages

Cloudflare Pages offers excellent performance with their global CDN.

Deploy to Cloudflare Pages

Create Pages Project

Log in to Cloudflare Dashboard
Go to Pages
Click Create a project
Connect your Git repository

Configure Build

Set build configuration:

Framework preset: None (or Vite if available)
Build command: npm run build
Build output directory: dist

Add Environment Variables

In Settings > Environment variables:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your_production_anon_key

Configure SPA Routing

Create a _redirects file in your public/ folder:

/* /index.html 200

This file will be copied to dist/ during build.

Cloudflare Advantages

Unlimited bandwidth (on free tier)
Global CDN with excellent performance
Built-in DDoS protection
Web Analytics (free)

AWS Amplify

Deploy to AWS Amplify for integration with other AWS services.

Deploy to AWS Amplify

Create Amplify App

Open AWS Amplify Console
Click New app > Host web app
Connect your repository

Configure Build Settings

Amplify will auto-detect the framework. The build spec:

amplify.yml

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Add Environment Variables

In App settings > Environment variables:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your_production_anon_key

Configure Rewrites

In App settings > Rewrites and redirects, add:

Source: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
Target: /index.html
Type: 200 (Rewrite)

Self-Hosted Options

Docker Deployment

Create a Dockerfile for containerized deployment:

# Build stage
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
ARG VITE_SUPABASE_URL
ARG VITE_SUPABASE_ANON_KEY
ENV VITE_SUPABASE_URL=$VITE_SUPABASE_URL
ENV VITE_SUPABASE_ANON_KEY=$VITE_SUPABASE_ANON_KEY
RUN npm run build

# Production stage
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and run:

docker build \
  --build-arg VITE_SUPABASE_URL=https://your-project.supabase.co \
  --build-arg VITE_SUPABASE_ANON_KEY=your_key \
  -t boxapp .

docker run -p 80:80 boxapp

Traditional Web Server

Deploy to Apache or Nginx:

Build the Application

npm run build

Upload Files

Upload the contents of dist/ to your web server’s document root.

Configure Server

For Nginx, add to your site configuration:

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

For Apache, create .htaccess in your document root:

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

Performance Optimization

CDN Configuration

All major hosting platforms include CDN by default, but you can optimize further:

Enable HTTP/2: Improves load time for multiple assets
Enable compression: Gzip or Brotli for text assets
Set cache headers: Cache static assets for 1 year
Use asset hashing: Vite does this automatically

Build Optimizations

Optimize your build for production:

vite.config.ts

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          supabase: ['@supabase/supabase-js']
        }
      }
    }
  }
})

Monitoring

Analytics

Add analytics to track usage:

Vercel Analytics: Built-in Web Vitals tracking
Google Analytics: Traditional analytics
Plausible/Fathom: Privacy-friendly alternatives

Error Tracking

Integrate error tracking:

Sentry: Comprehensive error tracking
LogRocket: Session replay and error tracking
Rollbar: Real-time error monitoring

Uptime Monitoring

Vercel/Netlify: Built-in uptime monitoring
UptimeRobot: Free uptime monitoring
Pingdom: Advanced monitoring with alerts

Security Considerations

Always serve your application over HTTPS. All recommended platforms provide free SSL certificates automatically.

Security Headers

Most platforms allow custom headers. Add these for enhanced security:

vercel.json

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    }
  ]
}

Environment Security

Never commit .env files
Use platform environment variable management
Rotate keys regularly
Use different keys for staging and production

Troubleshooting

404 Errors on Route Refresh

If you get 404 errors when refreshing on non-root routes:

Verify your rewrite/redirect configuration
Check that vercel.json or equivalent is in your repository root
Ensure the configuration is deployed (check build logs)

Build Failures

Common build issues:

# Clear cache and rebuild
rm -rf node_modules dist
npm install
npm run build

# Check Node version
node --version  # Should be 18+

Environment Variables Not Working

Verify variables are prefixed with VITE_
Redeploy after adding/changing variables
Check build logs for variable values (they’ll be visible in the build)

Slow Initial Load

Enable code splitting
Lazy load routes and components
Optimize images (use WebP, proper sizing)
Remove unused dependencies
Analyze bundle with vite-bundle-visualizer

Next Steps

Deployment Guide - Complete deployment process
Supabase Setup - Configure your backend
Environment Variables - Configure your environment

Architecture

Development

Deployment

Hosting Options

Overview

Vercel (Recommended)

Prerequisites

Deploy to Vercel

Vercel Configuration File

Custom Domain

Continuous Deployment

Netlify

Deploy to Netlify

Netlify Features

Cloudflare Pages

Deploy to Cloudflare Pages

Cloudflare Advantages

AWS Amplify

Deploy to AWS Amplify

Self-Hosted Options

Docker Deployment

Traditional Web Server

Performance Optimization

CDN Configuration

Build Optimizations

Monitoring

Analytics

Error Tracking

Uptime Monitoring

Security Considerations

Security Headers

Environment Security

Troubleshooting

404 Errors on Route Refresh

Build Failures

Environment Variables Not Working

Slow Initial Load

Next Steps

Build docs developers (and LLMs) love

Architecture

Development

Deployment

​Overview

​Vercel (Recommended)

​Prerequisites

​Deploy to Vercel

​Vercel Configuration File

​Custom Domain

​Continuous Deployment

​Netlify

​Deploy to Netlify

​Netlify Features

​Cloudflare Pages

​Deploy to Cloudflare Pages

​Cloudflare Advantages

​AWS Amplify

​Deploy to AWS Amplify

​Self-Hosted Options

​Docker Deployment

​Traditional Web Server

​Performance Optimization

​CDN Configuration

​Build Optimizations

​Monitoring

​Analytics

​Error Tracking

​Uptime Monitoring

​Security Considerations

​Security Headers

​Environment Security

​Troubleshooting

​404 Errors on Route Refresh

​Build Failures

​Environment Variables Not Working

​Slow Initial Load

​Next Steps

Build docs developers (and LLMs) love

Overview

Vercel (Recommended)

Prerequisites

Deploy to Vercel

Vercel Configuration File

Custom Domain

Continuous Deployment

Netlify

Deploy to Netlify

Netlify Features

Cloudflare Pages

Deploy to Cloudflare Pages

Cloudflare Advantages

AWS Amplify

Deploy to AWS Amplify

Self-Hosted Options

Docker Deployment

Traditional Web Server

Performance Optimization

CDN Configuration

Build Optimizations

Monitoring

Analytics

Error Tracking

Uptime Monitoring

Security Considerations

Security Headers

Environment Security

Troubleshooting

404 Errors on Route Refresh

Build Failures

Environment Variables Not Working

Slow Initial Load

Next Steps