FastAPI & Vue3 Web APP Quick start template
APACHE-2.0 License
This project is a template for a fullstack web application using Vue3 and FastAPI. It includes a basic example of a web application with a simple API and a frontend that consumes it, a simple web application that allows users to create notes. New notes and deleted notes are broadcasted to all connected clients using web sockets.
Modern Frameworks and Tools:
Containerization:
Dockerfile
that builds an image of the application.docker-compose.yml
file that defines the services for the frontend and backend.Code Quality:
cspell.json
file to add custom words or languages.Testing:
Continuous Integration and Continuous Deployment:
git clone https://github.com/Tomansion/Vue3-FastAPI-WebApp-template.git
cd Vue3-FastAPI-WebApp-template
make install
# Or manually:
cd backend
pip install -r requirements.txt
cd ../frontend
npm install
Follow the instructions in the backend/config/README.md
.
Modifying the configuration is required to give the application access to the ArangoDB instance.
make run
# Or manually:
cd backend
uvicorn websrv:app --reload --host 0.0.0.0 --port 3000
cd frontend # In another terminal
npm run serve
# Backend expected output
INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO: Started reloader process [125657] using WatchFiles
No build directory found. Running in development mode.
Initializing configuration...
- Set NOTES / NOTES_NUMBER_MAX
- Set NOTES / NOTES_TITLE_LENGTH_MAX
- Set NOTES / NOTES_CONTENT_LENGTH_MAX
- Set ARANGODB / HOST
- Set ARANGODB / PORT
- Set ARANGODB / DATABASE
- Set ARANGODB / USER
- Set ARANGODB / PASSWORD
Connecting to ArangoDB...
- Host: ***
- Port: ***
- Database: WebAppTemplate
- User: WebAppTemplate
- Connection to Arango Arango 3.11.5 established
Running FastAPI app...
- FastAPI is available at http://localhost:3000/api
- Swagger UI is available at http://localhost:3000/docs
- Redoc is available at http://localhost:3000/redoc
INFO: Started server process [125659]
INFO: Waiting for application startup.
INFO: Application startup complete.
# Install the test dependencies:
make install_test
# Run the tests:
make test
# Or manually:
cd backend
pytest --cov-report term --cov=. --cov-report=html -sx
firefox htmlcov/index.html
# Expected output
Name Stmts Miss Cover
------------------------------------------------
config/init_config.py 51 14 73%
services/notes_services.py 36 0 100%
utils/database_utils.py 76 6 92%
------------------------------------------------
TOTAL 163 20 88%
============= 10 passed in 1.52s ===============
# The detailed coverage report wil be available in the `htmlcov` directory.
This application provide a Makefile with some commands to help you with the code quality:
# Format the code with Black and Prettier:
make format
# Check the code with Black, Prettier, Flake8, and cSpell:
make check
# A pipeline is included in the GitHub Actions workflow that runs the linters, so make sure to fix any issues before pushing the code.
# Clone the repository:
git clone https://github.com/Tomansion/Vue3-FastAPI-WebApp-template.git
cd Vue3-FastAPI-WebApp-template
# Set the docker-compose environment variables
# More information in the backend/config/config.env file
nano docker-compose.yml
# Build and run the application with Docker Compose:
docker-compose up --build
The application should be available at: http://localhost:3000
This project includes a GitHub Actions workflow that builds the Docker image, pushes it to the Docker Hub image registry, and deploys the application by calling an SSH script.
docker-compose.yml
file to your server.
deploy.sh
script with the following content:# deploy.sh
cd /path/to/your/application
docker-compose pull
docker-compose up -d
# Use chmod +x deploy.sh to make the script executable
DOCKER_USERNAME
: Your Docker Hub username.DOCKER_PASSWORD
: Your Docker Hub password.SSH_HOST
: The IP address of the server where you want to deploy the application.SSH_PORT
: The port to connect to the server.SSH_USERNAME
: The username to connect to the server.SSH_PASSWORD
: The user password to connect to the server.SSH_SCRIPT_PATH
: The absolute path to the deploy.sh
script on the server.APP_NAME
in the continuous-deployment.yml file to match your application name.The GitHub Actions workflow will run when you push the changes to the repository main
branch. It will build the Docker image, push it to the Docker Hub image registry, and deploy the application by calling the deploy.sh
script on your server.
If you have any questions or need help, feel free to open an issue.
I'm open to contributions and suggestions. Feel free to open an issue or a make a pull request.
config.ini.example
and config.env
files automatically