Skip to content

Full-Stack Setup: FastAPI + React.js + Vite + Material-UI (MUI) with TypeScript

In this tutorial, we'll create a simple full-stack application using FastAPI for the back-end, React.js (with TypeScript) and Vite for the front-end, and Material-UI (MUI) for building the user interface. This step-by-step guide will walk you through building a full-stack app using modern tooling and fast development servers.

If you’re looking for a production-ready version of this setup, we’ve built a complete boilerplate with built-in features like authentication, database integration, and more, which you can find at the end.

Table of Contents

  1. Project Structure Overview
  2. Setting Up FastAPI (Back-End)
  3. Setting Up React with Vite, TypeScript, and Material-UI (Front-End)
  4. Connecting React to FastAPI (API Calls)
  5. Adding Material-UI Components
  6. Running and Testing the App

1. Project Structure Overview

We’ll follow a structure similar to our CraftYourStartup Boilerplate to keep everything organized:

my-fullstack-app/
│
├── backend/               # FastAPI app (Back-End)
│   ├── app/
│   │   └── main.py        # Main FastAPI app logic
│   └── poetry.lock
│   └── pyproject.toml     # Poetry dependency file
│
└── frontend/              # React.js (TypeScript) Front-End with Vite
    ├── public/
    ├── src/
    │   ├── App.tsx        # React app main file in TypeScript
    ├── package.json
    └── vite.config.ts     # Vite configuration for dev and prod

The backend folder will contain the FastAPI app, while the frontend folder holds the React + TypeScript code built with Vite.

2. Setting Up FastAPI (Back-End)

We'll start by setting up the FastAPI back-end, which will serve as the API for the React front-end.

Steps:

  1. Create the Back-End Directory: 

    mkdir -p my-fullstack-app/backend/app  
cd my-fullstack-app/backend

  2. Install Poetry: We’re using Poetry to manage dependencies:

    pip install poetry  
poetry init

  3. Install FastAPI and Uvicorn: Install the necessary dependencies:

    poetry add fastapi uvicorn

  4. Create a Simple FastAPI App: In backend/app/main.py:

    from fastapi import FastAPI  

app = FastAPI()

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

  5. Run the FastAPI Server: Start the server:

    poetry run uvicorn app.main:app --reload
    Your API will be live at http://localhost:8000.

3. Setting Up React with Vite, TypeScript, and Material-UI (Front-End)

Now, let’s set up the React front-end using Vite, TypeScript, and Material-UI.

Steps:

  1. Create the Front-End Directory: 

    mkdir ../frontend  
cd ../frontend  
npm create vite@latest frontend -- --template react-ts  
cd frontend

  2. Install Dependencies: Install Material-UI components and Axios for making HTTP requests:

    npm install @mui/material @emotion/react @emotion/styled @mui/icons-material axios

  3. Update Vite Configuration for Proxy: Update vite.config.ts to proxy requests to the FastAPI back-end during development:

    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. Update the App Component: In src/App.tsx, update it to make an API call to your FastAPI back-end:

    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;

4. Connecting React to FastAPI (API Calls)

To connect the front-end and back-end, we use Axios for making API requests. Vite's proxy configuration will forward /api requests to the FastAPI back-end.

  1. Make API Requests: In the useEffect block of App.tsx, we're making a request to the FastAPI server by calling the /api/ endpoint: 

    useEffect(() => {  
    axios.get("/api/")  
        .then(response => setMessage(response.data.message))  
        .catch(error => console.error("Error fetching data", error));  
}, []);

  2. Test the Connection: Make sure your React app is successfully calling the FastAPI back-end by running both servers (FastAPI and Vite) simultaneously.

5. Adding Material-UI Components

With the front-end and back-end connected, let's add some Material-UI components to enhance the UI.

  1. Adding a TextField: You can add a TextField component to capture input from users. Replace the button with the following in App.tsx:
    import { TextField } 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>  
            <TextField label="Enter something" variant="outlined" />  
        </Container>  
    );  
};  

export default App;

This creates a simple input field using Material-UI.

6. Running and Testing the App

Now that everything is set up, let's run both the back-end and front-end to see the full-stack app in action.

Run the Back-End:

Make sure the FastAPI server is running: 

cd backend  
poetry run uvicorn app.main:app --reload

Run the Front-End:

In a separate terminal window, run the Vite development server: 

cd frontend  
npm run dev

This will launch the React app at http://localhost:3000, and API requests to /api/ will be proxied to the FastAPI back-end.

Wrapping Up

You’ve now set up a full-stack application using FastAPI for the back-end, React (with TypeScript) and Vite for the front-end, and Material-UI for building a modern user interface. You can extend this with more complex features like authentication, database integration, or route protection.

For a more complete, production-ready boilerplate that covers advanced features and follows best practices, check out this full boilerplate. It's an ideal way to accelerate your startup projects!