Overview
First-class Vite 7+, Inertia.js, Server-Rendered Islands, and End-to-End Type Generation for Litestar.
Litestar Vite bridges Litestar (Python ASGI) and Vite 7+ into a unified full-stack runtime. During development, your browser connects solely to Litestar (:8000) while the single-port proxy streams frontend modules and hot-reload WebSocket updates from a managed Vite process. In production, the asset loader serves hashed, immutable bundles directly from the Vite manifest.
Choose Your Operating Mode¶
Litestar Vite adapts to your frontend architecture through a single mode setting on ViteConfig:
-
Single-Page Application
Litestar serves your JSON and OpenAPI routes while transforming
index.htmlwith Vite asset tags for React, Vue, Svelte, or Angular SPAs. -
Inertia.js Hybrid
Build React, Vue, or Svelte single-page applications without maintaining a separate client API layer. Return Python models directly as typed page props.
-
Jinja2 & Islands
Render server-side Jinja2 templates enhanced with Vite HMR, interactive island hydration, and server component fragments for HTMX swaps.
-
Meta-Frameworks
Run Astro, Nuxt, or SvelteKit behind Litestar's reverse proxy with automatic OpenAPI SDK, route helper, and AsyncAPI channel generation.
Installation and Setup¶
Install the Python and Vite Packages¶
Install the paired Vite 7+ plugin in your frontend workspace:
Register the Plugin on Your Litestar App¶
"""Single-Page Application (SPA) quick-start example with Litestar and Vite."""
from __future__ import annotations
from pathlib import Path
from litestar import Litestar, get
from msgspec import Struct
from litestar_vite import PathConfig, RuntimeConfig, TypeGenConfig, ViteConfig, VitePlugin
class SummaryStats(Struct, frozen=True, gc=False):
"""Dashboard summary payload returned by the JSON API."""
active_users: int
requests_per_second: float
region: str
@get("/api/summary", sync_to_thread=False)
def get_summary() -> SummaryStats:
"""Return typed summary metrics for the SPA frontend."""
return SummaryStats(active_users=128, requests_per_second=412.5, region="us-east-1")
def create_app() -> Litestar:
"""Create a Litestar application configured for SPA mode."""
vite_config = ViteConfig(
mode="spa",
dev_mode=True,
paths=PathConfig(root=Path(), resource_dir=Path("src"), bundle_dir=Path("public/build")),
runtime=RuntimeConfig(start_dev_server=False),
types=TypeGenConfig(generate_sdk=True, generate_routes=True),
)
return Litestar(route_handlers=[get_summary], plugins=[VitePlugin(config=vite_config)])
def main() -> None:
"""Verify the SPA example application constructs cleanly."""
app = create_app()
plugin = app.plugins.get(VitePlugin)
assert plugin.config.mode == "spa"
assert SummaryStats(active_users=128, requests_per_second=412.5, region="us-east-1").active_users == 128
__all__ = ("SummaryStats", "create_app", "get_summary", "main")
Scaffold and Run on a Single Port¶
$ litestar assets init --template react
✓ Created vite.config.ts, package.json, tsconfig.json
$ litestar assets install
✓ Frontend dependencies installed
$ litestar run --reload
INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO: Vite dev server started on http://127.0.0.1:5173 (proxied via :8000)
When litestar run --reload starts:
VitePluginwrites.litestar.json(the configuration bridge read by the Vite plugin) and exports OpenAPI and route schemas when type generation is enabled.VitePluginspawns the Vite dev server and reads its bound address from thehotfile in your bundle directory.- Every browser request hits
http://127.0.0.1:8000— Python API routes execute in Litestar, while Vite asset and HMR WebSocket traffic streams transparently through the single-port proxy.
Explore the Documentation¶
| Section | What You Will Learn |
|---|---|
| Getting Started | Installation, CLI scaffolding (litestar assets init), and end-to-end walkthroughs for SPA, Inertia.js, and Jinja2 + Islands |
| Core Concepts | The four operating modes, layered ViteConfig sub-configs, build-time Static Props, Islands & HTMX fragments, Dev/Prod SSR, and production CDN deployment |
| Frameworks & Inertia | Deep dive into Inertia.js (defer, merge, once, shared props, Precognition), React/Vue/Svelte setup, and Astro/Nuxt/SvelteKit integration |
| TypeGen & Realtime | Zero-drift OpenAPI SDK generation (@hey-api/openapi-ts), type-safe route() / toRoute() URL builders, and AsyncAPI WebSocket channel typing |
| Architecture | Interactive animated SVG/CSS diagrams of the Single-Port AnyIO Proxy, Operating Modes, Inertia.js Lifecycle, SSR IPC, and TypeGen Pipeline |
| Reference | Complete Python API (litestar_vite), TypeScript 18-subpath API (litestar-vite-plugin), litestar assets CLI reference, and wire contracts |