Skip to content

Work on the code

Architecture

The website relies on the following technologies and components:

  • Frontend website made in Vue 3
  • Project use Vite who offer a fast development server and an optimized compilation for production (like webpack)
  • The style is made with CSS/SASS and the bootstrap library
  • Typescript used to type
  • Jest used for unit testing

The frontend uses npm workspaces (yarn workspaces) for managing the multi-repo within the project. Yarn workspaces allow for efficient management of dependencies (node_modules) to use only the dependencies that are necessary in each part of the project.

The frontend project is divided into 3 main parts :

  1. "app" folder : This folder contains the entire application and the components of the front office.

  2. "admin" folder : This folder contains the entire application and the components of the admin dashboard.

  3. "shared" folder : This folder contains all the shared code between the two previous folders.

The "app" folder and the "admin" folder contain a similar classic Vue.js architecture with mainly :

  • A "component" folder that contains the Vue web components.
  • A "router" folder for managing the routes of the SPA.
  • A "store" folder that manages the store of the SPA. The store allows data to be transmitted between pages. Here, the store is used only when necessary.
  • A "test" folder that contains the unit tests.
  • A "views" folder that contains the pages.
  • An App.vue file, which is the high-level component of the Vue application.
  • A main.ts file, which is the entry point of the application that initializes the Vue application and indicates which HTML file should be rendered.

Compile and Hot-Reload for Development

  1. Launch your dev server for the App (front office) :
npm run dev:app

or

yarn dev:app
  1. Launch your dev server for the Admin (back office) :
npm run dev:admin

or

yarn dev:admin

Run Unit Tests with Vitest

  1. Run all unit tests :
npm run test:unit

or

yarn test:unit
  1. Run unit tests only for the App folder:
npm run test:unit:app

or

yarn test:unit:app
  1. Run unit tests only for the Admin folder:
npm run test:unit:admin

or

yarn test:unit:admin
  1. Run unit tests only for the Shared folder:
npm run test:unit:shared

or

yarn test:unit:shared

Lint with ESLint

npm run lint

or

yarn lint

Build the application for production

To build and minify all the file to deploy it in production :

npm run deploy

or

yarn deploy

Note : there is a server.js file using express to render the html file builded. You can use the node server.js command.

Documentation

Documentation is located docs folder, and can be served with Mkdocs:

python -m venv env
source ./env/bin/activate
pip install mkdocs-material
mkdocs serve