KKodokod
Retour au projet

Sloth Board

Documentation

Guide d'installation, stack technique et limites connues de Sloth Board.

Comment installer

[ 02 ]

Cloner les dépôts

Voici les deux dépôts : backend_sloth/ et frontend_sloth/.

Terminal
git clone https://github.com/Querelio/backend_slothgit clone https://github.com/Querelio/frontend_sloth

[ 03 ]

Docker Compose et .env

Téléchargez docker-compose.yml et .env, placez-les à côté des deux dossiers, puis démarrez les conteneurs. DATABASE_URL utilise localhost.

  • PostgreSQL écoute sur le port 5432 de la machine.
  • pgAdmin : http://localhost:5050. Email et mot de passe : PGADMIN_DEFAULT_EMAIL et PGADMIN_DEFAULT_PASSWORD.
Télécharger docker-compose.yml
docker-compose.yml
services:  postgres:    image: postgres:16    restart: unless-stopped    env_file: .env    ports:      - "5432:5432"    volumes:      - pgdata:/var/lib/postgresql/data  pgadmin:    image: dpage/pgadmin4    restart: unless-stopped    env_file: .env    ports:      - "5050:80"    depends_on:      - postgresvolumes:  pgdata:
Télécharger .env
.env
POSTGRES_USER=slothPOSTGRES_PASSWORD=change-mePOSTGRES_DB=slothPGADMIN_DEFAULT_EMAIL=admin@localhostPGADMIN_DEFAULT_PASSWORD=change-me
Terminal
docker compose up -d

Voici l'architecture obtenue.

Structure du projet
docker-compose.yml
.env
backend_sloth/
├── prisma/
├── src/
├── package.json
└── .env
frontend_sloth/
├── public/
├── src/
├── package.json
└── .env

[ 04 ]

Fichier backend_sloth/.env

Voici backend_sloth/.env. DATABASE_URL reprend l'utilisateur, le mot de passe et la base du .env Docker.

  • Obligatoires pour démarrer : DATABASE_URL et JWT_SECRET.
  • PORT défaut : 3000.
  • JWT_EXPIRES_IN défaut : 7d.
  • CORS_ORIGIN défaut si vide : http://localhost:5173,http://localhost:4173 (5173 = Vite dev, 4173 = Vite preview). Plusieurs origines : les séparer par des virgules, sans espace inutile.
  • SWAGGER_ENABLED : tout sauf la chaîne "false" active Swagger. Défaut : activé.
Télécharger backend_sloth/.env
backend_sloth/.env
DATABASE_URL="postgresql://sloth:change-me@localhost:5432/sloth"JWT_SECRET="une-longue-chaine-secrete"JWT_EXPIRES_IN=7dPORT=3000CORS_ORIGIN=http://localhost:4173SWAGGER_ENABLED=true

[ 05 ]

Backend : installer, migrer, builder, lancer

Depuis backend_sloth/, lancez les commandes suivantes.

  • npm install : Installe aussi les devDependencies. prisma et tsx sont dedans. Ne pas faire npm install --omit=dev avant les migrations : le CLI Prisma ne serait plus là.
  • npx prisma generate : Génère le client dans src/generated/prisma. À faire avant le build : le code Nest importe ce client.
  • npx prisma migrate deploy : Applique les migrations déjà commitées dans prisma/migrations. C'est la commande d'installation et de prod. Ne pas utiliser prisma migrate dev pour installer : migrate dev sert à écrire de nouvelles migrations en développement.
  • npx prisma db seed : Lit prisma/seed.ts (déclaré dans prisma.config.ts). Insère, s'ils n'existent pas : le rôle Intervenant, les modes de prix Heure, Demi-journee, Journee, Forfait, Libre, et les statuts Planifiée, Réalisée, Déclarée, Facturée, Réglée. Ne crée pas d'utilisateur.
  • npm run build : nest build, vers le dossier dist/.
  • npm run start:prod : node dist/main.

API : http://localhost:3000. Swagger : http://localhost:3000/docs.

backend_sloth/
npm installnpx prisma generatenpx prisma migrate deploynpx prisma db seednpm run buildnpm run start:prod

[ 06 ]

Fichier frontend_sloth/.env

Voici frontend_sloth/.env. API_URL est lu au build (vite.config.ts : envPrefix = API_). Le changer après npm run build ne sert à rien : il faut rebuilder.

Télécharger frontend_sloth/.env
frontend_sloth/.env
API_URL=http://localhost:3000

[ 07 ]

Frontend : installer, builder, lancer

Depuis frontend_sloth/, lancez les commandes suivantes.

  • npm run build = tsc -b && vite build, vers le dossier dist/.
  • npm run preview sert ce dossier dist/.
  • Application : http://localhost:4173.
  • Si le front n'est pas sur 4173, mettez la même origine dans CORS_ORIGIN du backend, puis relancez le backend.
frontend_sloth/
npm installnpm run buildnpm run preview

[ 08 ]

Premier compte

Le seed ne crée pas de login. Une fois le frontend lancé, ouvrez l'application et créez le compte dans l'interface, puis connectez-vous.

http://localhost:4173

[ 09 ]

Ordre au quotidien

Première installation, ou après un git pull qui touche prisma/

Docker Compose s'il n'est pas déjà démarré, puis backend, puis frontend.

Terminal
docker compose up -d
backend_sloth/
npm install && npx prisma generate && npx prisma migrate deploy && npx prisma db seed && npm run build && npm run start:prod
frontend_sloth/
npm install && npm run build && npm run preview

Relance simple, schéma inchangé

Docker Compose si la base est arrêtée, puis backend, puis frontend.

Terminal
docker compose up -d
backend_sloth/
npm run start:prod
frontend_sloth/
npm run preview

Nouveau schéma déjà migré dans le dépôt

Depuis backend_sloth/, régénérez le client, appliquez les migrations, puis reconstruisez et relancez.

backend_sloth/
npx prisma generatenpx prisma migrate deploynpm run buildnpm run start:prod

Stack technique

Une application full stack auto-hébergeable : frontend React, backend NestJS avec Prisma, et base de données PostgreSQL.

Frontend

  • React
  • Tailwind CSS

Backend

  • NestJS
  • Prisma

Base de données

  • PostgreSQL

Limites connues

Contenu à venir.