Integration with FastAPI

This page explains how to integrate FastAPI and VitePress.

Overview

FastAPI is a Python web framework. VitePress is a static site generator based on Vue.js.

By integrating these two, you can build a web application using FastAPI for the backend and VitePress for the frontend.

Project Structure

Below is an example project structure for integrating FastAPI and VitePress.

.
├── backend/
│   └── main.py
├── docs/
│   ├── .vitepress/
│   │   └── config.js
│   └── index.md
├── docker-compose.yml
└── Dockerfile

• backend/: Directory for FastAPI source code
  • main.py: FastAPI entry point
• docs/: Directory for VitePress source code
  • .vitepress/: Directory for VitePress configuration files
  • index.md: Content for the top page
• docker-compose.yml: Docker Compose configuration file
• Dockerfile: Dockerfile

FastAPI Configuration

Configure FastAPI to serve the static files built by VitePress.

Edit backend/main.py as follows.

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount("/", StaticFiles(directory="docs/.vitepress/dist", html=True), name="static")

Use StaticFiles to mount the docs/.vitepress/dist directory to the / path. This allows the static files built by VitePress to be served.

VitePress Configuration

Configure VitePress so that the build output is generated in docs/.vitepress/dist.

Edit docs/.vitepress/config.js as follows.

export default {
  // ...
  outDir: '../.vitepress/dist',
  // ...
}

By setting outDir to ../.vitepress/dist, the build output will be generated in docs/.vitepress/dist.

Running the Application

Run the following commands to build VitePress and start FastAPI.

# Build VitePress
npm run docs:build

# Start FastAPI
docker-compose up -d --build

Once the build is complete, you can access http://localhost:8000 to confirm that the site created with VitePress is displayed.

Summary

This page explained how to integrate FastAPI and VitePress. Using this method, you can efficiently develop web applications with FastAPI for the backend and VitePress for the frontend.