Fast-Api-Vue

FastAPI Vue Starter App

This repository contains code for asynchronous example api using the Fast Api framework ,Uvicorn server and Postgres Database to perform crud operations on notes.

Accompanying Article

Installation method 1 (Run application locally)

1. Clone this Repo

   git clone (https://github.com/KenMwaura1/Fast-Api-example)

2. Cd into the Fast-Api folder

   cd Fast-Api-example

3. Create a virtual environment

   python3 -m venv venv

4. Activate virtualenv

   source venv/bin/activate

   For zsh users

   source venv/bin/activate.zsh

   For bash users

   source venv/bin/activate.bash

   For fish users

   source venv/bin/activate.fish

5. Cd into the src folder

   cd src

6. Install the required packages

   python -m pip install -r requirements.txt

7. Start the app

   python main.py
   

   7b. Start the app using Uvicorn

   uvicorn app.main:app --reload --workers 1 --host 0.0.0.0 --port 8002
   

8. Ensure you have a Postgres Database running locally. Additionally create a fast_api_dev database with user **fast_api** having required privileges. OR Change the DATABASE_URL variable in the .env file inside then app folder to reflect database settings (user:password/db)

9. Check the app on notes Open your browser and navigate to docs to view the swagger documentation for the api.

Vue Frontend

The is a simple Vue frontend using vite that was added. However it is an optional step in running the application.

Installation

Ensure you have Node.js installed. any version above 16 should work.

While inside the root folder Fast-Api-example

1. Cd into the vue-client folder.

      cd vue-client
   

2. Install the required dependencies. for NPM:

      npm install
   

   for Yarn:

      yarn install
   

3. Start the Vue app for NPM:

      npm run serve
   

   for Yarn:

      yarn serve
   

4. Open your browser and navigate to notes

Installation method 2 (Run Locally using Docker)

1. Ensure Docker is installed.

2. Ensure Docker Compose is installed.

3. Clone this Repo

   git clone (https://github.com/KenMwaura1/Fast-Api-example)

4. Change into the directory

   cd Fast-Api-example

5. Use Docker-Compose to spin up containers

   docker-compose up -d --build

6. If everything completes should be available on notes

7. Docs are generated on docs

Tests

Tests are available using pytest Run them using pytest . while in the root directory (/Fast-Api-example)

Documentation

Open API Documentation is provided by Redoc

Contributing

Contributions are welcome, please open an issue or submit a PR.

Github Actions

Github actions are used to run tests and build the docker image. The docker image is pushed to Docker Hub. Inorder to effectively use the actions you will need to add the following secrets to your repository settings. DOCKER_USERNAME and DOCKER_PASSWORD for the docker hub account. This is to enable the docker login step in the workflow and push the image to the docker hub repository. Alternatively you can remove the step from the workflow by commenting it out.

It is also possible to use Github Packages to store the docker image. In this case you will need to add the following secrets to your repository settings. CR_PAT and CR_USERNAME for the github packages account. In our case the username is the github username. The CR_PAT is a personal access token with the write:packages scope. This is to enable the docker login step in the workflow and push the image to the github packages repository. Alternatively you can remove the step from the workflow by commenting it out.

The docker image is also tagged with the commit sha and pushed to the docker hub repository. This is to enable the image to be pulled by the docker-compose file in the root directory. The docker-compose file is used to spin up the containers locally. It is available on Github Packages as well.

Example of successful workflow run on open pull request:

Example of successful workflow on pr merge:

Docker Hub

Find the docker image on Docker Hub: Fastapi-Vue

License

MIT