rizzler

Rizzler creates a parallel front-end dev-server using ViteJS for ASGI Frameworks

0.1.9
PyPI

Maintainers: 1

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.

Keywords

FAQs

What is rizzler?

Is rizzler well maintained?

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install