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 ## 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 login registry.citadelhosts.com
podman build -t registry.citadelhosts.com/react-frontend:latest frontend 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/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 python -m venv .venv
source .venv/bin/activate source .venv/bin/activate
pip install -r requirements.txt 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 ## Frontend
@ -35,4 +35,4 @@ npm install
npm run dev 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 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 fastapi import FastAPI
from flask_cors import CORS from fastapi.middleware.cors import CORSMiddleware
app = Flask(__name__) app = FastAPI()
CORS(app) app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/hello") @app.get("/hello")
@app.get("/api/hello")
def hello(): def hello():
return jsonify(message="Hello from Flask") return {"message": "Hello from FastAPI"}
if __name__ == "__main__":
app.run(debug=True)

5
backend/requirements.txt
View File

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

2
frontend/index.html
View File

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

4
frontend/src/App.jsx
View File

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