diff --git a/README.md b/README.md index d9aca59..9e9ae84 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ [![Formatting with ruff](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/astral-sh/ruff/main/assets/badge/v2.json)](https://github.com/astral-sh/ruff) [![Type checking with pyright](https://microsoft.github.io/pyright/img/pyright_badge.svg)](https://microsoft.github.io/pyright/) [![Security checking with bandit](https://img.shields.io/badge/security-bandit-yellow.svg)](https://github.com/PyCQA/bandit) -![develop](https://github.com/informatter/fullstack-fastapi-rag-sample/actions/workflows/ci_cd.yml/badge.svg?branch=develop) +![Frontend](https://github.com/informatter/fullstack-fastapi-rag-sample/actions/workflows/frontend_ci_cd.yml/badge.svg?branch=develop) +![Backend](https://github.com/informatter/fullstack-fastapi-rag-sample/actions/workflows/backend_ci_cd.yml/badge.svg?branch=develop) # Sample Retrieval Augmented Generation (RAG) Full Stack Application 🤖 🦙 @@ -16,32 +17,34 @@ to swap it for open source models which can be self hosted. - FastAPI ⚡ - Llama Index 🦙 -**tooling** -- auto formatting and linting : [Ruff](https://github.com/astral-sh/ruff) -- data validation : [pydantic](https://github.com/pydantic/pydantic) -- static type checking : [pydantic](https://github.com/microsoft/pyright) -- logging: [structlog](https://github.com/hynek/structlog) -- security: [bandit](https://github.com/openstack/bandit) -- testing : [pytest](https://github.com/pytest-dev/pytest) +- **tooling** + - auto formatting and linting : [Ruff](https://github.com/astral-sh/ruff) + - data validation : [pydantic](https://github.com/pydantic/pydantic) + - static type checking : [pydantic](https://github.com/microsoft/pyright) + - logging: [structlog](https://github.com/hynek/structlog) + - security: [bandit](https://github.com/openstack/bandit) + - testing : [pytest](https://github.com/pytest-dev/pytest) **frontend** - Vue 3 - Typescript -- Vite +- **tooling** + - bundler: [vite](https://vitejs.dev/) + - linting: [eslint](https://eslint.org/) + - formatting: [prettier](https://prettier.io/) + - testing: [vitest](https://vitest.dev/) **Infrastructure** - **AWS** is currently the cloud provider - **GitHub Actions** is currently being used for building the CI/CD pipeline. - **Docker** is currently being used for containarizing the application -- **Kubernetes** Will be used to orchestrate the containers -- **Terraform** Will be used for infrastructure provisioning - - -### Auth -Auth0 will be used as the authentication service and JWTs will be used to authenticate the users of the app with the API. - +- **Auth0** is currently being used for authentication (in the frontend atm) +- **Kubernetes** will be used to orchestrate the containers +- **Terraform** will be used for infrastructure provisioning ### Usage -[backend](https://github.com/informatter/fullstack-fastapi-rag-sample/blob/develop/backend/README.md) +[Backend](https://github.com/informatter/fullstack-fastapi-rag-sample/blob/develop/backend/README.md) + +[Frontend](https://github.com/informatter/fullstack-fastapi-rag-sample/blob/develop/frontend/README.md) diff --git a/backend/README.md b/backend/README.md index f78c72b..c3c56d8 100644 --- a/backend/README.md +++ b/backend/README.md @@ -2,7 +2,8 @@ [![Formatting with ruff](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/astral-sh/ruff/main/assets/badge/v2.json)](https://github.com/astral-sh/ruff) [![Type checking with pyright](https://microsoft.github.io/pyright/img/pyright_badge.svg)](https://microsoft.github.io/pyright/) [![Security checking with bandit](https://img.shields.io/badge/security-bandit-yellow.svg)](https://github.com/PyCQA/bandit) -![develop](https://github.com/informatter/fullstack-fastapi-rag-sample/actions/workflows/ci_cd.yml/badge.svg?branch=develop) + +![Backend](https://github.com/informatter/fullstack-fastapi-rag-sample/actions/workflows/backend_ci_cd.yml/badge.svg?branch=develop) # Backend 🚀 diff --git a/frontend/.gitignore b/frontend/.gitignore index 7b065d6..8ee54e8 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -28,4 +28,3 @@ coverage *.sw? *.tsbuildinfo -*.md diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..1d06735 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,100 @@ + +[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) + +[![code format check: prettier](https://img.shields.io/badge/code_format-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) + +[![js-standard-style](https://img.shields.io/badge/code%20linting-standard-brightgreen.svg)](http://standardjs.com) + +![Frontend](https://github.com/informatter/fullstack-fastapi-rag-sample/actions/workflows/frontend_ci_cd.yml/badge.svg?branch=develop) + +# Frontend 🚀 + +This is the general documentation for the frontend and will be updated as the repo progresses. + + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). + +## Type Support for `.vue` Imports in TS + +TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. + +If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: + +1. Disable the built-in TypeScript Extension + 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` +2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. + +## Customize configuration + +See [Vite Configuration Reference](https://vitejs.dev/config/). + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` + +### Run Unit Tests with [Vitest](https://vitest.dev/) + +```sh +npm run test:unit +``` + +### Lint with [ESLint](https://eslint.org/) + +```bash +npm run lint +``` + +### Check format with [Prettier](https://prettier.io/) +```bash +npm run format-check +``` + +### Format with [Prettier](https://prettier.io/) + +```bash +npm run format +``` + + +### Docker 🐋 +If you don't have docker desktop installed, you need to install it: +https://www.docker.com/products/docker-desktop/ + +**Build the image locally** + +Make sure you are in the same directory as the `Dockerfile`, and run: + +```bash + ./build_image.sh +``` + +Since we are using Vite as the build tool, Vite bakes 🍰 🧑‍🍳 the environment variables when running `vite build` for production. We need to make the local environment variables available to the image when its being built. `build_image.sh` automates all of this process so it does not have to be done manually each time we need to build a new image. + +**Run the container** + +To run the API service your local environment without using Docker Compose: + +```bash +docker run --platform=linux/amd64 -p 5173:80 --rm --name rag-app-local rag-app:local +``` + +The wep application is now running at http://localhost:5173 + +