LeoVasanko/fastapi-vue-setup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

README

Browse Source
This commit is contained in:
LeoVasanko
2026-01-17 20:21:31 +00:00
parent a2983a62a0
commit e6170549f0
1 changed files with 17 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+14 -21
View File
@@ -1,6 +1,6 @@
# fastapi-vue-setup
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).
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 (node is recommended due to bugs in deno and bun).
## Features
@@ -61,15 +61,7 @@ Options:
## Port Configuration
The tool uses three distinct ports:
| Port | Purpose | Used by |
| ---- | --------------------- | ------------------------------ |
| 5173 | Vite dev server (HMR) | `npm run dev` via devserver.py |
| 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. Configurable with `devserver.py` arguments.
In development, you access the Vite dev server at `http://localhost:5173`. Vite proxies `/api/*` requests to FastAPI at port 5180. Ports and hosts of Vite and FastAPI are configurable by `devserver.py` arguments.
In production, FastAPI serves both the API and static files at `http://localhost:5080`. Configurable by `host:port` argument.
@@ -96,26 +88,27 @@ The plugin reads environment `FASTAPI_VUE_BACKEND_URL` (default: `http://localho
## Project Structure
After patching, your project will have:
```
my-app/
├── frontend/ # Vue application
│ ├── src/
│ ├── vite.config.ts # Builds to ../my_app/frontend-build
│ ├── vite-plugin-fastapi.js
│ ├── vite.config.js
│ └── package.json
├── my_app/ # Python package
├── my_app/ # Python module (files included in sdist)
│ ├── __init__.py
│ ├── __main__.py # CLI entry point
│ ├── __main__.py # CLI entrypoint
│ ├── app.py # FastAPI application
│ └── frontend-build/ # Built frontend (gitignored)
├── scripts/
│ ├── devserver.py # Development server
│ └── fastapi-vue/ # Build utilities
└── pyproject.toml # Project configuration
│ ├── devserver.py # CLI dev server (only in source tree)
│ └── fastapi-vue/
│ ├── build-frontend.py
│ └── util.py
└── pyproject.toml
```
The script finds your existing fastpi app module and other files and patches them with minimal changes to enable the Vue-FastAPI interconnection.
The project directory tree looks roughly like this after project creation or patching. The script finds your existing fastpi app module and other files and patches them with minimal changes to enable the Vue-FastAPI interconnection. New Python and Vue projects are created automatically if none exist.
## Development Workflow
@@ -130,6 +123,6 @@ uv build
uv run my-app
```
# Frontend serving
## Frontend serving
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.
Your FastAPI app will use [fastapi-vue](https://git.zi.fi/LeoVasanko/fastapi-vue) to serve the frontend files. Refer to that package's documentation for further configuration.