Comment déployer une application React gratuitement avec les pages GitHub

Si vous avez un projet et que vous souhaitez l'héberger gratuitement sans acheter de domaine, l'utilisation de GitHub Pages est un excellent choix. GitHub Pages convertit vos référentiels en sites Web et vous permet d'héberger un nombre illimité de sites de projets.

Le déploiement d'un site React avec navigation nécessite une configuration supplémentaire par rapport au déploiement d'un site statique. Ce didacticiel vous guide tout au long du processus, de la création d'un référentiel GitHub à la création d'un site hébergé.

Créer une application React

À des fins de démonstration, vous devez créer un projet React avec le routage que vous déploierez plus tard. Cependant, si vous avez déjà un Projet de réaction, n'hésitez pas à sauter cette étape.

Dans le terminal, lancez le créer-réagir-app commande pour échafauder rapidement un projet React :

npx créer-réagir-app réagir-gh

Accédez au dossier créé et démarrez votre application.

démarrage de l'exécution npm

Ensuite, ouvrez le dossier du projet avec votre favori

éditeur de code. Dans le src dossier, supprimez tout sauf App.js et index.js. Remplacez le contenu d'App.js par ce qui suit :

fonction App() {
 retourner (


Pages Github

Déployer React sur Github




 );
}
exporter l'application par défaut ;

Ajouter un routage

Pour ajouter un routage à votre application, commencez par installer réagir-routeur-dom:

npm installer réagir-routeur-dom

Dans App.js, ajoutez le lien vers la page à propos :

importer {Lien} à partir de "react-router-dom" ;
fonction App() {
 retourner (


Sur
Pages Github

Déployer React sur Github




 );
}
exporter l'application par défaut ;

Étant donné que App.js servira de page d'accueil, il vous suffit de créer le Sur composant:

const À propos = () => {
 retourner ( 


Domicile
À propos de la page




 );
}
exporter par défaut À propos ;

Maintenant, vous devez créer les routes et configurer un routeur React.

Modifiez index.js pour faire correspondre l'URL aux composants respectifs :

importer React depuis "react" ;
importer ReactDOM depuis "react-dom" ;
importer l'application depuis "./App" ;
import { HashRouter, Routes, Route } de "react-router-dom" ;
importer A propos de "./About" ;
ReactDOM.render(



} />
}/>


,
 document.getElementById("racine")
);

Remarquez comment vous avez utilisé HashRouter à la place de NavigateurRouteur. En utilisant NavigateurRouteur générerait une erreur 404. En effet, le routage fonctionne différemment dans les pages GitHub. Hashrouter ne génère pas d'erreur car il utilise la partie de hachage de l'URL pour synchroniser l'interface utilisateur avec l'URL.

La dernière étape consiste à valider toutes les nouvelles modifications apportées à Git :

git add .
git commit -m "Créer une application React"

Créer un référentiel GitHub

Depuis Pages GitHub hébergera votre application en convertissant le référentiel en site Web, vous devez créer un référentiel GitHub. Accédez à votre compte GitHub et créez un nouveau référentiel avec le même nom que votre projet.

Ensuite, ajoutez le dépôt GitHub à votre dépôt local en tant que dépôt distant :

git remote ajouter l'origine /.git

Enfin, poussez le dépôt local vers GitHub :

branche git -M main
git push --set-upstream origin principal

Déployer l'application React sur les pages GitHub

Pour utiliser GitHub Pages, vous devez d'abord l'installer :

npm installer gh-pages

gh-pages vous permettra de créer le gh-pages branche où vous allez déployer votre code.

Ensuite, rendez-vous dans votre package.json fichier et ajoutez la page d'accueil qui sera l'URL d'accueil de l'application :

"page d'accueil": "https://.github.io//",
"scripts": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "construction de scripts réactifs",
 "test": "test des scripts réactifs",
 "eject": "éjecter les scripts de réaction"
 }

Exécutez la commande suivante pour terminer le processus de déploiement :

npm exécuter le déploiement

Votre application est maintenant déployée sur GitHub et vous pouvez la visiter sur https://.github.io/.

Faites-en plus avec les pages GitHub

GitHub Pages fournit un moyen simple de déployer gratuitement des sites Web sur Internet. Alors que vous n'avez vu que comment déployer un projet React simple, GitHub Pages vous permet de faire bien plus. Par exemple, vous pouvez créer un blog complet en utilisant Jekyll et même l'héberger en utilisant un domaine personnalisé.

Comment héberger un site Web gratuitement à l'aide des pages GitHub

Lire la suite

A propos de l'auteur