Deployment

This guide covers deploying the Bookmarks application to production using popular hosting platforms. The application is built with Vite and React, making it compatible with most static hosting services.

Prerequisites

Complete Supabase Setup

Ensure your Supabase project is fully configured:

Database schema created
Authentication providers enabled
Edge Functions deployed

See the Supabase Setup Guide for details.

Prepare Environment Variables

Have all required environment variables ready:

VITE_SUPABASE_URL
VITE_SUPABASE_ANON_KEY
VITE_SUPABASE_EF_ANON_KEY
VITE_SUPABASE_META_URL
VITE_SUPABASE_GENERATE_TAGS_URL

See Environment Variables Guide for details.

Test Locally

Verify everything works in development:

npm run dev

Test authentication, creating bookmarks, and tag generation.

Build Configuration

The application uses Vite for building. The build configuration is defined in /vite.config.ts:1-8:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.md']
})

Build Command

npm run build

This command (tsc && vite build from /package.json:8):

Runs TypeScript compiler to check types
Builds optimized production assets to dist/ directory

The build output is a static site in the dist/ directory that can be deployed to any static hosting service.

Deployment Options

Vercel
Netlify
Other Platforms

Deploy to Vercel

Vercel offers the best developer experience with zero-config deployments.

Install Vercel CLI

npm install -g vercel

vercel login

Deploy

From your project directory:

vercel

Follow the prompts:

Set up and deploy: Yes
Which scope: Select your account
Link to existing project: No
Project name: bookmarks (or your preferred name)
Directory: **./
Override settings: No

Add Environment Variables

Via Vercel Dashboard:

Go to your project settings
Navigate to Settings > Environment Variables
Add each variable:

VITE_SUPABASE_URL=https://xxxxxxxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_SUPABASE_EF_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_SUPABASE_META_URL=https://xxxxxxxxxxxxx.supabase.co/functions/v1/get-metadata
VITE_SUPABASE_GENERATE_TAGS_URL=https://xxxxxxxxxxxxx.supabase.co/functions/v1/generate-tags

Or via CLI:

vercel env add VITE_SUPABASE_URL
vercel env add VITE_SUPABASE_ANON_KEY
vercel env add VITE_SUPABASE_EF_ANON_KEY
vercel env add VITE_SUPABASE_META_URL
vercel env add VITE_SUPABASE_GENERATE_TAGS_URL

Deploy to Production

vercel --prod

Your application will be deployed to https://your-project.vercel.app

Automatic Deployments

Connect your Git repository for automatic deployments:

Go to vercel.com/new
Import your Git repository
Configure project settings:
- Framework Preset: Vite
- Build Command: npm run build
- Output Directory: dist
Add environment variables
Click Deploy

Every push to your main branch will trigger a new production deployment. Pull requests create preview deployments.

Deploy to Netlify

Netlify provides seamless deployments with excellent performance.

Install Netlify CLI

npm install -g netlify-cli

netlify login

Initialize Site

netlify init

Follow the prompts:

Create & configure a new site
Team: Select your team
Site name: bookmarks (or preferred name)
Build command: npm run build
Directory to deploy: dist

Add Environment Variables

Via Netlify Dashboard:

Go to Site settings > Environment variables
Click Add a variable
Add each variable:

VITE_SUPABASE_URL=https://xxxxxxxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_SUPABASE_EF_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_SUPABASE_META_URL=https://xxxxxxxxxxxxx.supabase.co/functions/v1/get-metadata
VITE_SUPABASE_GENERATE_TAGS_URL=https://xxxxxxxxxxxxx.supabase.co/functions/v1/generate-tags

Or via CLI:

netlify env:set VITE_SUPABASE_URL "your-value"
netlify env:set VITE_SUPABASE_ANON_KEY "your-value"
netlify env:set VITE_SUPABASE_EF_ANON_KEY "your-value"
netlify env:set VITE_SUPABASE_META_URL "your-value"
netlify env:set VITE_SUPABASE_GENERATE_TAGS_URL "your-value"

Deploy

netlify deploy --prod

Your site will be deployed to https://your-site.netlify.app

Automatic Deployments

Connect your Git repository:

Go to app.netlify.com
Click Add new site > Import an existing project
Connect to Git provider (GitHub, GitLab, etc.)
Select your repository
Configure build settings:
- Base directory: (leave empty)
- Build command: npm run build
- Publish directory: dist
Add environment variables in Site settings
Click Deploy site

Every push to your main branch triggers a production deployment. Branch deployments create deploy previews.

Other Deployment Options

The Bookmarks app can be deployed to any static hosting service:

Cloudflare Pages

Build command: npm run buildOutput directory: dist

GitHub Pages

Use gh-pages package to deploy the dist/ folder

AWS Amplify

Connect repository and configure build settings

Railway

Deploy with zero configuration from Git

Generic Static Hosting

For any static hosting service:

Build the application:
```
npm run build
```
Upload the contents of the dist/ directory
Configure environment variables according to your platform
Set up redirects for SPA routing (if needed):
```
/*    /index.html   200
```

Post-Deployment Configuration

Update Supabase Redirect URLs

Add your production domain to Supabase:

Go to Supabase Dashboard > Authentication > URL Configuration

Add your production URL to Redirect URLs:

https://your-domain.vercel.app
https://your-domain.netlify.app
https://yourdomain.com

Update Site URL to your production domain

Configure OAuth Providers

Update OAuth app redirect URIs:For each OAuth provider (Google, GitHub, etc.):

Go to the provider’s developer console

Add your production callback URL:

https://your-project.supabase.co/auth/v1/callback

Test Production Deployment

Verify all features work in production:

Authentication

Test OAuth login with each provider
Test magic link email authentication
Verify redirect URLs work correctly

Bookmarks

Add a new bookmark
Verify metadata is fetched correctly
Test tag generation
Test updating and deleting bookmarks

Performance

Check page load times
Verify images load properly
Test on mobile devices

Custom Domain Setup

Vercel
Netlify

Add Domain

Go to Project Settings > Domains
Enter your custom domain
Click Add

Configure DNS

Add DNS records at your domain provider:For root domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

For www subdomain:

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

Verify Domain

Vercel will automatically verify and provision SSL certificates.

Add Domain

Go to Site settings > Domain management
Click Add custom domain
Enter your domain and click Verify

Configure DNS

Option 1: Use Netlify DNS (Recommended)Point your nameservers to Netlify:

dns1.p01.nsone.net
dns2.p01.nsone.net
dns3.p01.nsone.net
dns4.p01.nsone.net

Option 2: External DNSAdd DNS records:

Type: A
Name: @
Value: [Netlify Load Balancer IP]

Type: CNAME
Name: www
Value: [your-site].netlify.app

Enable HTTPS

Netlify automatically provisions Let’s Encrypt SSL certificates.

Performance Optimization

Enable Compression

Most platforms enable gzip/brotli compression by default. Verify in network tab:

Response headers should include Content-Encoding: br or gzip

Configure Caching

Optimize cache headers for static assets:Vercel: Create vercel.json:

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Netlify: Create netlify.toml:

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Enable Analytics

The application includes Vercel Analytics (@vercel/analytics in /package.json:15).To use it, import in your main app file:

import { Analytics } from '@vercel/analytics/react'

function App() {
  return (
    <>
      {/* Your app */}
      <Analytics />
    </>
  )
}

Monitoring and Debugging

Check Build Logs

Review deployment logs for any build errors or warnings.

Monitor Supabase

Use Supabase Dashboard to monitor:

API request volume
Database performance
Auth events
Edge Function logs

Set Up Error Tracking

Consider integrating error tracking:

Sentry
LogRocket
Rollbar

Troubleshooting

Build fails with type errors

Solution:

Run npm run build locally to reproduce the error
Fix TypeScript errors in your code
Ensure all dependencies are installed

Environment variables not working

Solution:

Verify variables are prefixed with VITE_
Check that variables are set for the production environment
Redeploy after adding variables

OAuth redirect fails

Solution:

Verify production domain is added to Supabase redirect URLs
Check OAuth app configuration includes production callback URL
Ensure HTTPS is enabled on your custom domain

White screen after deployment

Solution:

Check browser console for errors
Verify all environment variables are set
Check that assets are loading (network tab)
Review build logs for missing files

Edge Functions not working

Solution:

Verify Edge Function URLs in environment variables
Check that functions are deployed in Supabase
Review Edge Function logs for errors
Test function endpoints directly with curl/Postman

Continuous Deployment

Both Vercel and Netlify support automatic deployments from Git:

Development Workflow

Create a feature branch
Make changes and commit
Push to GitHub/GitLab
Platform creates a preview deployment
Review changes on preview URL

Merge to Production

Open pull request
Review preview deployment
Merge to main branch
Automatic production deployment

Always test on preview deployments before merging to production!

Next Steps

Monitor Performance

Set up analytics and error tracking

Custom Domain

Configure your custom domain and SSL

Optimize Assets

Configure caching and compression

Set Up CI/CD

Automate testing and deployment

Get Started

Core Features

Guides

Prerequisites

Build Configuration

Build Command

Deployment Options

Deploy to Vercel

Automatic Deployments

Deploy to Netlify

Automatic Deployments

Other Deployment Options

Cloudflare Pages

GitHub Pages

AWS Amplify

Railway

Generic Static Hosting

Post-Deployment Configuration

Custom Domain Setup

Performance Optimization

Monitoring and Debugging

Troubleshooting

Continuous Deployment

Next Steps

Monitor Performance

Custom Domain

Optimize Assets

Set Up CI/CD

Build docs developers (and LLMs) love

Get Started

Core Features

Guides

​Prerequisites

​Build Configuration

​Build Command

​Deployment Options

​Deploy to Vercel

​Automatic Deployments

​Deploy to Netlify

​Automatic Deployments

​Other Deployment Options

Cloudflare Pages

GitHub Pages

AWS Amplify

Railway

​Generic Static Hosting

​Post-Deployment Configuration

​Custom Domain Setup

​Performance Optimization

​Monitoring and Debugging

​Troubleshooting

​Continuous Deployment

​Next Steps

Monitor Performance

Custom Domain

Optimize Assets

Set Up CI/CD

Build docs developers (and LLMs) love

Prerequisites

Build Configuration

Build Command

Deployment Options

Deploy to Vercel

Automatic Deployments

Deploy to Netlify

Automatic Deployments

Other Deployment Options

Generic Static Hosting

Post-Deployment Configuration

Custom Domain Setup

Performance Optimization

Monitoring and Debugging

Troubleshooting

Continuous Deployment

Next Steps