Comment mettre (gratuitement) votre projet React sur GitHub ?

Create-React-App permet de créer un projet React beaucoup plus facilement, mais en plus de ça, il va nous permettre de déployer super simplement notre site ou application.

Gratuit et rapide : pas besoin de Webpack ou de configurer Babel (tout simple je vous dis).

Après ça, on disposera de notre application React accessible en ligne, avec une adresse (relativement) propre.

Pré-requis : un compte Github, Git, Node.js, npm.

Pour mettre votre projet React sur GitHub, suivez le guide, étape par étape :

1. Avoir (ou créer) un projet « create-react-app », avec la commande :

npx create-react-app nom-de-votre-projet

2. Installer GitHub Pages avec la commande :

npm install gh-pages --save-dev

3. Ajouter « homepage », « predeploy » et « deploy » au fichier package.json à ces endroits :

{
  "name": "random-quote-machine", 
  "version": "0.1.0",
  "private": true,
  "homepage": « https://votre_username_githubgithub.io/votre_nom_de_depot/« ,
    . "scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
  } 

4. Créer un dépôt GitHub et l’ajouter dans son dépôt local (ou pusher son projet dessus)

a. Initialiser git avec la commande :

git init

b. puis faire un premier dépôt avec :

git remote add origin git@github.com:votre_username/nom-de-votre-depot.git

5. Déployer le projet sur la branche GitHub Pages :

npm run deploy

Cette commande créée une branche appelée gh-pages, qu’on pourra ensuite sélectionner comme branche à la place de la branche Master, dans les paramètres de mise en ligne GitHub.

6. Si vous apportez des modifications au projet, commiter /pusher sur la branche Master :

git add .

git commit -m « Votre commentaire de commit ici"

git push origin master

7. Puis exécuter de nouveau la commande npm run deploy pour déployer les changements sur la branche gh-pages :

npm run deploy

Sources / plus d’infos