Déployer une application angulaire sur les pages GitHub

Dans cet article, nous allons créer une application angulaire avec Kendo UI pour Angular, puis la déployer en ligne avec les pages GitHub.

Kendo UI

Kendo UI est une bibliothèque JavaScript de Progress Telerik qui vous aide à créer de superbes interfaces utilisateur pour vos applications Web en toute simplicité. Il contient des tonnes de composants interactifs et accessibles et vous fait gagner du temps en implémentant déjà des fonctionnalités clés de l'interface utilisateur dans les composants. Kendo UI prend en charge tous vos frameworks JS préférés, y compris Angular, donc aucune intégration supplémentaire n'est nécessaire pour l'utiliser. feuilles de calcul, grilles de données, divers types de graphiques et bien plus encore.

Avant de commencer

Ce message convient à tous les niveaux de développeurs front-end qui utilisent Angular.

Pour pouvoir suivre la démonstration de cet article, vous devez avoir :

• VS Code comme environnement de développement intégré
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• Angular CLI version 8.0 ou supérieure
• Angular (Cet exemple utilise la version 12)

Autres éléments utiles :

• Connaissance pratique du framework Angular à un niveau débutant

Qu'est-ce que GitHub Pages ?

GitHub Pages est la plate-forme officielle d'hébergement de sites statiques de GitHub. L'idée est de s'assurer que les développeurs se concentrent sur la création et de laisser GitHub gérer même les besoins de déploiement à partir du même endroit où vous effectuez le contrôle de version et hébergez vos fichiers. ciblant les pages de marque personnelles comme les portfolios. Cela vous permet de déployer sur votre GitHubUsername.github.io.

Pour ce faire, vous devez créer un nouveau référentiel sur GitHub et l'appeler :

.github.io

Après avoir enregistré le référentiel, il crée automatiquement une page GitHub pour vous en utilisant le code HTML à la racine du projet. Vous pouvez également configurer des pages GitHub pour tout nouveau référentiel ou un autre référentiel que vous avez déjà sur GitHub. Aujourd'hui, nous utiliserons un package npm pour configurer des pages GitHub pour notre projet Angular. Assistant de modèle d'interface utilisateur Kendo . Il s'agit de l'extension IDE conçue par l'équipe d'interface utilisateur de Kendo pour vous permettre de créer facilement des applications angulaires en quelques minutes avec une invite de clic.

Ouvrez votre code VS et accédez à l'onglet Extensions et recherchez Kendo. Assistant de modèle d'interface utilisateur, installez-le et rechargez votre application VS Code. Maintenant, vous avez l'assistant. Mettons-nous au travail !

Pour utiliser l'assistant dans l'application VS Code, ouvrez la palette de commandes. Allez dans Affichage -> Palette de commandes, ou utilisez le raccourci Command + Shift + P pour Mac ou Ctrl + Shift + P sur un PC. Sélectionnez l'assistant d'interface utilisateur Kendo et il ouvrira cette invite :

J'ai appelé mes pages de projet, mais vous pouvez l'appeler comme vous le souhaitez. Il vous demandera également où dans votre machine vous souhaitez que ce projet soit généré pour vous.

Après avoir spécifié cela, cliquez sur le bouton "Suivant" et une nouvelle invite vous demandera quel framework vous souhaitez utiliser. build with.

Choisissez Angular. et cliquez sur "Suivant". L'invite suivante veut connaître la structure dans laquelle vous voulez que votre application soit. Je veux une page d'accueil et une autre page vierge vers laquelle je peux acheminer, donc je choisis 1 page vierge :

Vous pouvez jouer avec différentes structures pour voir comment elles sont générées. Après avoir choisi la structure souhaitée, cliquez sur le bouton « Suivant ».

Cette dernière invite concerne le style, donc l'interface utilisateur de Kendo par défaut peut démarrer votre projet avec un style CSS de base ou une conception Bootstrap ou Material. J'ai choisi Bootstrap, et sur la droite, vous pouvez voir le résumé des détails du projet.

Votre application a maintenant été générée, comme ça. Ouvrez le projet dans VS Code et ouvrez un nouveau terminal. Exécutez la commande ci-dessous pour installer tous les packages avec leurs dernières versions.

npm install

Une fois l'installation terminée, testons si tout est correct. Exécutez le serveur de développement angulaire avec cette commande :

ng serve

Ouvrez votre navigateur sur http://localhost:4200/home et vous devriez voir ceci :

Accédez au dossier des composants et assurez-vous que votre composant d'accueil est exactement comme ceci :

<div class="container mt -5">
    <div class='row'>[19659052]<div class='col-12'>
            <h1 class ='bienvenue mb-0'>Bienvenue dans Kendo UI pour Angular</h1>
            <h2 class='sous-en-tête mt-0'>Concentrez-vous sur le cœur de votre application et passez moins de temps à transpirer au dessus de
                UI</h2>
        </div>
    </div>
    <div[19659043]class='row'>
        <div class='col- 12'>
            <h1 class='get-started'>[19659062]Commencer</h1>
        </div>
    </div>
    < div class='ligne justifier-content-center'>
        <div class=[19659045]'col-4 text-right'>
        </div>
        <div class[19659044]='col-4 liste des composants'>
            <p[19659045]>
                <a href='https://www.telerik.com/kendo-angular-ui/components/'[19659045]>Composants</a>
            </p>
            <p>
                <a href='https://www.telerik.com/kendo-angular-ui/components/styling/theme-default/ '>Thème par défaut
                    aperçu</a>
            </p>
            <p>
                <a href='https://www.telerik.com/blogs/tag/kendo-ui-for-angular/'>Articles de blog</a>
            </p>
        </div> 
    </div>
</div>

Déployons maintenant l'application à l'aide des pages GitHub.

Configuration du déploiement

La première chose que nous devons faire est de créer un référentiel sur GitHub pour cette application afin que nous puissions la déployer. Initialisez un nouveau référentiel, appelez-le Pages et transférez-le vers GitHub. Vous pouvez trouver un guide facile à utiliser ici pour le faire.

Maintenant que nous avons créé un référentiel de pages, nous allons utiliser un package npm pour effectuer le travail de déploiement. Prenez note du nom du référentiel car il est très utile.

Angular CLI GHPages

Ce package nous aide à pousser nos applications Angular en production et à les héberger publiquement sur les pages GitHub, le tout via une commande dans Angular CLI. Cool, n'est-ce pas ?

Installons ce package dans notre projet. Ouvrez le terminal dans votre code VS et exécutez cette commande :

ng add angular-cli-ghpages

Angular installera ce package directement à partir de npm et nous sommes prêts à partir. Il ne nous reste plus qu'une chose à faire : déployer notre application ! Cela se fait à l'aide d'une commande :

ng deploy --base-href=Pages

Il faudra un certain temps pour que votre application soit compilée et regroupée, puis vous verrez un message de réussite.

📦 Construire « kendo-angular-seed »
📦 Construire la cible "kendo-angular-seed:build:production"
Génération de bundles ES5 pour le chargement différentiel…
Génération du bundle ES5 terminée.
Téléchargement via git, veuillez patienter…
🌟 Publication réussie via angular-cli-ghpages ! Bonne journée!

Félicitations, votre application a maintenant été déployée sur les pages GitHub. Pour trouver le lien, accédez à votre compte GitHub, ouvrez le référentiel Pages et accédez à l'onglet Paramètres et le tour est joué !

Conclusion[19659003] Dans cet article, nous avons vu ce qu'est l'interface utilisateur de Kendo et comment nous pouvons l'utiliser dans nos applications angulaires pour nous rendre la vie encore plus facile. Nous avons également vu comment nous utilisons le Kendo UI Template Wizard et, enfin, comment nous pouvons déployer nos applications à partir du même endroit où nous hébergeons des projets : GitHub. Bon piratage ! J'ai hâte de voir ce que vous construisez avec ce que vous avez appris.