Développement¶

Prérequis¶

Outil	Version	Pourquoi
Node.js	`^20.19.0` ou `>=22.12.0`	Version minimale demandée par `rolldown-vite@7.2.2` et `@vitejs/plugin-react-swc@4.2.1` (champ `engines` de leurs paquets)
npm	celui fourni avec Node	Le dépôt contient un `package-lock.json`

Version de Node

package.json ne fixe aucune version de Node : pas de champ engines ni de fichier .nvmrc.

Lancer en local¶

git clone https://github.com/DuncanCos/RandomDeadlock.git
cd RandomDeadlock
npm install
npm run dev

L'application est servie sur http://localhost:8000 avec rechargement à chaud.

Scripts npm¶

Commande	Exécute	Effet
`npm run dev`	`vite`	Serveur de dev sur le port 8000
`npm run build`	`vite build`	Build de production dans `dist/`
`npm run preview`	`vite preview`	Sert `dist/` en local pour le tester. Il faut lancer `build` avant.
`npm run lint`	`eslint .`	Lint de tous les fichiers `.js` et `.jsx` (`dist/` est exclu)

Configuration du serveur de dev¶

vite.config.js

export default defineConfig({
  plugins: [tailwindcss(), react()],
  server: {
    port: 8000,          // port fixe au lieu du 5173 par défaut
    host: true,          // écoute sur toutes les interfaces (accessible depuis le LAN / un conteneur)
    watch: {
      usePolling: true,  // détection des changements par polling
    },
  },
})

host: true : le serveur accepte aussi les connexions venant d'autres machines du réseau local ou d'un conteneur. Vite affiche les URL « Network » au démarrage.
usePolling: true : au lieu d'attendre les événements du système de fichiers, Vite vérifie lui-même les fichiers à intervalle régulier. Cette option sert surtout en conteneur Docker, sous WSL ou sur un volume réseau, et consomme un peu plus de CPU.

Vite = rolldown-vite

Dans package.json, vite est un alias npm vers rolldown-vite@7.2.2, déclaré dans devDependencies et dans overrides. C'est la variante de Vite qui utilise le bundler Rolldown. Les commandes vite, vite build et vite preview restent les mêmes.

Build¶

npm run build     # génère dist/
npm run preview   # sert dist/ sur http://localhost:4173

Contenu de dist/ :

index.html, qui référence les bundles JS et CSS avec un hash dans le nom (assets/index-<hash>.js, assets/index-<hash>.css)
tout le contenu de public/, copié tel quel : les trois dossiers d'images et vite.svg

Poids du build

dist/ pèse un peu plus de 70 Mo, presque entièrement à cause des images de public/Deadlock_Render_Heroes/. Le code JS et CSS ne pèse presque rien à côté.

Port de preview

server.port ne concerne que npm run dev. npm run preview utilise le port par défaut de Vite, 4173, car vite.config.js ne définit pas de preview.port.

Lint¶

npm run lint

eslint.config.js utilise la configuration « flat » d'ESLint 9 :

@eslint/js recommended
eslint-plugin-react-hooks (recommended-latest)
eslint-plugin-react-refresh (configuration vite)
une règle personnalisée : no-unused-vars ignore les noms qui commencent par une majuscule ou par _

Workflow¶

flowchart LR
  A["Modifier le code / les assets"] --> B["npm run dev<br/>localhost:8000"]
  B --> C["npm run lint"]
  C --> D["npm run build + npm run preview<br/>localhost:4173"]
  D --> E["git push origin main"]
  E --> F["Redéploiement automatique Dokploy"]

Après un push sur main, voir Déploiement.