Deployment

This guide covers deploying Goalst to production. Goalst is a Vite-based React application that can be deployed to any static hosting platform.

Prerequisites

Before deploying, ensure you have:

A working Goalst application locally
Supabase project configured (see Setting up Supabase)
A hosting platform account (Vercel, Netlify, Cloudflare Pages, etc.)

Build process

Goalst uses Vite for building and bundling. The build process compiles TypeScript, bundles assets, and optimizes for production.

Understanding the build command

package.json

{
  "scripts": {
    "build": "tsc -b && vite build"
  }
}

This command:

tsc -b - Runs TypeScript compiler to check types
vite build - Bundles the application for production

Local build test

Test your production build locally before deploying:

Create a production build

npm run build

This creates a dist/ folder with your compiled application.

Preview the build

npm run preview

This serves the production build at http://localhost:4173 (default Vite preview port).

Test functionality

Navigate through your app and verify:

Authentication works
Routes function correctly
Data loads from Supabase
No console errors

Environment variables

Never commit .env files to version control. Always use your hosting platform’s environment variable configuration.

Your production environment needs these variables:

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

Environment variable handling

Vite exposes environment variables prefixed with VITE_ to your client-side code:

src/shared/constants/supabase.ts

export const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL as string
export const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY as string

The VITE_ prefix is required. Without it, variables won’t be available in your application.

Deployment platforms

Vercel

Vercel offers excellent Vite support with zero configuration.

Install Vercel CLI (optional)

npm install -g vercel

Connect your repository

Go to vercel.com
Click Add New Project
Import your Goalst repository

Configure build settings

Vercel auto-detects Vite projects. Verify these settings:

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

Add environment variables

In your Vercel project settings:

Go to Settings > Environment Variables
Add VITE_SUPABASE_URL
Add VITE_SUPABASE_ANON_KEY
Make sure they’re available for Production, Preview, and Development

Deploy

Click Deploy. Vercel will build and deploy your application.

Netlify

Netlify provides simple drag-and-drop deployment or Git integration.

Connect your repository

Go to netlify.com
Click Add new site > Import an existing project
Connect your Git provider and select your repository

Configure build settings

Set these values:

Build command: npm run build
Publish directory: dist

Add environment variables

In Site settings > Environment variables:

Add VITE_SUPABASE_URL
Add VITE_SUPABASE_ANON_KEY

Configure redirects (important)

Create a public/_redirects file for SPA routing:

public/_redirects

/*    /index.html   200

This ensures React Router works correctly.

Deploy

Click Deploy site. Netlify will build and publish your app.

Cloudflare Pages

Cloudflare Pages offers fast global CDN deployment.

Connect your repository

Go to pages.cloudflare.com
Click Create a project
Connect your Git account and select your repository

Configure build settings

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

Add environment variables

In the build configuration:

Add VITE_SUPABASE_URL
Add VITE_SUPABASE_ANON_KEY

Configure SPA routing

Create a public/_redirects file:

public/_redirects

/*    /index.html   200

Deploy

Save and deploy. Cloudflare will build and distribute your app globally.

Docker deployment

For containerized deployments, use this Dockerfile:

Dockerfile

# Build stage
FROM node:18-alpine AS builder

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
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;"]

And an nginx.conf for SPA routing:

nginx.conf

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

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

    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Build the Docker image

docker build -t goalst .

Run the container

docker run -p 80:80 goalst

Access your app

Navigate to http://localhost in your browser.

Environment variables must be set at build time for Vite apps. Consider using runtime configuration for dynamic environments.

Supabase configuration for production

Update allowed URLs

In your Supabase dashboard:

Add your production URL

Go to Settings > Authentication > URL Configuration

Update Site URL

Set your production domain (e.g., https://goalst.com)

Add Redirect URLs

Add allowed callback URLs for authentication:

https://goalst.com/**
https://www.goalst.com/**

Verify CORS settings

Ensure your domain is allowed in Supabase’s CORS settings:

Go to Settings > API
Verify your domain is listed or * is enabled (not recommended for production)

Performance optimization

Build optimizations

Vite automatically applies these optimizations:

Code splitting: Splits code into smaller chunks
Tree shaking: Removes unused code
Minification: Reduces bundle size
Asset optimization: Compresses images and fonts

Additional tips

Enable compression

Enable Gzip or Brotli compression on your hosting platform for smaller transfer sizes.

Use a CDN

Serve static assets from a CDN to reduce latency.

Lazy load routes

Use React lazy loading for route-level code splitting.

Monitor bundle size

Use vite-bundle-visualizer to analyze your bundle and identify large dependencies.

Custom domain setup

Most hosting platforms offer custom domain configuration:

Add your domain

In your hosting platform’s settings, add your custom domain.

Update DNS records

Add the required DNS records (usually A or CNAME records) provided by your host.

Enable HTTPS

Most platforms auto-provision SSL certificates via Let’s Encrypt.

Update Supabase

Don’t forget to add your custom domain to Supabase’s allowed URLs.

Continuous deployment

Most platforms support automatic deployments:

Push to main branch → Deploys to production
Push to feature branch → Creates preview deployment
Open pull request → Generates preview URL

Configure branch settings in your hosting platform’s Git integration.

Monitoring and debugging

Production error tracking

Consider integrating error tracking:

Sentry - Application monitoring
LogRocket - Session replay
Datadog - Full-stack monitoring

Health checks

Verify your deployment:

Authentication works

Test signing up, signing in, and signing out with a new account.

Routing functions

Navigate to different pages and refresh to ensure routes work.

Data loads correctly

Verify data fetching from Supabase works as expected.

No console errors

Open browser DevTools and check for errors or warnings.

Troubleshooting

Build fails

Check TypeScript errors: npm run build locally
Verify all dependencies are installed
Ensure Node.js version matches (18+)

Environment variables not working

Verify variables start with VITE_
Rebuild after adding new variables
Check they’re set in the hosting platform

Routes return 404

Add SPA redirect rules (_redirects or nginx config)
Verify output directory is set to dist

Supabase connection fails

Check production URLs are added to Supabase
Verify environment variables are correct
Test connection locally with production credentials

Next steps

API Reference

Explore the Goalst API documentation

Authentication

Learn about authentication setup

Get Started

Core Features

Guides

Prerequisites

Build process

Understanding the build command

Local build test

Environment variables

Environment variable handling

Deployment platforms

Vercel

Netlify

Cloudflare Pages

Docker deployment

Supabase configuration for production

Update allowed URLs

Verify CORS settings

Performance optimization

Build optimizations

Additional tips

Enable compression

Use a CDN

Lazy load routes

Monitor bundle size

Custom domain setup

Continuous deployment

Monitoring and debugging

Production error tracking

Health checks

Troubleshooting

Build fails

Environment variables not working

Routes return 404

Supabase connection fails

Next steps

API Reference

Authentication

Build docs developers (and LLMs) love

Get Started

Core Features

Guides

​Prerequisites

​Build process

​Understanding the build command

​Local build test

​Environment variables

​Environment variable handling

​Deployment platforms

​Vercel

​Netlify

​Cloudflare Pages

​Docker deployment

​Supabase configuration for production

​Update allowed URLs

​Verify CORS settings

​Performance optimization

​Build optimizations

​Additional tips

Enable compression

Use a CDN

Lazy load routes

Monitor bundle size

​Custom domain setup

​Continuous deployment

​Monitoring and debugging

​Production error tracking

​Health checks

​Troubleshooting

​Build fails

​Environment variables not working

​Routes return 404

​Supabase connection fails

​Next steps

API Reference

Authentication

Build docs developers (and LLMs) love

Prerequisites

Build process

Understanding the build command

Local build test

Environment variables

Environment variable handling

Deployment platforms

Vercel

Netlify

Cloudflare Pages

Docker deployment

Supabase configuration for production

Update allowed URLs

Verify CORS settings

Performance optimization

Build optimizations

Additional tips

Custom domain setup

Continuous deployment

Monitoring and debugging

Production error tracking

Health checks

Troubleshooting

Build fails

Environment variables not working

Routes return 404

Supabase connection fails

Next steps