skills.rest
renjianguo666
renjianguo666COMMUNITY
Explore all skills by this author →
GitHub

litestar-vite

Integrates Vite frontend builds with Litestar backends across SPA, template, Inertia, SSR, and SSG modes.

Updated Aug 17, 2026
Search Tags:#vite#spa#inertia#type generation#frontend integration#hmr#litestar
One-click install
npx skills add https://github.com/renjianguo666/litecms --skill litestar-vite-renjianguo666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: litestar-vite
Source: https://github.com/renjianguo666/litecms/tree/main/.agents/skills/litestar-vite
Command: npx skills add https://github.com/renjianguo666/litecms --skill litestar-vite-renjianguo666

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires litestar-vite, litestar-vite-plugin, vite, and includes references (resource) components.

What problem does it solve? Wiring a Vite frontend to a Litestar backend requires coordinating dev-server proxying, HMR, manifest-based asset resolution, and type generation across two coupled config files, and any mismatch silently breaks HMR or production asset URLs. ## Core Features & Use Cases - Mode-based integration: Configure SPA, template, HTMX, Inertia hybrid, SSR, SSG, or external modes with a single ViteConfig and matching vite.config.ts contract. - HMR and asset helpers: Use Jinja helpers like vite(), vite_hmr(), and vite_static() to resolve dev-server URLs in development and hashed manifest assets in production. - End-to-end type generation: Generate routes.ts, schemas.ts, SDK clients, and Inertia page props from Litestar OpenAPI via TypeGenConfig and the litestar assets CLI. - Use Case: Build a React + TanStack Router SPA served by a Litestar JSON API, with hot module replacement in dev, hashed bundles plus manifest.json in production, and typed route/schema imports shared between backend and frontend. ## Quick Start Ask the AI to scaffold a Litestar app with VitePlugin in SPA mode, a matching vite.config.ts using litestar-vite-plugin, and type generation enabled.

Frequently Asked Questions about litestar-vite

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect a Vite frontend to a Litestar backend?▼

Install litestar-vite on the Python side and litestar-vite-plugin from npm, then create a ViteConfig with matching bundle_dir, hot_file, and resource_dir values in both configs. Register VitePlugin on the Litestar app and add the litestar() plugin in vite.config.ts.

How do I enable HMR between Litestar and Vite?▼

Set dev_mode=True and keep RuntimeConfig.start_dev_server=True so litestar run launches the Vite dev server. Pin the same port in both configs, set server.cors: true in vite.config.ts, and include vite_hmr() before vite() in your base template.

Which mode should I use for React, HTMX, Inertia, or Astro?▼

Use spa mode for React, Vue, or Svelte SPAs; template mode with HTMXPlugin for HTMX apps; hybrid mode with InertiaConfig for Inertia; ssg mode with the litestar-vite-plugin/astro import for Astro; and ssr mode for Nuxt or SvelteKit.

Why is HMR not working in my Litestar Vite app?▼

The most common cause is a hot file path mismatch between ViteConfig.paths.hot_file and the vite.config.ts hotFile option. Also verify Vite is actually running, ports are pinned and identical, and CORS is enabled on the dev server.

How do I generate TypeScript types from Litestar OpenAPI?▼

Add TypeGenConfig to your ViteConfig with generate_routes, generate_schemas, and generate_sdk enabled, then run litestar assets generate-types. This emits routes.ts, schemas.ts, and an SDK client that the frontend imports for typed API access.

Can I use litestar-vite with Webpack, Rollup, or Parcel?▼

No, litestar-vite integrates specifically with Vite's dev server protocol and manifest format. Projects built on Webpack, Rollup, Parcel, or esbuild directly are not supported and need a different integration approach.

Related Skills

Explore More Software Engineering Skills→
litestar-orglitestar-org
13

litestar-dto-openapi

Configure Litestar DTOs and validate OpenAPI schemas for REST APIs.

Official
Intermediate
celeroncoderceleroncoder

tigris-static-assets

Deploy static assets to Tigris object storage with cache headers and framework CDN configuration.

Community
Intermediate
XeXe
732

templ-htmx

Build hypermedia-driven interactive UIs in Go using templ components and HTMX attributes.

Community
Intermediate
LeandelosantosLeandelosantos

senior-devops

Deploy Express/Sequelize and Vite/React projects to Vercel with shared Neon and JWT configuration.

Community
Advanced