Package: litestar-vite
Litestar Vite[!IMPORTANT]
This plugin currently contains minimal features and is a work-in-progressInstallationpipinstalllitestar-viteUsageHere is a basic application that demonstrates how to use the plugin.from__future__importannotationsfrompathlibimportPathfromlitestarimportController,get,Litestarfromlitestar.responseimportTemplatefromlitestar.status_codesimportHTTP_200_OKfromlitestar_viteimportViteConfig,VitePluginclassWebController(Controller):opt={"exclude_from_auth":True}include_in_schema=False@get(["/","/{path:str}"],status_code=HTTP_200_OK)asyncdefindex(self)->Template:returnTemplate(template_name="index.html.j2")vite=VitePlugin(config=ViteConfig(bundle_dir=Path("./public"),resource_dir=Path("./resources"),template_dir=Path("./templates"),# Should be False when in productiondev_mode=True,hot_reload=True,# Websocket HMR asset reloading is enabled when true.),)app=Litestar(plugins=[vite],route_handlers=[WebController])Create a template to serve the application in./templates/index.html.h2:<!DOCTYPE html><html><head><metacharset="utf-8"/><!--IE compatibility--><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/></head><body><divid="app"></div>{{ vite_hmr() }} {{ vite('resources/main.ts') }}</body></html>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:❯litestarassetsinit
UsingLitestarappfromapp:app
InitializingVite──────────────────────────────────────────────────────────────────────────────────────────
DoyouintendtouseLitestarwithanySSRframework?[y/n]:n
INFO-2023-12-1112:33:41,455-root-commands-Writingvite.config.ts
INFO-2023-12-1112:33:41,456-root-commands-Writingpackage.json
INFO-2023-12-1112:33:41,456-root-commands-Writingtsconfig.jsonInstall Javascript/Typescript PackagesInstall the packages required for development:NoteThis is equivalent to the thenpm installby default. This command is configurable.❯litestarassetsinstall
UsingLitestarappfromapp:app
StartingVitepackageinstallationprocess──────────────────────────────────────────────────────────────────────────────────────────

added25packages,andaudited26packagesin1s5packagesarelookingforfundingrun`npmfund`fordetails


found0vulnerabilitiesDevelopmentTo automatically start and stop the Vite instance with the Litestar application, you can enable theuse_server_lifespanhooks in theViteConfig.Alternately, to start the development server manually, you can run the following❯litestarassetsserve
UsingLitestarappfromapp:app
StartingVitebuildprocess───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

>build
>vitebuild


vitev5.0.7buildingforproduction...

✓0modulestransformed.NoteThis is equivalent to the thenpm run devcommand whenhot_reloadis enabled. Otherwise it is equivalent tonpm run build -- --watch. This command is configurable.Building for Production❯litestarassetsbuild
UsingLitestarappfromapp:app
StartingVitebuildprocess───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

>build
>vitebuild


vitev5.0.7buildingforproduction...

✓0modulestransformed.