* créée avec create-react-app
Dans ce tutoriel, je vais vous montrer comment créer une application React et la déployer sur GitHub Pages.
Pour créer l'application React, j'utiliserai create-react-app, qui est un outil permettant de créer une application React de zéro. Pour déployer l'application React, j'utiliserai gh-pages, qui est un paquetage npm que les gens peuvent utiliser pour déployer des choses sur GitHub Pages, un service d'hébergement web gratuit fourni par GitHub.
Si vous suivez ce tutoriel, vous obtiendrez une nouvelle application React - hébergée sur GitHub Pages - que vous pourrez ensuite personnaliser.
Ce tutoriel a été traduit de l'anglais original vers les langues suivantes:
- Chinois traditionnel (crédit: @creaper9487)
- Français (crédit: @soualahmohammedzakaria)
-
Node et npm sont installés. Voici les versions que j'utiliserai lors de la réalisation de ce tutoriel:
$ node --version v16.13.2 $ npm --version 8.1.2
L'installation de npm ajoute deux commandes au système -
npmetnpx- que j'utiliserai toutes deux dans ce tutoriel. -
Git est installé. Voici la version que j'utiliserai pour ce tutoriel :
$ git --version git version 2.29.1.windows.1
-
Un compte GitHub.
- Connectez-vous à votre compte GitHub.
- Visitez le formulaire Créer un nouveau dépôt.
- Remplissez le formulaire comme suit :
-
Nom du dépôt: Vous pouvez entrer le nom que vous voulez.
* Pour un site de projet, vous pouvez entrer le nom que vous voulez. Pour un site utilisateur, GitHub exige que le nom du dépôt ait le format suivant :
{nom d'utilisateur}.github.io(par exemplegitname.github.io)Le nom que vous saisissez apparaîtra à plusieurs endroits : (a) dans les références au dépôt sur GitHub, (b) dans l'URL du dépôt, et (c) dans l'URL de l'application React déployée.
Dans ce tutoriel, je vais déployer l'application React en tant que site de projet.
Je vais entrer :
react-gh-pages -
Confidentialité du dépôt: Sélectionnez Public (ou Privé*).
* Pour les utilisateurs de GitHub Free, le seul type de dépôt qui peut être utilisé avec GitHub Pages est Public. Pour les utilisateurs de GitHub Pro (et les autres utilisateurs payants), les dépôts Public et Privé peuvent être utilisés avec les Pages GitHub.
Je choisirai: Public
-
Initialiser le dépôt: Laissez toutes les cases à cocher vides.
Cela fera en sorte que GitHub crée un dépôt vide, au lieu de pré-remplir le dépôt avec un fichier
README.md,.gitignore, et/ouLICENSE.
-
- Soumettre le formulaire.
A ce stade, votre compte GitHub contient un dépôt vide, avec le nom et le type de confidentialité que vous avez spécifiés.
-
Créez une application React nommée
my-app:Au cas où vous voudriez utiliser un nom différent de
my-app(par exempleweb-ui), vous pouvez le faire en remplaçant toutes les occurrences demy-appdans ce tutoriel, par cet autre nom (c'est-à-diremy-app-->web-ui).$ npx create-react-app my-app
Cette commande créera une application React écrite en JavaScript. Pour en créer une écrite en TypeScript, vous pouvez lancer cette commande à la place:
$ npx create-react-app my-app --template typescript
Cette commande créera un nouveau dossier nommé
my-app, qui contiendra le code source d'une application React.En plus de contenir le code source de l'application React, ce dossier est aussi un dépôt Git. Cette caractéristique du dossier entrera en jeu à l'étape 6.
Le dépôt Git aura une branche, qui sera nommée soit (a)
master, le nom par défaut pour une nouvelle installation de Git ; ou (b) la valeur de la variable de configuration de Git,init.defaultBranch, si votre ordinateur utilise Git version 2.28 ou ultérieure et si vous avez défini cette variable dans votre configuration Git (par exemple via$ git config --global init.defaultBranch main).Comme je n'ai pas défini cette variable dans mon installation Git, la branche dans mon dépôt sera nommée
master. Dans le cas où la branche dans votre dépôt a un nom différent (que vous pouvez vérifier en lançant$ git branch), commemain; vous pouvez remplacer toutes les occurrences demasterdans le reste de ce tutoriel, avec cet autre nom (par exemplemaster→main). -
Entrez dans le dossier nouvellement créé:
$ cd my-app
A ce stade, il y a une application React sur votre ordinateur et vous êtes dans le dossier qui contient son code source. Toutes les autres commandes présentées dans ce tutoriel peuvent être exécutées à partir de ce dossier.
-
Installez le paquet npm
gh-pageset désignez-le comme dépendance de développement:$ npm install gh-pages --save-dev
A ce stade, le paquettage npm gh-pages est installé sur votre ordinateur et la dépendance de l'application React à son égard est documentée dans le fichier package.json de l'application React.
-
Ouvrez le fichier
package.jsondans un éditeur de texte.$ vi package.json
Dans ce tutoriel, l'éditeur de texte que j'utiliserai est vi. Vous pouvez utiliser n'importe quel éditeur de texte ; par exemple, Visual Studio Code.
-
Ajoutez une propriété
homepagedans ce format :https://{nom d'utilisateur}.github.io/{nom du répertoire}* Pour un site de projet, c'est le format. Pour un site utilisateur, le format est le suivant :
https://{nom d'utilisateur}.github.io. Vous pouvez en savoir plus sur la propriétéhomepagedans la section "GitHub Pages" de la documentationcreate-react-app.{ "name": "my-app", "version": "0.1.0", + "homepage": "https://gitname.github.io/react-gh-pages", "private": true,
A ce stade, le fichier package.json de l'application React inclut une propriété nommée homepage.
-
Ouvrez le fichier
package.jsondans un éditeur de texte (s'il n'est pas déjà ouvert dans un).$ vi package.json
-
Ajoutez une propriété
predeployet une propriétédeployà l'objetscripts:"scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build",
A ce stade, le fichier package.json de l'application React inclut des scripts de déploiement.
-
Ajouter un "remote" au dépôt Git local.
Vous pouvez le faire en lançant une commande dans ce format:
$ git remote add origin https://github.com/{username}/{repo-name}.gitPour personnaliser cette commande en fonction de votre situation, remplacez
{nom d'utilisateur}par votre nom d'utilisateur GitHub et remplacez{nom du dépôt}par le nom du dépôt GitHub que vous avez créé à l'étape 1.Dans mon cas, je vais exécuter:
$ git remote add origin https://github.com/gitname/react-gh-pages.git
Cette commande précise à Git où je veux qu'il pousse les choses chaque fois que j'émets - ou que le paquet npm
gh-pagesagit en mon nom - la commande$ git pushà partir de ce dépôt Git local.
A ce stade, le dépôt local a un "remote" dont l'URL pointe vers le dépôt GitHub que vous avez créé à l'étape 1.
-
Mettre l'application React dans le dépôt GitHub
$ npm run deploy
Cela entraînera l'exécution des scripts
predeployetdeploydéfinis danspackage.json.Sous le capot, le script
predeployva construire une version distribuable de l'application React et la stocker dans un dossier nommébuild. Ensuite, le scriptdeployva pousser le contenu de ce dossier vers un nouveau commit sur la branchegh-pagesdu dépôt GitHub, en créant cette branche si elle n'existe pas encore.Par défaut, le nouveau commit sur la branche
gh-pagesaura un message de commit de "Updates". Vous pouvez spécifier un message de livraison personnalisé via l'option-m, comme ceci:$ npm run deploy -- -m "Deploy React app to GitHub Pages"
A ce stade, le dépôt GitHub contient une branche nommée gh-pages, qui contient les fichiers qui composent la version distribuable de l'application React. Cependant, nous n'avons pas encore configuré GitHub Pages pour servir ces fichiers.
- Naviguez vers la page de configuration de GitHub Pages.
- Dans votre navigateur web, naviguez vers le dépôt GitHub
- Au-dessus du navigateur de code, cliquez sur l'onglet "Paramètres"
- Dans la barre latérale, dans la section "Code et automatisation", cliquez sur "Pages"
- Configurez les paramètres "Construction et déploiement" comme suit :
- Source: Déployer à partir d'une branche
- Branche:
- Branche:
gh-pages - Dossier:
/ (root)
- Branche:
- Cliquez sur le bouton "Sauvegarder".
**L'application React a été déployée sur GitHub Pages! :rocket :
A ce stade, l'application React est accessible à toute personne qui visite l'URL homepage que vous avez spécifié à l'étape 4. Par exemple, l'application React que j'ai déployée est accessible à https://gitname.github.io/react-gh-pages.
Dans une étape précédente, le paquetage npm gh-pages a mis la version distribuable de l'application React dans une branche nommée gh-pages dans le dépôt GitHub. Cependant, le code source de l'application React n'est pas encore stocké sur GitHub.
Dans cette étape, je vais vous montrer comment vous pouvez stocker le code source de l'application React sur GitHub.
-
Livrez les changements que vous avez fait pendant que vous suiviez ce tutoriel, à la branche
masterdu dépôt Git local; ensuite, poussez cette branche vers la branchemasterdu dépôt GitHub.$ git add . $ git commit -m "Configure React app for deployment to GitHub Pages" $ git push origin master
Je recommande d'explorer le dépôt GitHub à ce stade. Il y aura deux branches :
masteretgh-pages. La branchemastercontiendra le code source de l'application React, tandis que la branchegh-pagescontiendra la version distribuable de l'application React.
- Le guide officiel de déploiement de
create-react-app - GitHub blog : Construire et déployer des pages GitHub à partir de n'importe quelle branche
- Préserver le fichier
CNAMElors de l'utilisation d'un domaine personnalisé
- Un grand merci à GitHub (la société) pour nous avoir fourni gratuitement le service d'hébergement GitHub Pages.
- Et maintenant, il est temps de transformer l'application React par défaut générée par
create-react-appen quelque chose d'unique! - Ce dépôt consiste en deux branches :
master- le code source de l'application Reactgh-pages- l'application React construite à partir de ce code source
Merci à ces personnes pour avoir contribué à la maintenance de ce tutoriel.
Cette liste est maintenue manuellement - pour l'instant - et inclut (a) chaque personne qui a soumis une pull request qui a finalement été fusionnée dans master, et (b) chaque personne qui a contribué d'une manière différente (par exemple en fournissant un feedback constructif) et qui a approuvé le fait que je l'inclue dans cette liste.