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

initial project template

Browse Source
This commit is contained in:
Liam Fitzpatrick 2026-01-03 13:19:49 -05:00
commit 5cef29b7c0
13 changed files with 1828 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md Normal file
View File

@ -0,0 +1,25 @@
# Flask + React Example
Basic example with a Flask API and a React frontend (Vite).
## Backend
```bash
cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python app.py
```
Flask will run on `http://localhost:5000`.
## Frontend
```bash
cd frontend
npm install
npm run dev
```
Vite will run on `http://localhost:5173` and proxy `/api` to the Flask server.

1
backend/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.venv

14
backend/app.py Normal file
View File

@ -0,0 +1,14 @@
from flask import Flask, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.get("/api/hello")
def hello():
return jsonify(message="Hello from Flask")
if __name__ == "__main__":
app.run(debug=True)

2
backend/requirements.txt Normal file
View File

@ -0,0 +1,2 @@
flask==3.0.0
flask-cors==4.0.0

1
frontend/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

12
frontend/index.html Normal file
View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flask + React Example</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

1633
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

19
frontend/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.0",
"vite": "^5.0.0"
}
}

38
frontend/src/App.css Normal file
View File

@ -0,0 +1,38 @@
.app {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 32px;
color: #1f2a44;
}
.app-header {
margin-bottom: 24px;
}
.app-subtitle {
color: #4f5d75;
margin-top: 8px;
}
.app-main {
display: flex;
justify-content: center;
}
.card {
border: 1px solid #d9dee7;
border-radius: 12px;
padding: 24px;
background: #ffffff;
box-shadow: 0 12px 30px rgba(26, 35, 50, 0.08);
min-width: 280px;
}
.message {
font-size: 1.25rem;
margin-top: 8px;
}
.error {
color: #b00020;
margin-top: 8px;
}

54
frontend/src/App.jsx Normal file
View File

@ -0,0 +1,54 @@
import { useEffect, useState } from "react";
import "./App.css";
function App() {
const [message, setMessage] = useState("loading...");
const [error, setError] = useState("");
useEffect(() => {
let isMounted = true;
fetch("/api/hello")
.then((res) => {
if (!res.ok) {
throw new Error(`Request failed: ${res.status}`);
}
return res.json();
})
.then((data) => {
if (isMounted) {
setMessage(data.message ?? "No message");
}
})
.catch((err) => {
if (isMounted) {
setError(err.message);
setMessage("Error");
}
});
return () => {
isMounted = false;
};
}, []);
return (
<div className="app">
<header className="app-header">
<h1>Flask + React</h1>
<p className="app-subtitle">
Frontend fetches data from a Flask API endpoint.
</p>
</header>
<main className="app-main">
<div className="card">
<h2>API Response</h2>
<p className="message">{message}</p>
{error ? <p className="error">{error}</p> : null}
</div>
</main>
</div>
);
}
export default App;

8
frontend/src/index.css Normal file
View File

@ -0,0 +1,8 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #f4f6fb;
}

10
frontend/src/main.jsx Normal file
View File

@ -0,0 +1,10 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

11
frontend/vite.config.js Normal file
View File

@ -0,0 +1,11 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": "http://localhost:5000"
}
}
});