Le déploiement d'applications angulaires sur des pages GitHub est un excellent moyen de les héberger gratuitement. Angular est un framework JavaScript populaire pour la création d'applications d'une seule page.

Angular possède une interface de ligne de commande complète qui prend en charge la création et la configuration rapides d'applications JavaScript. La CLI angulaire dispose de plusieurs commandes pour créer, construire, servir et générer des composants d'application.

Vous pouvez également utiliser la CLI pour déployer des applications angulaires sur diverses cibles, y compris les pages GitHub.

De quoi as-tu besoin

Pour tirer le meilleur parti de ce guide, vous devez disposer des compétences et des outils suivants :

  • Vous devriez être familier avec les bases d'Angular, tels que le concept d'applications, de paramètres, d'URL, etc.
  • Vous êtes familier avec les bases de GitHub et Git, comme créer un compte GitHub, créer un référentiel git (repo) et des pages GitHub (GH-pages).
  • Vous avez une application Angular prête à être déployée.
    • instagram viewer
  • Votre URL de base est sur le bon chemin. Les déploiements sur les pages GH échouent en raison de la définition d'une mauvaise base-href (base-url).
  • Un compte GitHub.
  • Un référentiel GitHub (repo) avec le code d'application.

Maintenant que vous avez tout cela en place, commençons le processus de déploiement.

Processus de déploiement

Pour commencer, vous devez avoir créé un référentiel GitHub pour votre projet et poussé le code vers le principal/maître bifurquer.

Ensuite, créez une branche GH-pages.

1. Créer une branche GH-pages

C'est un hack qui vous aidera à obtenir le lien GH-pages pour vous aider à définir la base-href.

Tout d'abord, créez des pages GH dans votre référentiel local avec la commande suivante :

branche git gh-pages

Ensuite, passez de la branche principale aux pages GH pour transférer tout le code.

git checkout gh-pages

Ensuite, poussez GH-pages vers GitHub pour créer une branche GH-pages distante.

git push origin gh-pages

Dans la barre d'outils sous le nom du référentiel, cliquez sur Paramètres > Pages.

Sous Construction et déploiement, sélectionner Déployer à partir d'une succursale. Ensuite, sélectionnez gh-pages comme nom de la succursale, puis cliquez sur Sauvegarder. Cela créera un lien GH-pages en haut à droite sous l'étiquette GH-pages.

Ensuite, copiez ce lien vers le site publié comme illustré ci-dessous. Vous utiliserez le lien pour configurer la référence de base lors du déploiement.

3. Installer Angular-CLI-GHpages

Le package angular-cli-ghpages est un outil que la CLI angulaire utilise à des fins de déploiement.

Revenez à votre référentiel de projet local. Ensuite, installez et exécutez angular-cli-ghpages avec cette commande :

ng ajouter angular-cli-ghpages

4. Déployer l'application

Pour créer l'application en production, vous devez la connecter à un serveur distant sur GitHub.

Configurez votre application sur un serveur distant en exécutant la commande suivante :

ng déploie --base-href=https ://GithubUserName.github.io/GithubRepoName/

N'oubliez pas de remplacer le lien ci-dessus par le lien en direct des pages GH

Une construction réussie ressemblera à l'illustration ci-dessous :

Ensuite, accédez à GitHub et cliquez sur le lien GH-pages pour voir votre projet déployé.

Félicitations, vous avez déployé votre application angulaire !

Si le lien affiche uniquement le fichier README, veuillez revenir aux paramètres des pages GitHub GH. Assurez-vous que la branche sélectionnée est gh-pages et non la branche principale ou principale. Ensuite, donnez-lui cinq minutes et rechargez. Parfois, GitHub prend du temps pour refléter les changements.

Pour en savoir plus sur la façon dont vous pouvez utiliser Angular CLI dans le déploiement, visitez le Documentation angulaire.

Comment déployer une application angulaire sur les pages GitHub

Il existe plusieurs façons de déployer des applications angulaires sur des pages GH, mais cette méthode est la plus simple. Vous configurez votre lien de référentiel GH-pages et l'utilisez avec Angular-CLI pour déployer votre application sur les pages GitHub.

Vous pouvez faire beaucoup plus avec Angular et Angular CLI. N'hésitez pas à explorer. Utilisez la CLI pour déployer des applications sur des pages GH pour une visibilité et un hébergement gratuits pour vos applications.