CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-reactpy

Reactive user interfaces with pure Python

Pending
Overview
Eval results
Files

backend.mddocs/

Backend Integration

Support for multiple web frameworks enabling deployment across different Python web environments. ReactPy provides seamless integration with popular Python web frameworks through a unified backend system.

Capabilities

Universal Run Function

The run function automatically detects the best backend and starts the application:

def run(
    component: RootComponentConstructor,
    host: str = "127.0.0.1",
    port: int | None = None,
    implementation: BackendType[Any] | None = None,
) -> None: ...

Parameters:

  • component: The root component to render
  • host: Host address to bind to
  • port: Port number to listen on (defaults to auto-detected available port)
  • implementation: Backend implementation to use (defaults to auto-detected)

Usage Examples:

from reactpy import component, html, run

@component
def App():
    return html.h1("Hello ReactPy!")

# Simple development server
run(App)

# Custom host and port
run(App, host="0.0.0.0", port=3000)

FastAPI Integration

Integration with FastAPI for modern async web applications:

# From reactpy.backend.fastapi
def configure(app: FastAPI, component: RootComponentConstructor, options: Options | None = None) -> None: ...
def create_development_app() -> FastAPI: ...

Usage Examples:

from fastapi import FastAPI
from reactpy import component, html
from reactpy.backend.fastapi import configure

app = FastAPI()

@component
def HelloWorld():
    return html.h1("Hello from ReactPy + FastAPI!")

# Configure ReactPy with existing FastAPI app
configure(app, HelloWorld)

# Or create development app
from reactpy.backend.fastapi import create_development_app, configure
dev_app = create_development_app()
configure(dev_app, HelloWorld)

Flask Integration

Integration with Flask for traditional web applications:

# From reactpy.backend.flask
def configure(app: Flask, component: RootComponentConstructor, options: Options | None = None) -> None: ...
def create_development_app() -> Flask: ...

Usage Examples:

from flask import Flask
from reactpy import component, html
from reactpy.backend.flask import configure

app = Flask(__name__)

@component
def FlaskComponent():
    return html.div("ReactPy in Flask!")

configure(app, FlaskComponent)

if __name__ == "__main__":
    app.run(debug=True)

Starlette Integration

Integration with Starlette for ASGI applications:

# From reactpy.backend.starlette
def configure(app: Starlette, component: RootComponentConstructor, options: Options | None = None) -> None: ...
def create_development_app() -> Starlette: ...

Usage Examples:

from starlette.applications import Starlette
from starlette.responses import JSONResponse
from reactpy import component, html
from reactpy.backend.starlette import configure

@component
def StarletteComponent():
    return html.h1("Starlette + ReactPy")

app = Starlette()
configure(app, StarletteComponent)

Sanic Integration

Integration with Sanic for high-performance async applications:

# From reactpy.backend.sanic
def configure(app: Sanic[Any, Any], component: RootComponentConstructor, options: Options | None = None) -> None: ...
def create_development_app() -> Sanic[Any, Any]: ...

Usage Examples:

from sanic import Sanic
from reactpy import component, html
from reactpy.backend.sanic import configure

app = Sanic("ReactPyApp")

@component
def SanicComponent():
    return html.h1("Sanic + ReactPy")

configure(app, SanicComponent)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8000)

Tornado Integration

Integration with Tornado for real-time applications:

# From reactpy.backend.tornado
def configure(app: Application, component: RootComponentConstructor, options: Options | None = None) -> None: ...
def create_development_app() -> Application: ...

Usage Examples:

import tornado.web
import tornado.ioloop
from reactpy import component, html
from reactpy.backend.tornado import configure

@component
def TornadoComponent():
    return html.h1("Tornado + ReactPy")

app = tornado.web.Application()
configure(app, TornadoComponent)

if __name__ == "__main__":
    app.listen(8000)
    tornado.ioloop.IOLoop.current().start()

Backend Types and Protocols

Core types for backend integration:

# Backend protocol
class BackendType(Protocol):
    async def create_server(self, host: str, port: int, **kwargs) -> Any: ...
    def configure(self, app: Any, component: ComponentType, **options) -> None: ...

# Connection information
class Connection(TypedDict):
    remote_addr: str
    headers: dict[str, str]
    query_params: dict[str, str]

# Location/routing information  
class Location(TypedDict):
    pathname: str
    search: str
    hash: str
    state: dict[str, Any]

Development Server

ReactPy includes a development server for quick prototyping:

# From reactpy.backend.default
def create_development_app(component: ComponentType, **options) -> Any: ...

Usage Examples:

from reactpy import component, html
from reactpy.backend.default import create_development_app

@component
def DevApp():
    return html.h1("Development Server")

app = create_development_app(DevApp)
# Automatically serves on http://localhost:8000

Backend Configuration Options

Common configuration options across backends:

# CORS configuration
configure(app, component, cors_allow_origins=["*"])

# Custom path
configure(app, component, path="/my-app")

# Static file serving
configure(app, component, serve_static_files=True, static_dir="./static")

# WebSocket configuration
configure(app, component, websocket_path="/ws")

Connection and Location Hooks

Access connection and routing information in components:

from reactpy import use_connection, use_location

@component
def ConnectionInfo():
    connection = use_connection()
    location = use_location()
    
    return html.div(
        html.h2("Connection Info"),
        html.p(f"Remote Address: {connection.get('remote_addr')}"),
        html.p(f"User Agent: {connection.get('headers', {}).get('user-agent')}"),
        
        html.h2("Location Info"),
        html.p(f"Path: {location.get('pathname')}"),
        html.p(f"Search: {location.get('search')}"),
        html.p(f"Hash: {location.get('hash')}")
    )

Production Deployment

Example production deployment configurations:

# With Gunicorn + FastAPI
# gunicorn app:app -w 4 -k uvicorn.workers.UvicornWorker

from fastapi import FastAPI
from reactpy.backend.fastapi import configure

app = FastAPI()
configure(app, MyComponent)

# With uWSGI + Flask
# uwsgi --http :8000 --wsgi-file app.py --callable app

from flask import Flask
from reactpy.backend.flask import configure

app = Flask(__name__)
configure(app, MyComponent)

# With Hypercorn + Starlette
# hypercorn app:app --bind 0.0.0.0:8000

from starlette.applications import Starlette
from reactpy.backend.starlette import configure

app = Starlette()
configure(app, MyComponent)

Install with Tessl CLI

npx tessl i tessl/pypi-reactpy

docs

backend.md

components.md

configuration.md

events.md

hooks.md

html-elements.md

index.md

svg-elements.md

testing.md

vdom.md

web-modules.md

widgets.md

tile.json