BizFirst Deployment Models V2
Chapter 1 Concepts

Independent App Server

Deep dive: the React app is deployed to its own domain, CDN, or container — a different origin than the API — so it must be told the API's full absolute URL, and the API must explicitly allow requests from the frontend's origin.

What "Different Origin" Means

In an independent deployment, the React app might be served from https://app.example.com (a static host or CDN) while the API lives at https://api.example.com. These are two different origins as far as the browser is concerned — even though they're logically "the same product," the browser has no way to know that, and applies its normal cross-origin rules.

Two things become mandatory that were automatic in the inline model:

  1. The frontend must be told the API's full absolute URL. A relative path like /api/v1/... would resolve against the frontend's own origin (app.example.com) — which has no API behind it — so VITE_API_BASE_URL must be set to something like https://api.example.com.
  2. The API must allow the frontend's origin via CORS. Without an explicit Access-Control-Allow-Origin response (typically configured via ASP.NET Core's CORS middleware, naming https://app.example.com as an allowed origin), the browser will block the frontend's JavaScript from reading the API's responses, even if the request itself reaches the server.

The Diagram

graph TD Browser["Browser
https://app.example.com"] -->|"fetch('https://api.example.com/api/v1/...')
absolute URL, cross-origin"| API["Flow API
https://api.example.com"] API -.->|"CORS preflight check:
is app.example.com allowed?"| CORS{"CORS policy"} CORS -->|"origin allowed"| API Browser -->|"GET static assets"| CDN["CDN / static host
https://app.example.com"]

Cross-origin requests require both an absolute URL on the frontend and an explicit CORS allowance on the API.

Configuration Checklist for Independent Deployment

Set VITE_API_BASE_URL

An absolute URL, e.g. VITE_API_BASE_URL=https://api.example.com. The shared calculateApiUrl() helper passes absolute http(s):// values through unchanged — see Chapter 2.4.

Configure CORS on the API

The API needs the frontend's exact origin in its allowed-origins list. Missing this produces the classic "CORS error" in the browser console — covered in Chapter 3.2.

One .env file per environment

Since the API host is different in dev, staging, and production, each environment typically needs its own .env.* file with its own VITE_API_BASE_URL — and a separate build per target.

Remember: still build-time

Everything on this page is still subject to the build-time rule from Chapter 1.3 — changing VITE_API_BASE_URL requires a rebuild, it is not re-read at runtime.