0
# Backend Integration
1

2
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.
3

4
## Capabilities
5

6
### Universal Run Function
7

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

10
```python { .api }
11
def run(
12
    component: RootComponentConstructor,
13
    host: str = "127.0.0.1",
14
    port: int | None = None,
15
    implementation: BackendType[Any] | None = None,
16
) -> None: ...
17
```
18

19
**Parameters:**
20
- `component`: The root component to render
21
- `host`: Host address to bind to
22
- `port`: Port number to listen on (defaults to auto-detected available port)
23
- `implementation`: Backend implementation to use (defaults to auto-detected)
24

25
**Usage Examples:**
26

27
```python
28
from reactpy import component, html, run
29

30
@component
31
def App():
32
    return html.h1("Hello ReactPy!")
33

34
# Simple development server
35
run(App)
36

37
# Custom host and port
38
run(App, host="0.0.0.0", port=3000)
39
```
40

41
### FastAPI Integration
42

43
Integration with FastAPI for modern async web applications:
44

45
```python { .api }
46
# From reactpy.backend.fastapi
47
def configure(app: FastAPI, component: RootComponentConstructor, options: Options | None = None) -> None: ...
48
def create_development_app() -> FastAPI: ...
49
```
50

51
**Usage Examples:**
52

53
```python
54
from fastapi import FastAPI
55
from reactpy import component, html
56
from reactpy.backend.fastapi import configure
57

58
app = FastAPI()
59

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

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

67
# Or create development app
68
from reactpy.backend.fastapi import create_development_app, configure
69
dev_app = create_development_app()
70
configure(dev_app, HelloWorld)
71
```
72

73
### Flask Integration
74

75
Integration with Flask for traditional web applications:
76

77
```python { .api }
78
# From reactpy.backend.flask
79
def configure(app: Flask, component: RootComponentConstructor, options: Options | None = None) -> None: ...
80
def create_development_app() -> Flask: ...
81
```
82

83
**Usage Examples:**
84

85
```python
86
from flask import Flask
87
from reactpy import component, html
88
from reactpy.backend.flask import configure
89

90
app = Flask(__name__)
91

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

96
configure(app, FlaskComponent)
97

98
if __name__ == "__main__":
99
    app.run(debug=True)
100
```
101

102
### Starlette Integration
103

104
Integration with Starlette for ASGI applications:
105

106
```python { .api }
107
# From reactpy.backend.starlette
108
def configure(app: Starlette, component: RootComponentConstructor, options: Options | None = None) -> None: ...
109
def create_development_app() -> Starlette: ...
110
```
111

112
**Usage Examples:**
113

114
```python
115
from starlette.applications import Starlette
116
from starlette.responses import JSONResponse
117
from reactpy import component, html
118
from reactpy.backend.starlette import configure
119

120
@component
121
def StarletteComponent():
122
    return html.h1("Starlette + ReactPy")
123

124
app = Starlette()
125
configure(app, StarletteComponent)
126
```
127

128
### Sanic Integration
129

130
Integration with Sanic for high-performance async applications:
131

132
```python { .api }
133
# From reactpy.backend.sanic
134
def configure(app: Sanic[Any, Any], component: RootComponentConstructor, options: Options | None = None) -> None: ...
135
def create_development_app() -> Sanic[Any, Any]: ...
136
```
137

138
**Usage Examples:**
139

140
```python
141
from sanic import Sanic
142
from reactpy import component, html
143
from reactpy.backend.sanic import configure
144

145
app = Sanic("ReactPyApp")
146

147
@component
148
def SanicComponent():
149
    return html.h1("Sanic + ReactPy")
150

151
configure(app, SanicComponent)
152

153
if __name__ == "__main__":
154
    app.run(host="0.0.0.0", port=8000)
155
```
156

157
### Tornado Integration
158

159
Integration with Tornado for real-time applications:
160

161
```python { .api }
162
# From reactpy.backend.tornado
163
def configure(app: Application, component: RootComponentConstructor, options: Options | None = None) -> None: ...
164
def create_development_app() -> Application: ...
165
```
166

167
**Usage Examples:**
168

169
```python
170
import tornado.web
171
import tornado.ioloop
172
from reactpy import component, html
173
from reactpy.backend.tornado import configure
174

175
@component
176
def TornadoComponent():
177
    return html.h1("Tornado + ReactPy")
178

179
app = tornado.web.Application()
180
configure(app, TornadoComponent)
181

182
if __name__ == "__main__":
183
    app.listen(8000)
184
    tornado.ioloop.IOLoop.current().start()
185
```
186

187
### Backend Types and Protocols
188

189
Core types for backend integration:
190

191
```python { .api }
192
# Backend protocol
193
class BackendType(Protocol):
194
    async def create_server(self, host: str, port: int, **kwargs) -> Any: ...
195
    def configure(self, app: Any, component: ComponentType, **options) -> None: ...
196

197
# Connection information
198
class Connection(TypedDict):
199
    remote_addr: str
200
    headers: dict[str, str]
201
    query_params: dict[str, str]
202

203
# Location/routing information  
204
class Location(TypedDict):
205
    pathname: str
206
    search: str
207
    hash: str
208
    state: dict[str, Any]
209
```
210

211
### Development Server
212

213
ReactPy includes a development server for quick prototyping:
214

215
```python { .api }
216
# From reactpy.backend.default
217
def create_development_app(component: ComponentType, **options) -> Any: ...
218
```
219

220
**Usage Examples:**
221

222
```python
223
from reactpy import component, html
224
from reactpy.backend.default import create_development_app
225

226
@component
227
def DevApp():
228
    return html.h1("Development Server")
229

230
app = create_development_app(DevApp)
231
# Automatically serves on http://localhost:8000
232
```
233

234
### Backend Configuration Options
235

236
Common configuration options across backends:
237

238
```python
239
# CORS configuration
240
configure(app, component, cors_allow_origins=["*"])
241

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

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

248
# WebSocket configuration
249
configure(app, component, websocket_path="/ws")
250
```
251

252
### Connection and Location Hooks
253

254
Access connection and routing information in components:
255

256
```python
257
from reactpy import use_connection, use_location
258

259
@component
260
def ConnectionInfo():
261
    connection = use_connection()
262
    location = use_location()
263
    
264
    return html.div(
265
        html.h2("Connection Info"),
266
        html.p(f"Remote Address: {connection.get('remote_addr')}"),
267
        html.p(f"User Agent: {connection.get('headers', {}).get('user-agent')}"),
268
        
269
        html.h2("Location Info"),
270
        html.p(f"Path: {location.get('pathname')}"),
271
        html.p(f"Search: {location.get('search')}"),
272
        html.p(f"Hash: {location.get('hash')}")
273
    )
274
```
275

276
### Production Deployment
277

278
Example production deployment configurations:
279

280
```python
281
# With Gunicorn + FastAPI
282
# gunicorn app:app -w 4 -k uvicorn.workers.UvicornWorker
283

284
from fastapi import FastAPI
285
from reactpy.backend.fastapi import configure
286

287
app = FastAPI()
288
configure(app, MyComponent)
289

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

293
from flask import Flask
294
from reactpy.backend.flask import configure
295

296
app = Flask(__name__)
297
configure(app, MyComponent)
298

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

302
from starlette.applications import Starlette
303
from reactpy.backend.starlette import configure
304

305
app = Starlette()
306
configure(app, MyComponent)
307
```