Skip to main content
Autonome uses a split deployment architecture that separates the frontend and backend into two independently deployable units. This approach optimizes for each platform’s strengths while maintaining a clean separation of concerns.

​
Architecture Overview

The application consists of two main components:
  1. Frontend (Vercel): TanStack Start SPA serving the React UI
  2. Backend (VPS): Hono API server handling business logic, database, and AI integrations
┌─────────────────┐         HTTP/oRPC        ┌──────────────────┐
│                 │ ─────────────────────────> │                  │
│  TanStack Start │                            │   Hono API       │
│   (Vercel)      │ <───────────────────────── │   (VPS/Docker)   │
│                 │      JSON Responses        │                  │
└─────────────────┘                            └──────────────────┘
                                                         │
                                                         │
                                                         v
                                                ┌─────────────────┐
                                                │   PostgreSQL    │
                                                │    Database     │
                                                └─────────────────┘

​
Why Split Deployment?

​
Frontend on Vercel

  • Global edge deployment for low-latency UI delivery
  • Automatic HTTPS and CDN
  • Zero-config deployments from Git
  • Optimized for static assets and SSR

​
Backend on VPS

  • Full control over persistent processes (schedulers, trading bots)
  • Direct PostgreSQL connection without serverless cold starts
  • Long-running WebSocket/SSE connections for real-time data
  • Cost-effective for CPU-intensive AI operations

​
Communication Protocol

The frontend communicates with the backend via oRPC over HTTP:
  • RPC Endpoint: POST /api/rpc/* - Type-safe remote procedure calls
  • SSE Endpoints: /api/events/* - Real-time data streams (positions, trades, portfolio)
  • Health Check: /health - Server status and scheduler monitoring
In development, Vite proxies /api/* requests to the backend server automatically. In production, the frontend makes direct HTTP calls to the deployed API server.

​
Port Configuration

Three environment variables control how services communicate:
VariableScopePurposeExample
PORTBackend onlyAPI server listening port8081
FRONTEND_PORTDev onlyVite dev server port5173
VITE_API_URLClient-exposedBackend URL for browser requestshttps://api.autonome.app
VITE_API_URL must be prefixed with VITE_ to be exposed to the browser. Server-only variables like PORT and DATABASE_URL are not accessible in client code.

​
Deployment Workflow

1

Deploy Backend First

Deploy the Hono API server to your VPS with PostgreSQL access. Run migrations and verify health checks.
2

Configure Frontend

Set VITE_API_URL to point to your deployed backend (e.g., https://api.autonome.app).
3

Deploy Frontend

Push to Vercel. The frontend will automatically connect to your backend API.
4

Verify Integration

Check that the UI loads data correctly and SSE streams are connected.

​
Environment Variables by Deployment Target

​
Frontend (Vercel)

VITE_API_URL=https://api.autonome.app
VITE_APP_TITLE="Autonome Trading"

​
Backend (VPS)

PORT=8081
DATABASE_URL=postgresql://user:pass@localhost:5432/autonome
TRADING_MODE=simulated
LIGHTER_API_KEY_INDEX=2
LIGHTER_BASE_URL=https://mainnet.zklighter.elliot.ai
NIM_API_KEY=your_nim_key
OPENROUTER_API_KEY=your_openrouter_key
MISTRAL_API_KEY=your_mistral_key
CORS_ORIGINS=https://autonome.vercel.app
The backend requires many more environment variables because it handles AI integrations, database connections, and trading APIs. The frontend only needs minimal configuration.

​
Next Steps

Deploy Frontend

Deploy the TanStack Start app to Vercel

Deploy Backend

Deploy the Hono API server to your VPS

Database Setup

Configure PostgreSQL and run migrations

Build docs developers (and LLMs) love

Get started for freeTalk to us