Utilisation des pages Cloudflare pour héberger votre interface utilisateur Kendo pour l'application angulaire

Dans cet article, nous allons créer et déployer un projet Angular sur les pages Cloudflare.

Qu'est-ce qu'une page Cloudflare ?

Il existe de nombreuses plates-formes que vous pouvez utiliser pour déployer vos applications gratuitement, telles queNetlifier,Base de feu,Pages GitHubet aujourd'hui, nous cherchons à utiliser les pages Cloudflare.

Cloudflare Pages est une plateforme Jamstack permettant aux développeurs de déployer facilement leurs projets en un temps record. L'équipe l'appelle «prenez votre dépôt et partez», ce qui signifie à quel point le déploiement peut être rapide et comment vous n'avez plus à vous soucier des configurations – vous n'avez qu'à vous concentrer sur la construction et la diffusion du code. Ce service de déploiement utilise le robuste réseau périphérique Cloudflare et est livré avec des fonctionnalités dynamiques avec les travailleurs Cloudflare.

Qu'est-ce que l'interface utilisateur de Kendo ?

Kendo UI est une bibliothèque JavaScript de Progress Telerik qui vous aide à créer facilement de superbes interfaces utilisateur pour vos applications Web. Il contient des tonnes de composants interactifs et accessibles et vous fait gagner du temps en implémentant déjà les 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, React, Vue et jQuery, donc aucune intégration supplémentaire n'est nécessaire pour l'utiliser. Kendo UI est également la seule bibliothèque d'interface utilisateur qui offre une prise en charge étendue de la gestion des données sur votre interface utilisateur, vous avez donc accès à des feuilles de calcul, des grilles de données, divers types de graphiques et bien plus encore.

Noter: Kendo UI for Angular est une bibliothèque de composants d'interface utilisateur commerciale, et dans le cadre de cela, vous devrez fournir une clé de licence lorsque vous utilisez les composants dans vos projets Angular. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d'informations, vous pouvez vous diriger versPage de l'interface utilisateur de Kendo pour les licences angulaires.

Avant de commencer

Ce poste est adapté à tous les niveaux de développeurs frontaux qui utilisent Angular, il n'est donc pas supposé d'être familiarisé avec les concepts et les processus d'installation pour débutants. Voici quelques prérequis que vous devriez déjà avoir avant de commencer à suivre la démonstration de cet article :

• VS Code pour votre 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)
• CLI angulaireversion 8.0 ou supérieure
• Une version récente d'Angular (ce post utilise la version 12)

Parmi les autres avantages, citons :

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

Commencer

Le moyen le plus simple de configurer un projet angulaire avec Kendo UI consiste à utiliser leAssistant de modèle d'interface utilisateur de Kendo . Il s'agit de l'extension IDE conçue par l'équipe de Kendo UI pour vous permettre d'échafauder très facilement des applications angulaires en quelques minutes avec une invite de clic.

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

Pour utiliser l'assistant dans l'application VS Code, accédez à et sélectionnez l'assistant de l'interface utilisateur de Kendo et il devrait ouvrir cette invite ci-dessous :

J'ai appelé mon projet Pages, mais vous pouvez lui donner le nom de votre choix. Il vous demandera également à quel endroit de 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 vous serez amené à une nouvelle invite vous demandant quel framework vous souhaitez créer.

Choisissez Angulaire et cliquez sur Suivant. La prochaine invite qui s'affiche 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 il est généré. Après avoir choisi la structure souhaitée, cliquez sur le bouton Suivant.

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

http://localhost:4200/homeet ça devrait ressembler à ça :

div classer="conteneur mt-5"> div classer='ligne'> div classer='col-12'> h1 classer='bienvenue mb-0'>Bienvenue dans l'interface utilisateur de Kendo pour Angular</h1> h2 classer='sous-en-tête mt-0'>Concentrez-vous sur le cœur de votre application et passez moins de temps à transpirer sur l'interface utilisateur</h2> </div> </div> div classer='ligne'> div classer='col-12'> h1 classer='Commencer'>Commencer</h1> </div> </div> div classer='ligne justifier-content-center'> div classer='col-4 texte-droite'> </div> div classer='col-4 liste des composants'> p>une href='https://www.telerik.com/kendo-angular-ui/components/'>Composants</une> </p> p>une href='https://www.telerik.com/kendo-angular-ui/components/styling/theme-default/'>Présentation du thème par défaut</une> </p> p>une href='https://www.telerik.com/blogs/tag/kendo-ui-for-angular/'>Billets de blog</une> </p> </div> </div></div>

Déployons maintenant l'application à l'aide de Cloudflare Pages.

Pousser vers GitHub

La première chose à faire est de créer un nouveau référentiel GitHub, puis de copier le lien du référentiel. Dans votre application VS Code, ouvrez le terminal et exécutez la commande ci-dessous :

git init

Un référentiel git vide sera initialisé. Cliquez sur l'onglet Source Control dans la barre latérale gauche et validez les fichiers avec le message de validation que vous avez choisi.

Pour pousser le projet vers GitHub, exécutez la commande ci-dessous dans votre terminal :

git remote ajouter l'origine repo-link.git

Assurez-vous de remplacer "repo-link" par le lien de référentiel réel que vous avez créé sur GitHub. Cliquez maintenant sur le bouton Publier (vous pouvez également trouver une icône de publication au bas de l'application VS Code).

Configuration des pages Cloudflare

Aller versNuageux et créez un compte si vous n'en avez pas déjà un. Après avoir créé un compte, connectez-vous avec ce compte et cliquez sur Pages dans la barre latérale à gauche.

Conclusion

Dans cet article, nous avons vu comment échafauder facilement une nouvelle application Angular à l'aide de l'extension Kendo UI VS Code Wizard. Nous avons également découvert les pages Cloudflare et comment nos applications peuvent être déployées facilement à l'aide de la plate-forme. Et enfin, nous avons déployé notre première application Angular à l'aide de CloudFlare Pages. Bon piratage !