This content originally appeared on DEV Community and was authored by Vitalii
Creating a scalable full-stack application can be daunting, but with the right tools, it can be efficient and even enjoyable. In this tutorial, I’ll walk you through building a full-stack application using FastAPI for the back-end, React.js with Vite for the front-end, and Material-UI (MUI) for a clean user interface—all with TypeScript.
If you’re looking for a production-ready, feature-rich setup, I also offer a boilerplate with built-in features like authentication and database integration.
Why This Stack?
- FastAPI: Known for its speed and asynchronous capabilities, making it ideal for modern APIs.
- React + Vite: Provides a fast development environment and modular frontend structure.
- MUI: Gives a polished, professional look with minimal custom styling.
1. Project Structure Overview
Here’s the structure we’ll follow to keep things organized:
my-fullstack-app/
├── backend/ # FastAPI app (Back-End)
│ ├── app/
│ └── pyproject.toml # Poetry dependencies
└── frontend/ # React (TypeScript) Front-End with Vite
├── src/
├── package.json
└── vite.config.ts # Vite configuration
2. Setting Up FastAPI (Back-End)
First, let’s set up FastAPI:
mkdir -p my-fullstack-app/backend/app
cd my-fullstack-app/backend
pip install poetry
poetry init
poetry add fastapi uvicorn
In backend/app/main.py:
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
async def root():
return {"message": "Hello from FastAPI!"}
Run the server:
poetry run uvicorn app.main:app --reload
3. Setting Up React with Vite and MUI (Front-End)
Let’s set up the React front-end using Vite and TypeScript.
mkdir ../frontend
cd ../frontend
npm create vite@latest frontend -- --template react-ts
cd frontend
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material axios
Add proxy settings to vite.config.ts:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
});
4. Connecting React to FastAPI (API Calls)
In src/App.tsx:
import React, { useEffect, useState } from "react";
import axios from "axios";
import { Container, Typography, Button } from "@mui/material";
const App: React.FC = () => {
const [message, setMessage] = useState<string>("");
useEffect(() => {
axios.get("/api/")
.then(response => setMessage(response.data.message))
.catch(error => console.error("Error fetching data", error));
}, []);
return (
<Container>
<Typography variant="h3" gutterBottom>
FastAPI + React + Vite + MUI (TypeScript)
</Typography>
<Typography variant="body1">
{message || "Loading..."}
</Typography>
<Button variant="contained" color="primary" style={{ marginTop: '20px' }}>
Material UI Button
</Button>
</Container>
);
};
export default App;
5. Running and Testing the App
Run both the back-end and front-end:
# Back-End
cd backend
poetry run uvicorn app.main:app --reload
# Front-End
cd frontend
npm run dev
Your app should now be accessible at http://localhost:3000, with the API proxying requests to FastAPI.
Wrapping Up
In this guide, we set up a full-stack app using FastAPI and React with Vite. This stack provides a clean, scalable structure perfect for modern applications.
If you’re looking for an extended setup with features like user authentication and database integration, feel free to check out the full boilerplate designed for production readiness and startup projects.
This content originally appeared on DEV Community and was authored by Vitalii
Vitalii | Sciencx (2024-11-06T18:43:05+00:00) Modern Full-Stack Setup: FastAPI + React.js + Vite + MUI with TypeScript. Retrieved from https://www.scien.cx/2024/11/06/modern-full-stack-setup-fastapi-react-js-vite-mui-with-typescript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.