liamf/FastApiReact-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make it FastAPI

Browse Source
This commit is contained in:
Liam Fitzpatrick 2026-01-09 17:32:54 -05:00
parent 7caa5d2484
commit 8ea1d54f0c
6 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -1,6 +1,6 @@
# Flask + React Example
# FastAPI + React Example
Basic example with a Flask API and a React frontend (Vite).
Basic example with a FastAPI backend and a React frontend (Vite).
## Publish to CitadelHosts.com
@ -9,9 +9,9 @@ Basic example with a Flask API and a React frontend (Vite).
```
podman login registry.citadelhosts.com
podman build -t registry.citadelhosts.com/react-frontend:latest frontend
podman build -t registry.citadelhosts.com/flask-backend:latest backend
podman build -t registry.citadelhosts.com/fastapi-backend:latest backend
podman image push registry.citadelhosts.com/react-frontend:latest
podman image push registry.citadelhosts.com/flask-backend:latest
podman image push registry.citadelhosts.com/fastapi-backend:latest
```
@ -22,10 +22,10 @@ cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python app.py
uvicorn app:app --reload --port 5000
```
Flask will run on `http://localhost:5000`.
FastAPI will run on `http://localhost:5000`.
## Frontend
@ -35,4 +35,4 @@ npm install
npm run dev
```
Vite will run on `http://localhost:5173` and proxy `/api` to the Flask server.
Vite will run on `http://localhost:5173` and proxy `/api` to the FastAPI server.

2
backend/Containerfile
View File

@ -9,4 +9,4 @@ COPY app.py ./
EXPOSE 5000
CMD ["gunicorn", "--bind", "0.0.0.0:5000", "app:app"]
CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "5000"]

21
backend/app.py
View File

@ -1,14 +1,17 @@
from flask import Flask, jsonify
from flask_cors import CORS
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
app = Flask(__name__)
CORS(app)
app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/hello")
@app.get("/api/hello")
def hello():
return jsonify(message="Hello from Flask")
if __name__ == "__main__":
app.run(debug=True)
return {"message": "Hello from FastAPI"}

5
backend/requirements.txt
View File

@ -1,3 +1,2 @@
flask==3.0.0
flask-cors==4.0.0
gunicorn==21.2.0
fastapi==0.111.0
uvicorn[standard]==0.30.1

2
frontend/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flask + React Example</title>
<title>FastAPI + React Example</title>
</head>
<body>
<div id="root"></div>

4
frontend/src/App.jsx
View File

@ -35,9 +35,9 @@ function App() {
return (
<div className="app">
<header className="app-header">
<h1>Flask + React</h1>
<h1>FastAPI + React</h1>
<p className="app-subtitle">
Frontend fetches data from a Flask API endpoint.
Frontend fetches data from a FastAPI endpoint.
</p>
</header>
<main className="app-main">