Deployment Types of React Apps
Every React deployment in this ecosystem is either Inline (same origin as its API) or Independent (its own origin, separate from the API). This page compares the two; the next two pages go deep on each.
The Core Distinction: Origin
A browser's origin is the combination of scheme, host, and port
(https://qa.grippingly.com is one origin; https://api.example.com is a
different one, even if they're related products). Whether the React app shares an origin with its API
determines almost everything else about how it must be configured:
Inline
The React app's static files are served
by the same origin/process as the API (typically the API server itself serves the
dist/ folder, or a reverse proxy puts both behind one hostname). Same origin means
relative paths just work.
Independent
The React app is deployed to its own host, CDN, or container — a different origin than the API. It must be told the API's full absolute URL, and the API must explicitly permit cross-origin requests from the frontend's origin.
Comparison
| Aspect | Inline | Independent |
|---|---|---|
| Origin relative to API | Same origin | Different origin |
VITE_API_BASE_URL |
Can be left empty (or a relative path like /api) |
Must be a full absolute URL, e.g. https://api.example.com |
| CORS configuration needed on the API? | No — same-origin requests aren't cross-origin | Yes — API must allow the frontend's origin |
| Rebuild required per target domain? | No — one build works on any same-origin host, resolved live via window.location.origin |
Usually yes — different .env per environment since the API host differs |
| Typical use case | Frontend and API ship as one deployable unit | Frontend on a CDN, API scaled/hosted independently |
The Diagram
relative /api/*"| S1["qa.grippingly.com
(serves React + API)"] end subgraph Independent["Independent Deployment"] direction LR U2["Browser"] -->|"cross-origin
absolute URL"| S2["api.example.com"] U2 -->|"loads static files"| C2["cdn.example.com"] end
Inline: one origin serves everything. Independent: the frontend's origin and the API's origin are different hosts entirely.
Going Deeper
The next two pages each take one of these models and go deep: what the browser actually does when resolving requests, what the API needs configured, and what changes (or doesn't) per environment.