Porter sa WPA sur GitHub

Le problème : Développement vs. Production

Lorsque vous travaillez sur votre ordinateur, vous utilisez probablement un serveur de développement (comme celui de Vite ou Create React App). Ce serveur fait beaucoup de travail en arrière-plan : il compile votre code TypeScript/JSX (.tsx) en JavaScript standard que les navigateurs peuvent comprendre, et il le fait à la volée à chaque fois que vous modifiez un fichier.

Cependant, GitHub Pages est un service d'hébergement de fichiers statiques. Il ne fait aucune compilation. Il se contente de servir les fichiers que vous lui donnez, tels quels.

Votre fichier index.html contient cette ligne :
<script type="module" src="/index.tsx"></script>

Un navigateur web ne peut pas exécuter un fichier .tsx directement. Il va donc échouer à charger le script, et par conséquent, votre application React ne démarrera jamais, laissant visible uniquement la couleur de fond de votre page (un gris très sombre, bg-gray-900, qui apparaît comme un écran noir).

La solution : Le "Build"

Pour que votre application fonctionne sur GitHub Pages, vous devez la "compiler" ou la "builder" pour la production avant de la déployer. Cette étape de "build" va :

1. Convertir tous vos fichiers .tsx et .ts en fichiers JavaScript optimisés.

2. Regrouper votre code et ses dépendances en quelques fichiers pour améliorer les performances.

3. Créer un dossier (généralement nommé dist ou build) contenant une version de production de votre site.

Voici les étapes à suivre :

1. Lancer la commande de build : Dans le terminal, à la racine de votre projet, exécutez la commande suivante (selon le gestionnaire de paquets que vous utilisez) :

   • npm run build

   • ou yarn build

2. Déployer le bon dossier : Après l'exécution de la commande, un nouveau dossier dist (ou build) apparaîtra dans votre projet. C'est le contenu de ce dossier que vous devez configurer pour être déployé sur GitHub Pages, et non la totalité de votre projet avec les fichiers sources.

3. (Important) Configurer le chemin de base : Si votre dépôt GitHub est nommé mon-projet, votre site sera accessible à https://votre-nom.github.io/mon-projet/. Vous devez indiquer cela à votre outil de build. Si vous utilisez Vite, par exemple, vous devez modifier votre fichier vite.config.ts pour y ajouter la ligne base:

   codeJavaScript

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [react()],
     base: '/mon-projet/' // Remplacez 'mon-projet' par le nom de votre dépôt GitHub
   })

   Après cette modification, relancez la commande npm run build.

En résumé, le processus correct est : développer localement -> builder le projet -> déployer le dossier . En suivant ces étapes, votre application s'affichera correctement sur GitHub Pages.