You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
615 lines
13 KiB
Markdown
615 lines
13 KiB
Markdown
# 🚀 Guide de Setup - Environnement de Développement WSL
|
|
|
|
Ce guide vous accompagne dans la configuration complète de l'environnement de développement pour le projet **BricoLoc Architecture Evolution**.
|
|
|
|
---
|
|
|
|
## 📋 Prérequis
|
|
|
|
### Système d'Exploitation
|
|
|
|
- ✅ **Windows 10/11** avec WSL 2 activé
|
|
- ✅ **Ubuntu 22.04 LTS** (ou version récente)
|
|
|
|
### Outils à Installer
|
|
|
|
| Outil | Version Minimale | Commande de Vérification |
|
|
|-------|------------------|--------------------------|
|
|
| **Node.js** | v20.x ou v22.x | `node --version` |
|
|
| **pnpm** | v9.x | `pnpm --version` |
|
|
| **Git** | 2.x | `git --version` |
|
|
| **VS Code** | Latest | `code --version` |
|
|
|
|
---
|
|
|
|
## 🛠️ Installation Pas-à-Pas
|
|
|
|
### Étape 1 : Vérifier WSL
|
|
|
|
```bash
|
|
# Dans PowerShell (Windows)
|
|
wsl --version
|
|
|
|
# Doit afficher WSL version 2.x
|
|
```
|
|
|
|
Si WSL n'est pas installé :
|
|
```powershell
|
|
# Dans PowerShell Admin
|
|
wsl --install -d Ubuntu-22.04
|
|
```
|
|
|
|
### Étape 2 : Installer Node.js (via nvm)
|
|
|
|
**Pourquoi nvm ?** Permet de gérer plusieurs versions de Node.js facilement.
|
|
|
|
```bash
|
|
# 1. Installer nvm
|
|
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
|
|
|
|
# 2. Recharger le shell
|
|
source ~/.bashrc
|
|
|
|
# 3. Vérifier l'installation
|
|
nvm --version
|
|
|
|
# 4. Installer Node.js LTS
|
|
nvm install --lts
|
|
nvm use --lts
|
|
|
|
# 5. Vérifier
|
|
node --version # Doit afficher v22.x ou v20.x
|
|
npm --version
|
|
```
|
|
|
|
### Étape 3 : Installer pnpm
|
|
|
|
```bash
|
|
# Installer pnpm globalement
|
|
npm install -g pnpm@latest
|
|
|
|
# Vérifier
|
|
pnpm --version # Doit afficher 9.x
|
|
```
|
|
|
|
**Configuration pnpm** (optionnel mais recommandé) :
|
|
```bash
|
|
# Configurer le store global
|
|
pnpm config set store-dir ~/.pnpm-store
|
|
|
|
# Activer le hoisting (pour Next.js)
|
|
pnpm config set shamefully-hoist true
|
|
```
|
|
|
|
### Étape 4 : Configurer Git
|
|
|
|
```bash
|
|
# Configuration de base
|
|
git config --global user.name "Votre Nom"
|
|
git config --global user.email "votre.email@example.com"
|
|
|
|
# Éditeur par défaut (VS Code)
|
|
git config --global core.editor "code --wait"
|
|
|
|
# Alias utiles
|
|
git config --global alias.st status
|
|
git config --global alias.co checkout
|
|
git config --global alias.br branch
|
|
git config --global alias.ci commit
|
|
git config --global alias.lg "log --oneline --graph --all"
|
|
|
|
# Vérifier la configuration
|
|
git config --list
|
|
```
|
|
|
|
### Étape 5 : Cloner le Projet
|
|
|
|
```bash
|
|
# Se placer dans le répertoire home
|
|
cd ~
|
|
|
|
# Cloner le projet (remplacer par votre URL si déjà sur GitHub)
|
|
git clone <URL_DU_REPO> bricoloc-architecture-evolution
|
|
|
|
# OU si vous démarrez localement :
|
|
mkdir -p ~/bricoloc-architecture-evolution
|
|
cd ~/bricoloc-architecture-evolution
|
|
|
|
# Initialiser Git
|
|
git init
|
|
git branch -M main
|
|
```
|
|
|
|
### Étape 6 : Installer les Dépendances
|
|
|
|
```bash
|
|
cd ~/bricoloc-architecture-evolution
|
|
|
|
# Installer les dépendances (une fois le package.json créé)
|
|
pnpm install
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 Configuration VS Code
|
|
|
|
### Extension Recommandées
|
|
|
|
Installer dans VS Code (depuis WSL) :
|
|
|
|
```bash
|
|
# Ouvrir VS Code depuis WSL
|
|
code .
|
|
```
|
|
|
|
**Extensions essentielles** :
|
|
```
|
|
ms-vscode-remote.remote-wsl # WSL support
|
|
dbaeumer.vscode-eslint # ESLint
|
|
esbenp.prettier-vscode # Prettier
|
|
bradlc.vscode-tailwindcss # Tailwind CSS IntelliSense
|
|
prisma.prisma # Prisma (si utilisé)
|
|
ms-playwright.playwright # Playwright tests
|
|
orta.vscode-jest # Jest Runner
|
|
usernamehw.errorlens # Inline errors
|
|
eamodio.gitlens # Git enhanced
|
|
```
|
|
|
|
**Installation automatique** :
|
|
```bash
|
|
# Créer un fichier .vscode/extensions.json (à faire plus tard dans le projet)
|
|
# VS Code proposera d'installer les extensions recommandées
|
|
```
|
|
|
|
### Configuration VS Code (settings.json)
|
|
|
|
Créer `.vscode/settings.json` :
|
|
```json
|
|
{
|
|
"editor.formatOnSave": true,
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
|
"editor.codeActionsOnSave": {
|
|
"source.fixAll.eslint": "explicit",
|
|
"source.organizeImports": "explicit"
|
|
},
|
|
"typescript.preferences.importModuleSpecifier": "non-relative",
|
|
"typescript.tsdk": "node_modules/typescript/lib",
|
|
"files.associations": {
|
|
"*.css": "tailwindcss"
|
|
},
|
|
"tailwindCSS.experimental.classRegex": [
|
|
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
|
|
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
|
|
],
|
|
"[typescript]": {
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
},
|
|
"[typescriptreact]": {
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
},
|
|
"[javascript]": {
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
},
|
|
"[json]": {
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
|
}
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 📦 Configuration du Projet
|
|
|
|
### Étape 7 : Créer la Structure de Base
|
|
|
|
```bash
|
|
cd ~/bricoloc-architecture-evolution
|
|
|
|
# Créer les dossiers principaux (si pas déjà fait)
|
|
mkdir -p apps/legacy apps/moderne packages/microservices packages/shared tools
|
|
|
|
# Créer dossiers microservices
|
|
mkdir -p packages/microservices/{auth,catalogue,reservation,inventory,payment,notification}
|
|
|
|
# Créer dossiers shared
|
|
mkdir -p packages/shared/{types,ui,utils,di,events}
|
|
|
|
# Créer dossiers tools
|
|
mkdir -p tools/{scripts,configs}
|
|
```
|
|
|
|
### Étape 8 : Configuration pnpm Workspaces
|
|
|
|
**Créer `pnpm-workspace.yaml`** à la racine :
|
|
```yaml
|
|
packages:
|
|
- 'apps/*'
|
|
- 'packages/microservices/*'
|
|
- 'packages/shared/*'
|
|
- 'tools/*'
|
|
```
|
|
|
|
**Créer `package.json`** racine :
|
|
```json
|
|
{
|
|
"name": "bricoloc-architecture-evolution",
|
|
"version": "1.0.0",
|
|
"description": "Projet d'architecture démontrant l'évolution de BricoLoc (Legacy → Moderne)",
|
|
"private": true,
|
|
"engines": {
|
|
"node": ">=20.0.0",
|
|
"pnpm": ">=9.0.0"
|
|
},
|
|
"packageManager": "pnpm@9.12.0",
|
|
"scripts": {
|
|
"dev:legacy": "pnpm --filter legacy dev",
|
|
"dev:moderne": "pnpm --filter moderne dev",
|
|
"dev:all": "pnpm --parallel --filter \"./apps/*\" dev",
|
|
"build:legacy": "pnpm --filter legacy build",
|
|
"build:moderne": "pnpm --filter moderne build",
|
|
"build:all": "pnpm --recursive --filter \"./apps/*\" build",
|
|
"lint": "pnpm --recursive lint",
|
|
"test": "pnpm --recursive test",
|
|
"type-check": "pnpm --recursive type-check",
|
|
"clean": "pnpm --recursive clean && rm -rf node_modules"
|
|
},
|
|
"devDependencies": {
|
|
"@types/node": "^22.7.5",
|
|
"eslint": "^9.12.0",
|
|
"prettier": "^3.3.3",
|
|
"typescript": "^5.6.3"
|
|
}
|
|
}
|
|
```
|
|
|
|
**Installer les dépendances** :
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
### Étape 9 : Configuration ESLint + Prettier
|
|
|
|
**Créer `.prettierrc.json`** à la racine :
|
|
```json
|
|
{
|
|
"semi": false,
|
|
"singleQuote": true,
|
|
"tabWidth": 2,
|
|
"trailingComma": "es5",
|
|
"printWidth": 100,
|
|
"arrowParens": "always",
|
|
"endOfLine": "lf"
|
|
}
|
|
```
|
|
|
|
**Créer `.prettierignore`** :
|
|
```
|
|
node_modules
|
|
.next
|
|
dist
|
|
build
|
|
coverage
|
|
*.md
|
|
pnpm-lock.yaml
|
|
```
|
|
|
|
**Créer `eslint.config.mjs`** (ESLint 9 flat config) :
|
|
```javascript
|
|
import js from '@eslint/js'
|
|
import typescript from '@typescript-eslint/eslint-plugin'
|
|
import typescriptParser from '@typescript-eslint/parser'
|
|
|
|
export default [
|
|
js.configs.recommended,
|
|
{
|
|
files: ['**/*.ts', '**/*.tsx'],
|
|
languageOptions: {
|
|
parser: typescriptParser,
|
|
parserOptions: {
|
|
ecmaVersion: 'latest',
|
|
sourceType: 'module',
|
|
},
|
|
},
|
|
plugins: {
|
|
'@typescript-eslint': typescript,
|
|
},
|
|
rules: {
|
|
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
|
|
'@typescript-eslint/no-explicit-any': 'warn',
|
|
'no-console': ['warn', { allow: ['warn', 'error'] }],
|
|
},
|
|
},
|
|
]
|
|
```
|
|
|
|
**Installer les dépendances ESLint** :
|
|
```bash
|
|
pnpm add -D -w @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser
|
|
```
|
|
|
|
### Étape 10 : Configuration TypeScript
|
|
|
|
**Créer `tsconfig.base.json`** à la racine :
|
|
```json
|
|
{
|
|
"compilerOptions": {
|
|
"target": "ES2022",
|
|
"lib": ["ES2022"],
|
|
"module": "ESNext",
|
|
"moduleResolution": "bundler",
|
|
"resolveJsonModule": true,
|
|
"allowJs": true,
|
|
"checkJs": false,
|
|
"jsx": "preserve",
|
|
"declaration": true,
|
|
"declarationMap": true,
|
|
"sourceMap": true,
|
|
"outDir": "./dist",
|
|
"removeComments": true,
|
|
"esModuleInterop": true,
|
|
"forceConsistentCasingInFileNames": true,
|
|
"strict": true,
|
|
"noUnusedLocals": true,
|
|
"noUnusedParameters": true,
|
|
"noImplicitReturns": true,
|
|
"noFallthroughCasesInSwitch": true,
|
|
"skipLibCheck": true,
|
|
"allowSyntheticDefaultImports": true
|
|
},
|
|
"exclude": ["node_modules", "dist", "build", ".next"]
|
|
}
|
|
```
|
|
|
|
**Créer `.gitignore`** :
|
|
```gitignore
|
|
# Dependencies
|
|
node_modules/
|
|
.pnp
|
|
.pnp.js
|
|
|
|
# Production builds
|
|
dist/
|
|
build/
|
|
.next/
|
|
out/
|
|
|
|
# Testing
|
|
coverage/
|
|
.nyc_output
|
|
|
|
# Environment variables
|
|
.env
|
|
.env*.local
|
|
|
|
# Editor
|
|
.vscode/*
|
|
!.vscode/settings.json
|
|
!.vscode/extensions.json
|
|
.idea/
|
|
*.swp
|
|
*.swo
|
|
*~
|
|
|
|
# OS
|
|
.DS_Store
|
|
Thumbs.db
|
|
|
|
# Logs
|
|
*.log
|
|
npm-debug.log*
|
|
yarn-debug.log*
|
|
yarn-error.log*
|
|
pnpm-debug.log*
|
|
|
|
# Misc
|
|
.turbo
|
|
.vercel
|
|
```
|
|
|
|
---
|
|
|
|
## 🗄️ Configuration Supabase
|
|
|
|
### Étape 11 : Créer un Projet Supabase
|
|
|
|
1. **Aller sur** : https://supabase.com/
|
|
2. **Créer un compte** (gratuit)
|
|
3. **Créer un nouveau projet** :
|
|
- Nom : `bricoloc-moderne`
|
|
- Database Password : (noter précieusement)
|
|
- Région : `West Europe (eu-west-1)` ou proche de vous
|
|
|
|
### Étape 12 : Configuration Supabase CLI (Optionnel)
|
|
|
|
```bash
|
|
# Installer Supabase CLI
|
|
npm install -g supabase
|
|
|
|
# Login
|
|
supabase login
|
|
|
|
# Lier le projet local (une fois dans apps/moderne/)
|
|
cd apps/moderne
|
|
supabase init
|
|
supabase link --project-ref <PROJECT_REF>
|
|
```
|
|
|
|
### Étape 13 : Variables d'Environnement
|
|
|
|
**Créer `apps/moderne/.env.local`** :
|
|
```bash
|
|
# Supabase
|
|
NEXT_PUBLIC_SUPABASE_URL=https://<PROJECT_REF>.supabase.co
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=<ANON_KEY>
|
|
SUPABASE_SERVICE_ROLE_KEY=<SERVICE_ROLE_KEY>
|
|
|
|
# Stripe (Test Mode)
|
|
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
|
|
STRIPE_SECRET_KEY=sk_test_...
|
|
STRIPE_WEBHOOK_SECRET=whsec_...
|
|
|
|
# Email (Resend)
|
|
RESEND_API_KEY=re_...
|
|
|
|
# App
|
|
NEXT_PUBLIC_APP_URL=http://localhost:3001
|
|
```
|
|
|
|
**⚠️ Important** : Ajouter `.env*.local` au `.gitignore` (déjà fait)
|
|
|
|
---
|
|
|
|
## ✅ Vérifications Finales
|
|
|
|
### Test 1 : Node.js et pnpm
|
|
|
|
```bash
|
|
node --version # v22.x ou v20.x
|
|
pnpm --version # 9.x
|
|
```
|
|
|
|
### Test 2 : Git Configuration
|
|
|
|
```bash
|
|
git config --list | grep user
|
|
# Doit afficher user.name et user.email
|
|
```
|
|
|
|
### Test 3 : VS Code depuis WSL
|
|
|
|
```bash
|
|
cd ~/bricoloc-architecture-evolution
|
|
code .
|
|
# Doit ouvrir VS Code avec l'extension WSL
|
|
```
|
|
|
|
### Test 4 : pnpm Workspaces
|
|
|
|
```bash
|
|
cd ~/bricoloc-architecture-evolution
|
|
pnpm install
|
|
# Doit installer les dépendances sans erreur
|
|
```
|
|
|
|
### Test 5 : Linting
|
|
|
|
```bash
|
|
# Une fois les fichiers TypeScript créés
|
|
pnpm lint
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Démarrer le Développement
|
|
|
|
### Commandes Principales
|
|
|
|
```bash
|
|
# Développement Legacy
|
|
pnpm dev:legacy
|
|
|
|
# Développement Moderne
|
|
pnpm dev:moderne
|
|
|
|
# Les deux en parallèle
|
|
pnpm dev:all
|
|
|
|
# Build
|
|
pnpm build:all
|
|
|
|
# Tests
|
|
pnpm test
|
|
|
|
# Linting
|
|
pnpm lint
|
|
```
|
|
|
|
### Ports Utilisés
|
|
|
|
| Application | Port | URL |
|
|
|-------------|------|-----|
|
|
| Legacy | `3000` | http://localhost:3000 |
|
|
| Moderne | `3001` | http://localhost:3001 |
|
|
|
|
---
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Problème : `pnpm: command not found`
|
|
|
|
**Solution** :
|
|
```bash
|
|
npm install -g pnpm@latest
|
|
source ~/.bashrc
|
|
```
|
|
|
|
### Problème : VS Code n'ouvre pas depuis WSL
|
|
|
|
**Solution** :
|
|
```bash
|
|
# Installer code dans PATH
|
|
sudo apt update
|
|
sudo apt install wget ca-certificates
|
|
|
|
# Réinstaller VS Code Server
|
|
rm -rf ~/.vscode-server
|
|
code .
|
|
```
|
|
|
|
### Problème : Erreur de permissions Node.js
|
|
|
|
**Solution** :
|
|
```bash
|
|
# Changer le propriétaire du dossier .npm
|
|
sudo chown -R $(whoami) ~/.npm
|
|
sudo chown -R $(whoami) /usr/local/lib/node_modules
|
|
```
|
|
|
|
### Problème : Next.js ne démarre pas
|
|
|
|
**Solution** :
|
|
```bash
|
|
# Nettoyer le cache
|
|
rm -rf apps/moderne/.next
|
|
pnpm install
|
|
pnpm dev:moderne
|
|
```
|
|
|
|
---
|
|
|
|
## 📚 Ressources Utiles
|
|
|
|
### Documentation Officielle
|
|
|
|
- **Node.js** : https://nodejs.org/docs
|
|
- **pnpm** : https://pnpm.io/
|
|
- **Next.js** : https://nextjs.org/docs
|
|
- **Supabase** : https://supabase.com/docs
|
|
- **TypeScript** : https://www.typescriptlang.org/docs
|
|
|
|
### Tutoriels Recommandés
|
|
|
|
- **WSL Setup** : https://learn.microsoft.com/en-us/windows/wsl/
|
|
- **Clean Architecture** : https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
|
|
- **Microservices** : https://microservices.io/
|
|
|
|
---
|
|
|
|
## 🎯 Prochaines Étapes
|
|
|
|
Une fois le setup terminé :
|
|
|
|
1. ✅ Vérifier que tout fonctionne (tests ci-dessus)
|
|
2. 📖 Lire le [README.md](../README.md)
|
|
3. 🏗️ Lire [ARCHITECTURE.md](../ARCHITECTURE.md)
|
|
4. 📝 Consulter la [Roadmap](../roadmap.md)
|
|
5. 💻 Commencer le développement !
|
|
|
|
---
|
|
|
|
**Besoin d'aide ?**
|
|
- Issues GitHub : [URL_REPO]/issues
|
|
- Documentation : `docs/`
|
|
|
|
**Dernière mise à jour** : Octobre 2025
|