DEV Community

Cover image for Modern Full-Stack Setup: FastAPI + React.js + Vite + MUI with TypeScript
Vitalii
Vitalii

Posted on

Modern Full-Stack Setup: FastAPI + React.js + Vite + MUI with TypeScript

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

In backend/app/main.py:

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Hello from FastAPI!"}
Enter fullscreen mode Exit fullscreen mode

Run the server:

poetry run uvicorn app.main:app --reload
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/, ''),
      },
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)