Skip to main content
The Autonome frontend is a TanStack Start application that deploys seamlessly to Vercel. This guide covers the deployment process and configuration.

​
Prerequisites

  • A Vercel account (free tier works)
  • Git repository containing your Autonome codebase
  • Backend API already deployed and accessible

​
Deployment Configuration

​
vercel.json

The project includes a vercel.json configuration file:
vercel.json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "bun run build",
  "installCommand": "bun install",
  "framework": null
}
Vercel will automatically use Bun as the package manager and runtime based on this configuration. No additional setup is required.

​
Environment Variables

Configure these environment variables in your Vercel project settings:

​
Required Variables

# Backend API URL (must match your deployed backend)
VITE_API_URL=https://api.autonome.app

​
Optional Variables

# Custom application title
VITE_APP_TITLE="Autonome Trading Platform"
All client-exposed variables must be prefixed with VITE_. This is enforced by Vite and T3 Env validation. Variables without this prefix will not be accessible in the browser.

​
Deployment Steps

1

Connect Repository

  1. Go to vercel.com and sign in
  2. Click “Add New Project”
  3. Import your Git repository (GitHub, GitLab, or Bitbucket)
2

Configure Build Settings

Vercel will auto-detect the settings from vercel.json:
  • Framework Preset: None (TanStack Start uses custom Vite config)
  • Build Command: bun run build
  • Install Command: bun install
  • Output Directory: .output/public (auto-detected)
3

Set Environment Variables

In the Vercel project settings:
  1. Go to Settings → Environment Variables
  2. Add VITE_API_URL with your backend URL
  3. Add any optional variables like VITE_APP_TITLE
  4. Save changes
4

Deploy

Click Deploy. Vercel will:
  1. Install dependencies with bun install
  2. Build the project with bun run build
  3. Deploy to a global CDN
  4. Provide a production URL (e.g., autonome.vercel.app)
5

Verify Deployment

  1. Visit your deployed URL
  2. Open browser DevTools → Network tab
  3. Verify API requests go to VITE_API_URL
  4. Check that real-time data streams connect successfully

​
Build Process

The bun run build command executes:
package.json
{
  "scripts": {
    "build": "vite build"
  }
}
This produces a production-optimized static site in .output/public/ that Vercel serves via its global CDN.

​
What Gets Built

  • Static Assets: CSS, JS bundles with code splitting
  • HTML Pages: Pre-rendered for optimal SEO
  • Client Router: TanStack Router handles navigation
  • API Client: oRPC client configured to call VITE_API_URL

​
Custom Domains

To use a custom domain:
1

Add Domain

Go to Settings → Domains and add your domain (e.g., app.autonome.com)
2

Configure DNS

Vercel will provide DNS records to add:
A     @   76.76.21.21
AAAA  @   2606:4700:4700::1111
3

Update Backend CORS

Add your custom domain to the backend’s CORS_ORIGINS environment variable:
CORS_ORIGINS=https://app.autonome.com,https://autonome.vercel.app

​
Troubleshooting

​
API Requests Fail

Problem: Frontend cannot reach backend API Solutions:
  1. Verify VITE_API_URL is set correctly in Vercel environment variables
  2. Check backend CORS settings include your Vercel domain
  3. Ensure backend is running and accessible at the configured URL
  4. Check browser console for specific error messages

​
Build Failures

Problem: bun run build fails during deployment Solutions:
  1. Check Vercel build logs for specific error messages
  2. Verify all required dependencies are in package.json
  3. Test build locally: bun run build
  4. Ensure Bun version matches (Vercel uses latest stable)

​
Environment Variables Not Working

Problem: VITE_API_URL is undefined in browser Solutions:
  1. Verify variable is prefixed with VITE_
  2. Redeploy after adding environment variables
  3. Check that variable is set in Vercel dashboard
  4. Clear browser cache and hard reload

​
Preview Deployments

Vercel automatically creates preview deployments for:
  • Every Git branch
  • Every pull request
  • Every commit
Preview URLs look like: autonome-git-feature-branch.vercel.app
Preview deployments use the same environment variables as production. To test against a staging backend, create a separate Vercel project with different VITE_API_URL.

​
Performance Optimization

The frontend build includes:
  • Code Splitting: Automatic route-based chunking
  • Tree Shaking: Removes unused code
  • Minification: Compressed JS/CSS
  • CDN Caching: Static assets cached globally
Vercel’s edge network ensures sub-100ms latency worldwide.

​
Monitoring

Vercel provides built-in monitoring:
  • Analytics: Page views, unique visitors
  • Speed Insights: Core Web Vitals
  • Logs: Real-time deployment and runtime logs
Access these in the Vercel dashboard under your project.

​
Next Steps

Backend Deployment

Deploy the API server to VPS

Database Setup

Configure PostgreSQL and migrations

Build docs developers (and LLMs) love

Get started for freeTalk to us