visitapp-web

App visiteur web MyInfoMate — app.myinfomate.be/[slug]

Next.js 14+ (App Router), TypeScript, Tailwind CSS.

---

Prérequis

• Node.js 20+
• npm ou pnpm
• Accès à une instance manager-service (local ou prod)

---

Variables d'environnement

Variable	Description
NEXT_PUBLIC_API_URL	URL de base de manager-service

Créer les fichiers suivants (non commités) :

# .env.local — dev local vers backend local
NEXT_PUBLIC_API_URL=http://localhost:5000

# .env.production.local — build local vers backend prod
NEXT_PUBLIC_API_URL=https://api.myinfomate.be

---

Génération du client API

Le client TypeScript est généré depuis le Swagger de manager-service.

npx @hey-api/openapi-ts -i http://localhost:5000/openapi.json -o src/lib/api/generated

À relancer après chaque modification des DTOs ou endpoints dans manager-service.

---

Développement local

npm install
npm run dev

L'app tourne sur http://localhost:3000.

Pour tester un slug client : http://localhost:3000/nom-du-client

---

Tester un build local pointant vers la prod

# Crée .env.production.local avec NEXT_PUBLIC_API_URL=https://api.myinfomate.be
npm run build
npm run start

Permet de valider le build de production avec les vraies données avant déploiement.

---

Déploiement

Le déploiement est manuel via Docker sur le serveur.

1. Se connecter au serveur

ssh user@server
cd /path/to/manager-service

2. Builder et relancer le conteneur - A VERIFIER AVANT DE LANCER

docker compose -f docker-compose-myinfomate.yml build visitapp-web
docker compose -f docker-compose-myinfomate.yml up -d visitapp-web

3. Vérifier

docker compose -f docker-compose-myinfomate.yml logs -f visitapp-web

L'app est accessible sur https://app.myinfomate.be.

---

Structure du projet

src/
├── app/
│   ├── [slug]/
│   │   ├── layout.tsx          # Fetch config client, inject thème CSS
│   │   ├── page.tsx            # Accueil (grille configurations)
│   │   ├── sections/
│   │   │   └── [sectionId]/
│   │   │       └── page.tsx    # Dispatcher par type de section
│   │   ├── agenda/
│   │   ├── map/
│   │   └── ...
│   └── layout.tsx              # Root layout
├── lib/
│   ├── api/                    # Client généré depuis OpenAPI manager-service
│   └── i18n.ts                 # Helper traductions (TranslationDTO[])
├── components/
│   ├── ui/                     # Composants génériques
│   └── sections/               # Un composant par type de section
└── context/
    └── VisitorContext.tsx      # Langue sélectionnée, config client

---

Theming multi-client

Le thème est injecté dynamiquement depuis ConfigurationDTO :

:root {
  --color-primary: #e52122;
  --color-secondary: #ed7082;
}

Tous les composants utilisent var(--color-primary) — aucune config par client côté code, tout vient du backend.