{"id":17887258,"url":"https://github.com/tomansion/vue3-fastapi-webapp-template","last_synced_at":"2025-03-22T16:31:01.131Z","repository":{"id":231926068,"uuid":"781656833","full_name":"Tomansion/Vue3-FastAPI-WebApp-template","owner":"Tomansion","description":"FastAPI \u0026 Vue3 Web APP Quick start template","archived":false,"fork":false,"pushed_at":"2024-08-14T20:48:17.000Z","size":305,"stargazers_count":10,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T13:32:52.293Z","etag":null,"topics":["arangodb","cspell","docker","docker-compose","documented","educational-project","fastapi","fastapi-template","flake8","makefile","pipeline","python","python-black","python3","swa","template","vuejs","vuetify","webapp","websocket"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tomansion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-03T19:48:21.000Z","updated_at":"2025-02-28T13:03:40.000Z","dependencies_parsed_at":"2024-04-24T20:44:08.149Z","dependency_job_id":"1bc54648-7be0-4e1b-9269-6c2e5026dcbd","html_url":"https://github.com/Tomansion/Vue3-FastAPI-WebApp-template","commit_stats":null,"previous_names":["tomansion/vue3-fastapi-webapp-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tomansion%2FVue3-FastAPI-WebApp-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tomansion%2FVue3-FastAPI-WebApp-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tomansion%2FVue3-FastAPI-WebApp-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tomansion%2FVue3-FastAPI-WebApp-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tomansion","download_url":"https://codeload.github.com/Tomansion/Vue3-FastAPI-WebApp-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244986440,"owners_count":20543012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arangodb","cspell","docker","docker-compose","documented","educational-project","fastapi","fastapi-template","flake8","makefile","pipeline","python","python-black","python3","swa","template","vuejs","vuetify","webapp","websocket"],"created_at":"2024-10-28T13:24:29.228Z","updated_at":"2025-03-22T16:31:00.699Z","avatar_url":"https://github.com/Tomansion.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue3 \u0026 FastAPI WebApp template\n\n[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n\n[![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)\n[![Code style: flake8](https://img.shields.io/badge/code%20style-flake8-1c4a6c.svg)](https://flake8.pycqa.org/en/latest/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n![ci](https://github.com/tomansion/Vue3-FastAPI-WebApp-template/actions/workflows/pull-request-checks.yml/badge.svg)\n![cd](https://github.com/tomansion/Vue3-FastAPI-WebApp-template/actions/workflows/continuous-deployment.yml/badge.svg)\n\n---\n\nThis project is a template for a fullstack web application using [Vue3](https://vuejs.org/) and [FastAPI](https://fastapi.tiangolo.com/). 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.\n\n![](Easy%20notes.png)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cb\u003e\n  \u003ca href=\"https://easynotes.tomansion.fr/\"\u003eLive demo\u003c/br\u003ehttps://easynotes.tomansion.fr/\u003c/a\u003e\n  \u003c/b\u003e\n\u003c/div\u003e\n\n## Template features\n\n- Modern Frameworks and Tools:\n\n  - [**FastAPI**](https://fastapi.tiangolo.com/): A modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints.\n    - [**Web sockets**](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API): The backend includes an example of a WebSocket endpoint that the frontend connects to.q\n  - [**Vue3**](https://vuejs.org/): A progressive JavaScript framework for building user interfaces.\n    - Router: [**Vue Router**](https://router.vuejs.org/): The official router for Vue.js.\n    - State management: [**Pinia**](https://pinia.esm.dev/): A Vue Store that is designed to be used in a modular way.\n    - HTTP client: [**Axios**](https://axios-http.com/): Promise based HTTP client for the browser and Node.js.\n    - [**Vuetify**](https://vuetifyjs.com/): A Material Design component framework for Vue.js.\n  - [**ArangoDB**](https://www.arangodb.com/): A multi-model database system that supports document, key/value, and graph data models.\n\n- Containerization:\n\n  - [**Docker**](https://www.docker.com/): A platform for developing, shipping, and running applications using containerization. This project includes a `Dockerfile` that builds an image of the application.\n  - [**Docker Compose**](https://docs.docker.com/compose/): A tool for defining and running multi-container Docker applications. This project includes a `docker-compose.yml` file that defines the services for the frontend and backend.\n  - **Configuration with environment variables**: The backend uses environment variables to configure the application.\n\n- Code Quality:\n\n  - [**Black**](https://pypi.org/project/black/) and [**Prettier**](https://prettier.io/): Code formatters that automatically format the code.\n  - [**Flake8**](https://flake8.pycqa.org/en/latest/): A tool that checks the code for style and quality.\n  - [**Cspell**](https://cspell.org/): A spell checker that checks the spelling in the code, edit the [`cspell.json`](cspell.json) file to add custom words or languages.\n\n- Testing:\n\n  - [**Pytest**](https://docs.pytest.org/): A testing framework for Python that makes it easy to write small tests.\n\n- Continuous Integration and Continuous Deployment:\n\n  - **GitHub Actions**: This project includes a GitHub Actions workflow that runs the tests, linters, pushes the Docker image to the Docker Hub image registry, and deploys the application by calling an SSH script.\n\n## Getting started\n\n### Running the application in development mode\n\n#### Prerequisites\n\n- [Python](https://www.python.org/downloads/) v3.9+ for the backend.\n- [Node.js](https://nodejs.org/en/download/) v19.0.0c and [npm](https://www.npmjs.com/get-npm) v8.19.2 for the frontend.\n- A running [ArangoDB](https://www.arangodb.com/) instance. [Install it locally](https://arangodb.com/download-major/docker/) or [use a cloud service](https://cloud.arangodb.com/).\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/Tomansion/Vue3-FastAPI-WebApp-template.git\ncd Vue3-FastAPI-WebApp-template\n```\n\n2. Install the backend and frontend dependencies:\n\n```bash\nmake install\n\n# Or manually:\ncd backend\npip install -r requirements.txt\ncd ../frontend\nnpm install\n```\n\n3. Modify the configuration:\n\nFollow the instructions in the [`backend/config/README.md`](backend/config/README.md).\nModifying the configuration is required to give the application access to the ArangoDB instance.\n\n4. Run the backend and frontend:\n\n```bash\nmake run\n\n# Or manually:\ncd backend\nuvicorn websrv:app --reload --host 0.0.0.0 --port 3000\ncd frontend # In another terminal\nnpm run serve\n```\n\n```bash\n# Backend expected output\nINFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)\nINFO:     Started reloader process [125657] using WatchFiles\nNo build directory found. Running in development mode.\n\nInitializing configuration...\n - Set NOTES / NOTES_NUMBER_MAX\n - Set NOTES / NOTES_TITLE_LENGTH_MAX\n - Set NOTES / NOTES_CONTENT_LENGTH_MAX\n - Set ARANGODB / HOST\n - Set ARANGODB / PORT\n - Set ARANGODB / DATABASE\n - Set ARANGODB / USER\n - Set ARANGODB / PASSWORD\n\nConnecting to ArangoDB...\n - Host: ***\n - Port: ***\n - Database: WebAppTemplate\n - User: WebAppTemplate\n - Connection to Arango Arango 3.11.5 established\n\nRunning FastAPI app...\n - FastAPI is available at http://localhost:3000/api\n - Swagger UI is available at http://localhost:3000/docs\n - Redoc is available at http://localhost:3000/redoc\n\nINFO:     Started server process [125659]\nINFO:     Waiting for application startup.\nINFO:     Application startup complete.\n```\n\n5. Open the different services in your browser:\n\n- The application frontend: [http://localhost:8080](http://localhost:8080)\n- The FastAPI backend: [http://localhost:3000](http://localhost:3000)\n- The API SwaggerUI documentation: [http://localhost:3000/docs](http://localhost:3000/docs)\n- The API Redoc documentation: [http://localhost:3000/redoc](http://localhost:3000/docs)\n\n### Running the tests\n\n```bash\n# Install the test dependencies:\nmake install_test\n\n# Run the tests:\nmake test\n\n# Or manually:\ncd backend\npytest --cov-report term --cov=. --cov-report=html -sx\nfirefox htmlcov/index.html\n```\n\n```bash\n# Expected output\nName                         Stmts   Miss  Cover\n------------------------------------------------\nconfig/init_config.py           51     14    73%\nservices/notes_services.py      36      0   100%\nutils/database_utils.py         76      6    92%\n------------------------------------------------\nTOTAL                          163     20    88%\n\n============= 10 passed in 1.52s ===============\n# The detailed coverage report wil be available in the `htmlcov` directory.\n```\n\n### Code quality\n\nThis application provide a [Makefile](./makefile) with some commands to help you with the code quality:\n\n```bash\n# Format the code with Black and Prettier:\nmake format\n\n# Check the code with Black, Prettier, Flake8, and cSpell:\nmake check\n\n# A pipeline is included in the GitHub Actions workflow that runs the linters, so make sure to fix any issues before pushing the code.\n```\n\n### Running the application with [Docker Compose](https://docs.docker.com/compose/)\n\n```bash\n# Clone the repository:\ngit clone https://github.com/Tomansion/Vue3-FastAPI-WebApp-template.git\ncd Vue3-FastAPI-WebApp-template\n\n# Set the docker-compose environment variables\n# More information in the backend/config/config.env file\nnano docker-compose.yml\n\n# Build and run the application with Docker Compose:\ndocker-compose up --build\n```\n\nThe application should be available at: [http://localhost:3000](http://localhost:3000)\n\n### Setting up the GitHub continuous deployment pipeline\n\nThis 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.\n\n#### Prerequisites\n\n- A Linux server with Docker and Docker Compose installed.\n- A [Docker Hub](https://hub.docker.com/) account.\n\n#### Steps\n\n1. Create a new repository from this template and push it to GitHub.\n2. Copy and edit the [`docker-compose.yml`](docker-compose.yml) file to your server.\n   - Edit the images to point to your Docker Hub repository.\n   - Edit the environment variables to match your configuration.\n   - Edit the container names and the other configurations as needed.\n   - Add your Nginx or Traefik configuration if needed.\n3. Create, on your server a `deploy.sh` script with the following content:\n\n```bash\n# deploy.sh\ncd /path/to/your/application\ndocker-compose pull\ndocker-compose up -d\n# Use chmod +x deploy.sh to make the script executable\n```\n\n4. Add the following secrets to your repository:\n   - `DOCKER_USERNAME`: Your Docker Hub username.\n   - `DOCKER_PASSWORD`: Your Docker Hub password.\n   - `SSH_HOST`: The IP address of the server where you want to deploy the application.\n   - `SSH_PORT`: The port to connect to the server.\n   - `SSH_USERNAME`: The username to connect to the server.\n   - `SSH_PASSWORD`: The user password to connect to the server.\n   - `SSH_SCRIPT_PATH`: The absolute path to the `deploy.sh` script on the server.\n5. Modify the `APP_NAME`in the [continuous-deployment.yml](./.github/workflows/continuous-deployment.yml) file to match your application name.\n6. Push the changes to your repository.\n\nThe 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.\n\n### Recommended VSCode extensions\n\n- [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)\n- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- [Black](https://marketplace.visualstudio.com/items?itemName=ms-python.black-formatter)\n- [flake8](https://marketplace.visualstudio.com/items?itemName=ms-python.flake8)\n- [cSpell](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)\n\n## Help\n\nIf you have any questions or need help, feel free to [open an issue](https://github.com/Tomansion/Vue3-FastAPI-WebApp-template/issues).\n\n## Contributing\n\nI'm open to contributions and suggestions. Feel free to [open an issue](https://github.com/Tomansion/Vue3-FastAPI-WebApp-template/issues) or a make a pull request.\n\n## TODO\n\n- [ ] Generate `config.ini.example` and `config.env` files automatically \n- [ ] Custom styles\n- [ ] I18n\n- [ ] Documentation\n- [ ] Authentication\n- [ ] Frontend tests\n- [ ] Frontend to mobile app\n- [x] CI/CD pipeline\n- [x] Demo link\n- [x] Pinia store\n- [x] Arango Database\n- [x] Backend tests and coverage\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomansion%2Fvue3-fastapi-webapp-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomansion%2Fvue3-fastapi-webapp-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomansion%2Fvue3-fastapi-webapp-template/lists"}