Skip to content

README.md

Latest commit

 

History

History
137 lines (101 loc) · 3.27 KB

README.md

File metadata and controls

137 lines (101 loc) · 3.27 KB

Frontend

Frontend application for the Library project.

This part contains the Vue/Vite user interface for authentication, browsing books, authors and categories, reading books, managing profile data, purchases, and admin purchase workflows.

Stack

  • Vue 3
  • Vite
  • TypeScript
  • Vue Router
  • Pinia
  • Axios
  • Nginx for the Docker production image

Structure

frontend/
|-- src/
|   |-- app/             # Root app component
|   |-- components/      # Reusable and feature components
|   |-- pages/           # Route-level views
|   |-- router/          # Vue Router setup
|   `-- shared/
|       |-- api/         # Axios client, endpoint paths, API modules
|       |-- config/      # Runtime environment parsing
|       |-- lib/         # Shared helpers
|       `-- stores/      # Pinia stores
|-- public/
|-- Dockerfile
|-- docker-compose.yml
|-- nginx.conf
|-- package.json
`-- .env.example

Environment

Create a local environment file before running the frontend:

cp .env.example .env

Important variables:

  • FRONTEND_HOST and FRONTEND_PORT configure the Docker service.
  • VITE_API_PREFIX and VITE_API_VERSION build the relative API base path used by the browser.
  • VITE_API_URL is used only by the local Vite dev proxy target and defaults to http://localhost:8000.
  • VITE_APP_NAME controls the displayed application name.
  • VITE_AUTH_MODE controls auth mode. The current app supports cookie and token.
  • VITE_AUTH_TOKEN_COOKIE_NAME configures the cookie name used for admin bearer fallback.
  • VITE_CSRF_COOKIE_NAME and VITE_CSRF_HEADER_NAME must match backend CSRF settings.
  • VITE_S3_PUBLIC_URL points to public MinIO/S3 assets.
  • VITE_PAGE_SIZE, VITE_FREE_LIMIT, and VITE_PROFILE_PAGE_SIZE control pagination and display defaults.

The frontend API client builds requests from:

VITE_API_PREFIX + VITE_API_VERSION

With the example environment this becomes:

/api/v1

In Docker, nginx proxies /api/ requests to the backend container. In local npm run dev, the Vite dev server proxies /api/ requests to VITE_API_URL.

Docker Run

From the repository root, start the whole project:

docker compose up -d --build

From this directory, start only the frontend service:

docker compose up -d --build

Default local URL from .env.example:

http://localhost:3000

Local Development

Install dependencies:

npm install

Run the dev server:

npm run dev

Build for production:

npm run build

Preview the production build locally:

npm run preview

Common Places

  • Root component: src/app/App.vue
  • Routes: src/router/index.ts
  • Pages: src/pages/
  • Layout components: src/components/layout/
  • Book components: src/components/books/
  • Shared API client: src/shared/api/api.ts
  • Endpoint paths: src/shared/api/paths.ts
  • Environment parsing: src/shared/config/env.ts
  • Pinia stores: src/shared/stores/

API Notes

  • Axios is configured with withCredentials: true.
  • CSRF headers are added automatically for unsafe HTTP methods.
  • A refresh request is attempted automatically after a 401 response, except on the refresh endpoint itself.
  • Admin requests attach the Authorization header from the configured auth token cookie.