Comment Mettre en Ligne une Application React sur GitHub

Aujourd'hui, je vais vous expliquer comment mettre en ligne (déployer) votre application React sur GitHub. Pour montrer votre projet à tout le monde sur Internet. C'est très facile à suivre, même si vous êtes en débutant.

Il faut noter que ça fonctionne seulement pour des applications clientes, si vous avez un backend il est mieux de opter pour une autre solution.

Ce Dont Vous Avez Besoin

• Un projet React : Vous pouvez créer un projet avec la commande npx create-react-app mon-app.
• Un compte GitHub : Inscrivez-vous sur GitHub si ce n'est pas déjà fait.
• Node.js installé sur votre ordinateur.

Étape 1 : Créer un Projet React

Si vous n'avez pas encore de projet, aller dans mon deuxième blogue ici

https://syslog.dti.crosemont.quebec/node/371

Étape 2 : Préparer Votre Projet pour GitHub

1. Ouvrir le fichier package.json

   Dans ce fichier, ajoutez une nouvelle ligne appelée homepage. Elle doit ressembler à ça (remplacez votre-nom-utilisateur et mon-app par vos infos) :

   "homepage": "https://votre-nom-utilisateur.github.io/mon-app",
   

2. Installer le paquet gh-pages

   Dans le terminal, tapez :

   npm install --save gh-pages
   

3. Modifier les scripts dans package.json

   Trouvez la partie "scripts" et ajoutez ces lignes :

   "predeploy": "npm run build",
   "deploy": "gh-pages -d build"
   

   Ça doit ressembler à ça :

       "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
       "predeploy": "npm run build",
       "deploy": "gh-pages -d build"
       },
   

Étape 3 : Créer un Dépôt sur GitHub

1. Aller sur GitHub et créer un nouveau dépôt.

• Cliquez sur le bouton "New" dans votre page d'accueil GitHub.
• Donnez un nom à votre dépôt (par exemple, mon-app).

2. Suivre les instructions qui vous sont données par GitHub pour connecter votre dépôt local au dépôt en ligne. En général, vous allez taper ces commandes dans votre terminal (remplacez l'URL par celle de votre dépôt) :

git init
git add .
git commit -m "Premier commit"
git branch -M main
git remote add origin https://github.com/votre-nom-utilisateur/mon-app.git
git push -u origin main

Étape 4 : Déployer Votre Application

Maintenant que tout est prêt, tapez cette commande dans votre terminal :

npm run deploy

Cette commande va créer une version de votre application dans le dossier build et la mettre en ligne sur GitHub Pages.

Étape 5 : Voir Votre Application en Ligne

Ouvrez votre navigateur et allez à cette adresse :

https://votre-nom-utilisateur.github.io/mon-app

Vous devriez voir votre application React en ligne.

Petit détail

Il est possible que les applications React créée avec le CRA (create-react-app) ne fonctionnent pas au niveau du déploiement. Si c'est le cas je vous conseil d'utiliser vite.js pour initialiser votre projet React.

Conclusion

Voilà, vous êtes maintenant prêt à faire des applications React avancées à partir des concepts de composants jusqu'au déploiment de votre application. Maintenant c'est à vous d'exploiter les connaissances dont j'ai partagé dans mes blogs et de réaliser des projets innovants et amusants.

Bonne chance

Sources

• Code with Ajesh. (2023, 6 février). How to Deploy React App to GitHub Pages | Step by step ! YouTube. https://www.youtube.com/watch?v=7wzuievFjrk