https://github.com/litestar-org/litestar-vite
Vite Plugin for Litestar
https://github.com/litestar-org/litestar-vite
litestar litestar-api litestar-framework vite vitejs
Last synced: 6 months ago
JSON representation
Vite Plugin for Litestar
- Host: GitHub
- URL: https://github.com/litestar-org/litestar-vite
- Owner: litestar-org
- License: mit
- Created: 2023-10-04T03:39:08.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-11T15:14:57.000Z (6 months ago)
- Last Synced: 2025-04-14T06:13:22.958Z (6 months ago)
- Topics: litestar, litestar-api, litestar-framework, vite, vitejs
- Language: Python
- Homepage:
- Size: 1.99 MB
- Stars: 22
- Watchers: 2
- Forks: 7
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.rst
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Litestar Vite
## Installation
```shell
pip install litestar-vite
```
## Usage
Here is a basic application that demonstrates how to use the plugin.
```python
from __future__ import annotations
from pathlib import Path
from litestar import Controller, get, Litestar
from litestar.response import Template
from litestar.status_codes import HTTP_200_OK
from litestar.template.config import TemplateConfig
from litestar.contrib.jinja import JinjaTemplateEngine
from litestar_vite import ViteConfig, VitePlugin
class WebController(Controller):
opt = {"exclude_from_auth": True}
include_in_schema = False
@get(["/", "/{path:str}"],status_code=HTTP_200_OK)
async def index(self) -> Template:
return Template(template_name="index.html.j2")
template_config = TemplateConfig(engine=JinjaTemplateEngine(directory='templates/'))
vite = VitePlugin(config=ViteConfig())
app = Litestar(plugins=[vite], template_config=template_config, route_handlers=[WebController])
```
Create a template to serve the application in `./templates/index.html.h2`:
```html
{{ vite_hmr() }} {{ vite('resources/main.ts') }}
```
### Template initialization (Optional)
This is a command to help initialize Vite for your project. This is generally only needed a single time. You may also manually configure Vite and skip this step.
to initialize a Vite configuration:
```shell
❯ litestar assets init
Using Litestar app from app:app
Initializing Vite ──────────────────────────────────────────────────────────────────────────────────────────
Do you intend to use Litestar with any SSR framework? [y/n]: n
INFO - 2023-12-11 12:33:41,455 - root - commands - Writing vite.config.ts
INFO - 2023-12-11 12:33:41,456 - root - commands - Writing package.json
INFO - 2023-12-11 12:33:41,456 - root - commands - Writing tsconfig.json
```
### Install Javascript/Typescript Packages
Install the packages required for development:
**Note** This is equivalent to the the `npm install` by default. This command is configurable.
```shell
❯ litestar assets install
Using Litestar app from app:app
Starting Vite package installation process ──────────────────────────────────────────────────────────────────────────────────────────
added 25 packages, and audited 26 packages in 1s
5 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
```
### Development
To automatically start and stop the Vite instance with the Litestar application, you can enable the `use_server_lifespan` hooks in the `ViteConfig`.
Alternately, to start the development server manually, you can run the following
```shell
❯ litestar assets serve
Using Litestar app from app:app
Starting Vite build process ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
> build
> vite build
vite v5.0.7 building for production...
✓ 0 modules transformed.
```
**Note** This is equivalent to the the `npm run dev` command when `hot_reload` is enabled. Otherwise it is equivalent to `npm run build -- --watch`. This command is configurable.
### Building for Production
```shell
❯ litestar assets build
Using Litestar app from app:app
Starting Vite build process ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
> build
> vite build
vite v5.0.7 building for production...
✓ 0 modules transformed.
```