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.

13 KiB

Raw Blame History

🚀 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

# Dans PowerShell (Windows)
wsl --version

# Doit afficher WSL version 2.x

Si WSL n'est pas installé :

# 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.

# 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

# Installer pnpm globalement
npm install -g pnpm@latest

# Vérifier
pnpm --version  # Doit afficher 9.x

Configuration pnpm (optionnel mais recommandé) :

# 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

# 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

# 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

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) :

# 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 :

# 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 :

{
  "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

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 :

packages:
  - 'apps/*'
  - 'packages/microservices/*'
  - 'packages/shared/*'
  - 'tools/*'

Créer package.json racine :

{
  "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 :

pnpm install

Étape 9 : Configuration ESLint + Prettier

Créer .prettierrc.json à la racine :

{
  "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) :

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 :

pnpm add -D -w @eslint/js @typescript-eslint/eslint-plugin @typescript-eslint/parser

Étape 10 : Configuration TypeScript

Créer tsconfig.base.json à la racine :

{
  "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 :

# 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

Aller sur : https://supabase.com/
Créer un compte (gratuit)
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)

# 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 :

# 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

node --version   # v22.x ou v20.x
pnpm --version   # 9.x

Test 2 : Git Configuration

git config --list | grep user
# Doit afficher user.name et user.email

Test 3 : VS Code depuis WSL

cd ~/bricoloc-architecture-evolution
code .
# Doit ouvrir VS Code avec l'extension WSL

Test 4 : pnpm Workspaces

cd ~/bricoloc-architecture-evolution
pnpm install
# Doit installer les dépendances sans erreur

Test 5 : Linting

# Une fois les fichiers TypeScript créés
pnpm lint

🚀 Démarrer le Développement

Commandes Principales

# 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 :

npm install -g pnpm@latest
source ~/.bashrc

Problème : VS Code n'ouvre pas depuis WSL

Solution :

# 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 :

# 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 :

# 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é :

✅ Vérifier que tout fonctionne (tests ci-dessus)
📖 Lire le README.md
🏗️ Lire ARCHITECTURE.md
📝 Consulter la Roadmap
💻 Commencer le développement !

Besoin d'aide ?

Issues GitHub : [URL_REPO]/issues
Documentation : docs/

Dernière mise à jour : Octobre 2025

13 KiB Raw Blame History

🚀 Guide de Setup - Environnement de Développement WSL

📋 Prérequis

Système d'Exploitation

Outils à Installer

🛠️ Installation Pas-à-Pas

Étape 1 : Vérifier WSL

Étape 2 : Installer Node.js (via nvm)

Étape 3 : Installer pnpm

Étape 4 : Configurer Git

Étape 5 : Cloner le Projet

Étape 6 : Installer les Dépendances

🔧 Configuration VS Code

Extension Recommandées

Configuration VS Code (settings.json)

📦 Configuration du Projet

Étape 7 : Créer la Structure de Base

Étape 8 : Configuration pnpm Workspaces

Étape 9 : Configuration ESLint + Prettier

Étape 10 : Configuration TypeScript

🗄️ Configuration Supabase

Étape 11 : Créer un Projet Supabase

Étape 12 : Configuration Supabase CLI (Optionnel)

Étape 13 : Variables d'Environnement

✅ Vérifications Finales

Test 1 : Node.js et pnpm

Test 2 : Git Configuration

Test 3 : VS Code depuis WSL

Test 4 : pnpm Workspaces

Test 5 : Linting

🚀 Démarrer le Développement

Commandes Principales

Ports Utilisés

🐛 Troubleshooting

Problème : pnpm: command not found

Problème : VS Code n'ouvre pas depuis WSL

Problème : Erreur de permissions Node.js

Problème : Next.js ne démarre pas

📚 Ressources Utiles

Documentation Officielle

Tutoriels Recommandés

🎯 Prochaines Étapes

13 KiB

Raw Blame History

Problème : `pnpm: command not found`