Share
Angular CLI est une interface de ligne de commande pour Angular et l’un des moyens les plus simples de démarrer votre application. Angular CLI a l'avantage de vous permettre de vous concentrer sur votre code, sans avoir à vous soucier de la structure de votre application, car tous les fichiers nécessaires sont générés pour vous..
Il est très facile de créer des applications prêtes à la production avec Angular CLI. Par ailleurs, Firebase permet d’héberger rapidement des applications. En outre, Firebase possède de nombreuses fonctionnalités et un forfait gratuit qui vous permet d’expérimenter avec la plate-forme sans être lié à un forfait payant..
Le plan gratuit a les caractéristiques suivantes:
Pour exécuter Angular CLI, vous devez avoir installé Node.js 6.9 et NPM 3 ou supérieur sur votre système. Si vous n'avez pas installé Node.js, visitez le site Web de Node.js pour trouver des instructions sur l'installation de Node.js sur votre système d'exploitation..
Vous devez également avoir une compréhension de base des éléments suivants:
Installer Angular CLI est aussi simple que:
npm install -g @ angular / cli
La commande ci-dessus installe la dernière version de Angular. Pour valider l'installation réussie de Angular CLI, lancez simplement la commande suivante:
ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | | / _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | _ | | | (_ | | | | ___ | | ___ | | / _ / \ _ \ _ | | _ | __, | \ __, | __, _ | _ | _ | _, _ | _ | \ ____ | _____ | ___ | | ___ / CLI angulaire: 6.0.8 nœud: 10.7.0 OS: linux x64 angulaire:… Version du package ------------------- ----------------------------------- @ angular-devkit / architect 0.6.8 @ angular-devkit / core 0.6.8 @ angular-devkit / schémas 0.6.8 @ schémas / angulaire 0.6.8 @ schémas / mise à jour 0.6.8 rxjs 6.2.2 dactylographié 2.7.2
Maintenant que vous avez installé Angular CLI, nous pouvons commencer à développer notre application. Dans ce didacticiel, nous ne détaillerons pas les composants d’un projet de CLI angulaire car cet article traite principalement du déploiement sur Firebase..
Pour créer une nouvelle application, lancez simplement ng new [nom_du_projet], où vous remplacez nom_du_projet avec le nom de votre application.
ng new bucketlist
Cela créera tous les fichiers nécessaires pour commencer. Comme vous pouvez le constater, Angular CLI a créé de nombreux fichiers que vous auriez créés vous-même dans des versions antérieures, c’est-à-dire Angular v1..
Pour afficher votre application dans le navigateur, accédez au dossier du projet et exécutez ng -serve. Cette commande est utilisée pour servir une application localement.
cd bucketlist ng -serve
Maintenant, accédez à http: // localhost: 4200 / pour voir votre application en action. Toutes les modifications que vous apportez à votre application sont rechargées dans votre navigateur, vous n'avez donc pas besoin de continuer à exécuter l'application..
Maintenant que nous avons créé notre application, il est temps de la déployer. Nous allons suivre les étapes suivantes:
Pour commencer, vous devez avoir un compte Firebase. Si vous n'en avez pas, allez créer un compte gratuit maintenant.
Sur le tableau de bord Firebase, créez un nouveau projet, comme indiqué ci-dessous. Vous pouvez simplement lui donner le même nom que votre application Angular. Cela facilitera les choses, surtout si vous avez beaucoup de projets sur le tableau de bord Firebase..
Firebase facilite la configuration de l'hébergement, car il vous fournit toutes les étapes à suivre. Pour installer les outils de commande Firebase, exécutez simplement:
npm install -g firebase-tools
Remarque: vous devriez être dans le répertoire de votre projet lorsque vous exécutez cette commande pour que les outils soient installés dans votre projet..
Connectez-vous à Firebase.
connexion firebase
Réponse Oui à l'invite interactive.
? Autoriser Firebase à collecter des informations anonymes sur l’utilisation de la CLI et les rapports d’erreur? Oui Visitez cette URL sur n'importe quel appareil pour vous connecter: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20penid%20+ .googleapis.com% 2Fauth% 2Fcloudplatformprojects.readonly% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% %Fauth% 2%% 2%% 3%%%%%%%%%%% également aussi % 3A% 2F% 2Flocalhost% 3A9005 En attente d'authentification…
Ensuite, l’outil CLI de Firebase ouvrira un navigateur dans lequel il vous sera demandé d’autoriser l’authentification de Firebase via Google Mail..
Si l'authentification réussit, l'interface suivante apparaît dans votre navigateur à l'adresse http: // localhost: 9005 /.
L'étape suivante consiste à initialiser votre projet Firebase. Cela liera votre application Angular locale à l'application Firebase que vous venez de créer. Pour cela, lancez simplement:
firebase init
Choisissez l'hébergement comme fonctionnalité que vous souhaitez configurer pour le projet, car nous ne sommes intéressés que par l'hébergement Firebase..
######## #### ######## ######## ####### ### ###### ##### ### ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ### ##### ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## # ######## ## ## ###### ######## Vous êtes sur le point d'initialiser une base Firebase projet dans ce répertoire: / home / vaatiesther / Desktop / bucketlist? Quelles fonctionnalités CLI de Firebase souhaitez-vous configurer pour ce dossier? Appuyez sur Espace pour sélectionner les fonctionnalités, puis sur Entrée pour confirmer vos choix. Base de données: déployer Firebas e Règles de base de données en temps réel, hébergement: configurer et déployer des sites d'hébergement Firebase === Configuration du projet Associons tout d'abord ce répertoire de projet à un projet Firebase. Vous pouvez créer plusieurs alias de projet en exécutant firebase use --add, mais pour l'instant, nous allons simplement configurer un projet par défaut. ? Sélectionnez un projet Firebase par défaut pour ce répertoire: Bucketlist (bucketlist-7 2e57) === Configuration de la base de données Les règles de base de données Firebase Realtime vous permettent de définir la manière dont vos données doivent être structurées et le moment où elles peuvent être lues et écrites. ? Quel fichier doit être utilisé pour les règles de base de données? database.rules.json ✔ Les règles de base de données pour bucketlist-72e57 ont été téléchargées sur database.rules.json. Les futures modifications apportées à database.rules.json mettront à jour les règles de base de données lorsque vous exécuterez firebase deploy. === Configuration de l'hébergement Votre répertoire public est le dossier (par rapport à votre répertoire de projet) qui contiendra les ressources d'hébergement à télécharger avec firebase deploy. Si vous avez un processus de génération pour vos actifs, utilisez le répertoire de sortie de votre génération. ? Que voulez-vous utiliser comme répertoire public? Publique ? Configurer comme une application d'une seule page (réécrire toutes les URL dans /index.html)? Oui ✔ Écrit public / index.html i Écriture des informations de configuration sur firebase.json… i Écriture des informations de projet sur .firebaserc… ✔ Initialisation de Firebase terminée!
Cette commande créera deux fichiers:
Ces deux fichiers contiennent les configurations Firebase et des informations importantes sur votre application..
Le fichier JSON devrait ressembler à ceci:
"hosting": "public": "public", "ignorer": ["firebase.json", "** /. *", "** / node_modules / **"], "réécrit": [ "source": "**", "destination": "/index.html"
CLI angulaire fournit la ng build --prod commande qui lance une construction de production. Cette commande crée un dist dossier qui contient tous les fichiers pour servir l'application. Ce processus est important pour rendre votre application plus légère et plus rapide lors du chargement de pages Web. Pour ce faire, il suffit de publier:
ng build --prod
Si vous avez suivi toutes les étapes jusqu'à présent, notre application Angular locale est maintenant liée à Firebase et vous pouvez facilement transférer vos fichiers comme vous le faites avec Git. Il suffit d'exécuter le firebase deploy commande pour déployer votre application.
firebase deploy === Déploiement sur 'bucketlist-72e57'… déploiement de la base de données, hébergement de la base de données: vérification de la syntaxe des règles… ✔ base de données: syntaxe des règles pour la base de données bucketlist-72e57 est valide i hébergement: préparation du répertoire public pour le téléchargement… ✔ hébergement: 1 fichiers chargés avec succès dans la base de données: libération des règles… ✔ base de données: règles de la base de données bucketlist-72e57 publiées avec succès ✔ déploiement complet!
Votre application est maintenant déployée et vous pouvez la visualiser en lançant la commande suivante..
Accentsconagua
firebase open hosting: siteComme vous l'avez vu, il est très facile de démarrer avec Firebase car très peu de configuration est nécessaire pour héberger votre application. Et cela prend beaucoup moins de temps que la mise en place d'un hébergement traditionnel! Angular est un excellent cadre pour le développement d'applications. Il a vraiment évolué au fil des ans et chaque mise à jour est accompagnée de fonctionnalités plus avancées et de corrections de bugs..
Pour plus d'informations, visitez le site officiel Angular et Firebase et explorez les possibilités d'utilisation conjointe de ces deux technologies..
