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.

3.1 KiB Raw Permalink Blame History