Deployment Overview

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:

Frontend (Vercel): TanStack Start SPA serving the React UI
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:

Variable	Scope	Purpose	Example
`PORT`	Backend only	API server listening port	`8081`
`FRONTEND_PORT`	Dev only	Vite dev server port	`5173`
`VITE_API_URL`	Client-exposed	Backend URL for browser requests	`https://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

Deploy Backend First

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

Configure Frontend

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

Deploy Frontend

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

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

Get Started

Core Features

Deployment

Deployment Overview

Architecture Overview

Why Split Deployment?

Frontend on Vercel

Backend on VPS

Communication Protocol

Port Configuration

Deployment Workflow

Environment Variables by Deployment Target

Frontend (Vercel)

Backend (VPS)

Next Steps

Deploy Frontend

Deploy Backend

Database Setup

​Architecture Overview

​Why Split Deployment?

​Frontend on Vercel

​Backend on VPS

​Communication Protocol

​Port Configuration

​Deployment Workflow

​Environment Variables by Deployment Target

​Frontend (Vercel)

​Backend (VPS)

​Next Steps

Deploy Frontend

Deploy Backend

Database Setup

Architecture Overview

Why Split Deployment?

Frontend on Vercel

Backend on VPS

Communication Protocol

Port Configuration

Deployment Workflow

Environment Variables by Deployment Target

Frontend (Vercel)

Backend (VPS)

Next Steps