Rizzler creates a parallel front-end dev-server using ViteJS for ASGI Frameworks
Project description
Rizzler
Installation
Install using pip
$ pip install rizzler
> ...
Usage
Integrate with lifespan protocol.
from contextlib import asynccontextmanager
from fastapi import FastAPI
from fastapi.requests impor Request
from fastapi.responses import HTMLResponse
from rizzler import RizzleTemplates, Rizzler
from typing import AsyncIterator, List, Tuple
@Rizzler.load_config
def rizzler_settings() -> List[Tuple[str, str]]:
return [
("command", "pnpm"),
("framework", "vue")
]
@asynccontextmanager
async def lifespan(_: FastAPI) -> AsyncIterator[None, None]:
await Rizzler.serve()
yield
Rizzler.shutdown()
app: FastAPI = FastAPI(lifespan=lifespan)
templates: RizzleTemplates = RizzleTemplates(directory="templates")
@app.get("/", response_class=HTMLResponse)
async def index(request: Request) -> HTMLResponse:
return templates.TemplateResponse("index.html", {"request": request})
Templating
RizzleTemplates is an extension on top of Jinja2Templates class found under starlette
However, has two overriding methods that must be placed inside the template HTML-file as such:
<!DOCTYPE html>
<html>
<head><!-- ... --></head>
<body>
{{ vite_hmr_client() }}
{{ vite_asset('pages/main.js') }}
</body>
</html>
Build
You can run the following command once you are done customizing the front-end code under pages/ directory
to your liking.
rzl build
Example outputs for `rzl build`
$ rzl build
> INFO ⚡Building Rizzler front-end…
> INFO
> INFO > rzl-tmp@0.0.0 build /Users/mackasitt/workspaces/rzl-react
> INFO > vite build
> INFO
> INFO vite v5.3.3 building for production...
> INFO transforming...
> INFO ✓ 32 modules transformed.
> INFO rendering chunks...
> INFO computing gzip size...
> INFO dist/rizz.svg 4.13 kB │ gzip: 2.14 kB
> INFO dist/rizz.css 1.39 kB │ gzip: 0.72 kB
> INFO dist/rizz.js 142.63 kB │ gzip: 45.74 kB
> INFO ✓ built in 390ms
Now you can stop using RizzleTemplates and revert back to serving front-end with Jinja2Templates
as such
#!/usr/bin/env python3
from fastapi import FastAPI
from fastapi.requests import Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
app = FastAPI()
templates = Jinja2Templates(directory="dist")
@app.get("/", response_class=HTMLResponse)
def index(request: Request) -> HTMLResponse:
return templates.TemplateResponse("index.html", {"request": request})
app.mount("/", StaticFiles(directory="dist"), name="dist")
Voila! Now you have a production front-end to go with your FastAPI application when you need.
There will probably be bugs when it comes to relative versus absolute paths in the future.
But this is good enough for many prototyping use-case and with a bit of tinkering, can replace
Contributions
To be determined.
Acknowledgements
License
This project is licensed under the terms of the MIT license.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
