About FAVV (FastAPI+ViteVue)
FastAPI Python backend (BE) and Vite + VueJS + Ant Design frontend (FE) template... for your API and Web application needs.
The difference between this project and https://github.com/ais-one/cookbook is described here
Also includes some samples in streamlit
Considerations
The following are considerations for the project. The aim is to allow things to be built faster and reduce maintenence overhead.
- code reusability
- application segregation inject your own frontend and backend project
- ease of template upgrade
- ci/cd and container friendly
- microservices friendly
- up to date dependencies
- reducing technical debt
- scalability
Roadmap & Updates
See CHANGELOG.md
Development - Setup and Run
Backend
python: 3.8.5, pip: 20.1.1
cd fastapi
# create environment called dev
python -m venv dev # python3 -m venv /path/to/new/virtual/env
# copy .env.example to .env, adjust your own custom env settings here
cp ./app/.env.example ./app/.env # common environment
cp ./app/.env.local.example ./app/.env.local # for local machine deployment
cp ./app/.env.docker-compose.example ./app/.env.docker-compose # for docker compose deployment
# copy requirements.txt.example to copy requirements.txt (point to your own custom requirements.txt inside)
cp ./requirements.txt.example ./requirements.txt
activate env in windows
# cmd
dev\Scripts\activate
dev\Scripts\deactivate
# powershell
dev\Scripts\Activate.ps1
deactivate
activate env in linux
source dev/bin/activate
Installing / Upgrading python packages
For framework
run fastapi/install.sh
For your own applications
Manage packages using fastapi/app/<custom_app>/requirements.txt
Or run fastapi/app/<custom_app>/install.sh
Run App & Task Quque (requires redis)
cd app
# fastapi application
python main.py # OPTION 1 - running using python
uvicorn main:app --reload --host=0.0.0.0 --port=3000 --access-log --log-level=debug --header server:none # OPTION 2 - running uvicorn
# HTTPS
# if using SSL include the following to uvicorn, also set USE_HTTPS in environment file
# --ssl-keyfile <path> - SSL key file --ssl-certfile <path> - SSL certificate file
# huey task queue consumer
huey_consumer custom_app.models.tasks.huey
Navigate to - http://127.0.0.1:3000/api-docs
Note: if you use https and self-signed cert you may need to allow on browser
HTTPS
Generate your private key and...
Create a self-signed cert, or get a signed cert
openssl req -x509 -newkey rsa:4096 -keyout local.key.pem -out local.cert.pem -days 365 -nodes -subj '/CN=127.0.0.1'
Production Run (Docker)
cd ../fastapi
docker build -t <your-image-name>:<tag> .
docker run -it <your-image-name>:<tag>
Frontend
- VueJS 3
- Vite 2 https://github.com/vuejs/vite
- Ant Design 2
refer to vitevue/README.md
Streamlit
See streamlit/README.md for more information
Customization
Structure - Files / Folders For Customisation Or Use
+ favv
+ fastapi/
| + app/
| | + .env: backend config
| | + <your-custom-backend>_app/: folder with suffix "_app" are your custom backend code, models, uploads (your backend repo)
| | + .gitignore: for your repo
| | + base.py: this file name is required, and an FastApi ApiRouter of the name router_<your-custom-backend>_app is needed
| | + requirments.txt: your dependencies
| | + models/
| | * tasks.py: custom task queue file
| | + uploads/
| + .env: environment state, custom app name and version
| + .env.<your-environment>: environment specific info
| + Dockerfile.example: DO NOT TOUCH THIS, use this as an example for your own Dockerfile
| + install.sh: DO NOT TOUCH THIS
| + requirements.base.txt: DO NOT TOUCH THIS
+ streamlit/
| + app/ : demo application
| + component-template/ : streamlit custom components
| + streamlit-antv: using antv charts on streamlit
| + streamlit-vite: basic example of using vite to build streamlit-components
| + streamlit-xui: extended UI components for streamlit
+ vitevue/
+ README.md
NOTES
- All folders and files prefixed with TBD can be ignored, they are not implemented and used for reference
Backend Customization Notes
Setting up your custom backend
# in favv/fastapi/app/
# note that project name must end with suffix "_app"
git clone <your backend project e.g. example_app>
- use favv/fastapi/app/custom_app/ as reference on your custom backend
- on working with your custom endpoints, using db, s3, file services
- working with files in favv/fastapi/app/custom_app/uploads/ folder
- running subprocess in favv/fastapi/app/custom_app/models/ folder
- set the APP, to the folder name of your custom app in favv/fastapi/app/.env
- specify the VERSION and the ENVIRONMENT state (local, docker-compose, production, etc...)
- specify APP which is your custom application, UPLOAD_FOLDER and MODEL_FOLDER is directly inside your custom app folder
- set uour environment specific information in favv/fastapi/app/.env.
- application path is favv/fastapi/app/ as main.py is run from there (either using python or uvicorn)
- test endpoints in favv/fastapi/app/api/routes/test.py will not be available in production environment
- NOTE: update favv/fastapi/app/config.py when .env entries change
- NOTE: any code outside favv/fastapi/app will not auto reload
Notes
- use fastapi/install.sh to update python libraries
- for favv/fastapi .env host is redis if using docker compose 127.0.0.1 otherwise