What frontend modes are supported?

The skill supports various modes including SPA (single-page apps), template (SSR), HTMX, hybrid (Inertia), framework (SSR/SSG), and external.

Why should I use the Litestar CLI instead of npm run dev?

Using the Litestar CLI via 'litestar assets serve' ensures that the environment variables and configuration bridge are correctly initialized before the dev server starts.

How does this skill sync Python and Vite configurations?

It uses a .litestar.json bridge file where the Python ViteConfig serves as the primary source of truth, which the Vite JS plugin then reads to set its defaults.

Does it support HTMX projects?

Yes, there is a dedicated htmx mode specifically designed for integrating Vite-managed assets with HTMX partials and server-rendered HTML.

Can it help resolve proxying errors?

Yes, it provides specific guidance for choosing between 'vite', 'proxy', and 'direct' proxy modes to ensure the frontend assets and backend routes communicate correctly.

Litestar Vite Integration

Name: Litestar Vite Integration
Author: litestar-org

bylitestar-org

•

API Development

Streamlines the synchronization of Litestar Python backends with Vite frontend assets and development workflows.

This skill facilitates the robust integration of Litestar and Vite, providing structured guidance on shared configuration through a .litestar.json bridge. It ensures your Python backend and TypeScript frontend remain perfectly aligned across various project architectures—from modern SPAs and HTMX applications to server-side rendered templates. By treating the Python config as the source of truth, it automates the complex setup of asset manifests, hot-module replacement (HMR), and proxying strategies, making it indispensable for full-stack Python developers.

Key Features

01Support for multiple modes including SPA, HTMX, Template, and Hybrid

02Optimized handling of Hot Module Replacement (HMR) across dual-port setups

03Automated .litestar.json bridge for Python-to-Vite config synchronization

04Built-in diagnostic support for asset paths and manifest verification

0528 GitHub stars

06Comprehensive proxy management for seamless local development servers

Use Cases

01Wiring a React or Vue frontend to a Litestar backend with HMR support

02Debugging proxy and asset path misconfigurations in a full-stack environment

03Configuring Vite-managed assets for server-side rendered templates in Python

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add litestar-org/litestar-vite litestar-vite-integration

For use in Claude.ai and ChatGPT

Download Skill