serebrov / flask-vue-starter

Flask REST + Vue.js/typescript template app, docker setup, tests (pytest and jest), linters and code formatting (black and prettier)

Starter example app: Flask (SQLAlchemy, PostgreSQL) + Vue.js (Typescript), docker setup for backend and frontend.

Backend is powered by Flask, flask-rest-api, marshmallow and SQLAlchemy to create a solid framework for REST API backend development:

• Application structure
• Routing
• Data validation, serialization and de-serialization
• DB layer with ORM and migrations
• API documentation with apispec and Swagger
• Testing with pytest

Backend setup:

• Flask 2
• SQLAlchemy 1.4 and PostgreSQL 13.0
• Marshmallow 3 for validation and serialization
• Testing with pytest
• Linting with mypy, flake8 and black
• Code formatting with black

Frontend setup:

• Vue.js 2.6 with vue-cli 4.0
• Typescript 3.4.5
• axios for HTTP requests
• bootstrap-vue for UI
• Testing with jest
• Linting with typescript, eslint and prettier
• Code formatting with prettier

Note: on linux, to fix permissions between host / docker shared containers, it is necessary to export $UID and $GID variables, this can be done in ~/.bashrc or ~/.zshrc. This is because UID and GID are shell variables, not env variables. It allows to have dependencies (python venv and node.js node_modules shared from the container to the host, so we can have IDE completion on the host, or just easily access the dependencies from the editor). See also: docker/compose#2380.

Backend dependencies are in backend/venv and frontend dependencies are in the frontend/node_modules.

Local Setup

• Rebuild images / reinstall dependencies: make build
• Run docker compose setup: make up
• Create the initial DB (once the setup is running): make recreate-local-db
• Run linters: make lint
• Run tests: make test

Reformat sources: make format-code.

Backend DB Migrations

DB migrations are handled by alembic and Flask-Migrate.

Flask-Migrate runs migrations in the context of flask application, to use it, run make backend-bash and then use one of the following commands:

• flask db migrate -m "change description" - generate new migrations from models
• flask db upgrade - apply migrations to the database
• flask db downgrade - downgrade the database
• flask db --help - get help and list of available commands