Simplified templating, backend port config on devserver.py, simplified Vue app patches.

This commit is contained in:
2026-01-17 19:51:47 +00:00
parent d9323f34e1
commit a2983a62a0
7 changed files with 164 additions and 190 deletions
+33 -24
View File
@@ -1,15 +1,13 @@
# fastapi-vue-setup
Tool to create or patch FastAPI project with a Vue frontend, with integrated build and development systems. Only building the package needs JS runtime and Vue. Additionally, a devmode setup using Vite dev server with hot auto reloads is available via the scripts/devserver.py script (only intended to be used on the source repo, not included in installed package).
Tool to create or patch FastAPI project with a Vue frontend, with integrated build and development systems. The Python package will not need any JS runtime because it includes a prebuilt Vue frontend in it. For development (Vite and FastAPI auto reloads) and building the package one of npm, deno or bun is required (npm recommended due to bugs in deno and bun).
## Features
- **No JavaScript**: Your Python package can be installed and used without any JS runtime
- **Create new projects** with `uv init` + `create-vue` (interactive)
- **Patch existing projects** with build hooks and dev server scripts
- **Integrated build system**: Vue frontend builds into Python package during `uv build`
- **Development server**: Single command runs Vite + FastAPI with hot-reload
- **Optimized static serving**: zstd compression, ETag caching, SPA support
- **Optimized static serving**: Caching, zstd compression and SPA support
## Installation
@@ -28,6 +26,8 @@ uvx fastapi-vue-setup my-app
## Usage
The script may be used to create an all new project folder or to patch or update an existing project to use this framework. It autodetects the project folder given and performs the appropriate actions.
### Create a new project
```sh
@@ -43,10 +43,9 @@ This will:
### Patch an existing project
If you have an existing project with `pyproject.toml` or `frontend/`, run without arguments to see the safety prompt, then confirm with:
You should have your pyproject.toml at the current working directory, and Vue with its package.json under `frontend/`. If either one is missing, new applications will be initialised. Otherwise we only patch what can be patched without breaking your existing projects.
```bash
cd /path/to/project
```sh
fastapi-vue-setup .
```
@@ -57,14 +56,9 @@ fastapi-vue-setup [project-dir] [options]
Options:
--module-name NAME Python module name (auto-detected from pyproject.toml)
--vite-port PORT Vite dev server port (default: 5173)
--backend-port PORT Backend API port in dev mode (default: 5180)
--prod-port PORT Production server port (default: 5080)
--dry-run Preview changes without modifying files
```
Port options can be used to reconfigure an already-patched project.
## Port Configuration
The tool uses three distinct ports:
@@ -75,9 +69,30 @@ The tool uses three distinct ports:
| 5180 | FastAPI in dev mode | uvicorn via devserver.py |
| 5080 | Production server | `uv run my-app` |
In development, you access the app at `http://localhost:5173`. Vite proxies `/api/*` requests to FastAPI at port 5180.
In development, you access the app at `http://localhost:5173`. Vite proxies `/api/*` requests to FastAPI at port 5180. Configurable with `devserver.py` arguments.
In production, FastAPI serves both the API and static files from port 5080.
In production, FastAPI serves both the API and static files at `http://localhost:5080`. Configurable by `host:port` argument.
## Vite Plugin Configuration
The `fastapiVue()` plugin in `vite.config.ts` accepts options to customize proxy behavior:
```js
import fastapiVue from "./vite-plugin-fastapi.js";
export default defineConfig({
plugins: [
vue(),
// Default: proxies only /api
fastapiVue(),
// Or specify custom paths to proxy to backend
fastapiVue({ paths: ["/api", "/auth", "/ws"] }),
],
});
```
The plugin reads environment `FASTAPI_VUE_BACKEND_URL` (default: `http://localhost:5180`) to determine where to proxy requests. This is set automatically by `devserver.py`.
## Project Structure
@@ -85,7 +100,7 @@ After patching, your project will have:
```
my-app/
├── frontend/ # Vue.js application
├── frontend/ # Vue application
│ ├── src/
│ ├── vite.config.ts # Builds to ../my_app/frontend-build
│ └── package.json
@@ -100,7 +115,7 @@ my-app/
└── pyproject.toml # Project configuration
```
The script finds your existing fastpi app module (even if not named app.py) and other files and patches them with minimal changes to enable the Vue-FastAPI interconnection.
The script finds your existing fastpi app module and other files and patches them with minimal changes to enable the Vue-FastAPI interconnection.
## Development Workflow
@@ -115,12 +130,6 @@ uv build
uv run my-app
```
## Static File Serving
# Frontend serving
The `Frontend` class provides:
- **Automatic zstd compression** at level 18
- **Smart caching**: Content-hashed assets get `immutable` cache headers
- **ETag support**: 304 Not Modified responses for cached content
- **SPA routing**: Falls back to index.html for client-side routes
- **Favicon handling**: Automatic /favicon.ico from hashed assets
Your FastAPI app will use [fastapi-vue](https://git.zi.fi/LeoVasanko/fastapi-vue) to serve the frontend file. Refer to that package's documentation for further configuration.