Com desplegar una aplicació a Firebase amb un cli angular

CLI angular és una interfície de línia d’ordres per a angulars i una de les maneres més senzilles de començar la vostra sol·licitud. Angular CLI té l’avantatge de permetre-vos centrar-vos en el vostre codi, sense haver de preocupar-vos de l’estructura de la vostra sol·licitud, ja que es generen tots els fitxers necessaris per a vosaltres.

És molt fàcil crear llest- aplicacions fetes amb CLI angular. A més, Firebase us permet allotjar ràpidament aplicacions. A més, Firebase té moltes funcions i un paquet gratuït que us permet experimentar amb la plataforma sense estar enllaçada a un paquet de pagament.

El pla lliure té les següents característiques:

  • Test A / B
  • Analytic
  • Indexació de l’aplicació
  • Autenticació
  • Missatgeria de núvols
  • Anàlisi de col·lisió
  • Pregunta
  • seguiment de rendiment
  • prediccions

Condicions requisits previs

Per executar angular cli, tu Ha d’haver instal·lat node.js 6.9 i NPM 3 o superior al vostre sistema. Si no heu instal·lat node.js, visiteu el lloc web del node.js per trobar instruccions a la instal·lació del node.js al vostre sistema operatiu.

També heu de tenir una comprensió bàsica del següent:

  • Programació orientada a objectes
  • javascript o tipografia

Instal·lació del cli angular

Instal·lar cli angular és tan senzill Com:

npm install -g @ angular / cli

L’ordre anterior s’instal·la la darrera versió d’angular. Per validar la instal·lació satisfactòria de CLI angular, simplement inicieu l’ordre següent:

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 

Creació d’una aplicació angular

Ara que heu instal·lat Angular CLI, podem començar a desenvolupar la nostra aplicació. En aquest tutorial, no detallarem els components d’un projecte CLI angular, ja que aquest article se centra en el desplegament de Firebase.

Per crear una nova aplicació, simplement inicieu ng new amb el nom de la vostra sol·licitud.

ng new bucketlist

Aquesta voluntat Creeu tots els fitxers necessaris per començar. Com es pot veure, Angular CLI ha creat molts fitxers que us hauria creat en versions anteriors, és a dir angular V1 ..

Inicieu la vostra aplicació

Per veure la vostra sol·licitud al navegador , aneu a la carpeta del projecte i executeu ng -serve. Aquesta ordre s’utilitza per servir a una aplicació localment.

cd bucketlist ng -serve

Ara, aneu a http: // localhost: 4200 / per veure la vostra sol·licitud en acció . Tots els canvis que feu a la vostra sol·licitud es recarreguen al vostre navegador, de manera que no necessiteu continuar executant l’aplicació ..

Desplegament

Ara que hem creat la nostra sol·licitud, és temps per implementar-lo. Seguirem els següents passos:

  • Crear un projecte de firebase
  • Instal·lar eines de foc de foc
  • Construir per a la producció
  • Desplegueu Firebase

Creació d’una aplicació de bombers

Per començar, heu de tenir un compte de foc de foc. Si no en teniu cap, creeu un compte gratuït ara.

Al tauler de control de Firebase, creeu un nou projecte tal com es mostra a continuació. Simplement podeu donar-li el mateix nom que la vostra aplicació angular. Això facilitarà les coses, sobretot si teniu molts projectes al tauler de control de foc.

Instal·leu les eines de control de Firebase

Firebase facilita la configuració de l’allotjament perquè us proporciona tots els passos a seguir. Per instal·lar les eines de control de Firebase, simplement executeu:

npm install -g firebase-tools

Nota: haureu d’estar al directori del vostre projecte quan executeu aquesta ordre de manera que les eines instal·lades En el vostre projecte ..

autenticar foc de foc

Inicieu sessió a Firebase.

connexion firebase

Respon sí a l’indicador interactiu.

? 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… 

A continuació, l’eina de CLI de Firebase obrirà un navegador en el qual se us demanarà que permeti l’autenticació de Firebase ..

Si l’autenticació té èxit, la següent interfície apareix al vostre navegador a http: // localhost: 9005 //// P>

Inicialitzeu el projecte

El següent pas és inicialitzar el vostre projecte Firebase. Això enllaçarà la vostra aplicació angular local a l’aplicació de Firebase que acabeu de crear. Per això, simplement llançament:

firebase init 

Trieu l’allotjament com a característica que voleu configurar per al projecte perquè ens interessa només per l’allotjament de 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!

Aquesta ordre crearà dos fitxers:

  • .firebaser
  • . Firebase .json

Aquests dos fitxers contenen configuracions de bombers i informació important sobre la vostra sol·licitud.

El fitxer JSON hauria de semblar així:

"hosting": "public": "public", "ignorer": , "réécrit": [ "source": "**", "destination": "/index.html" 

Edifici per a la producció

CLI angular proporciona el ng build --prod Comandament que llança una construcció de producció. Aquesta ordre crea una carpeta dist que conté tots els fitxers per servir a l’aplicació. Aquest procés és important per fer que la vostra aplicació sigui més lleugera i ràpida quan carregueu les pàgines web. Per fer-ho, només publiqueu:

ng build --prod

Desplegueu l’aplicació!

Si heu seguit tots els passos fins a presentar, el nostre local L’aplicació angular està ara lligada a Firebase i podeu transferir fàcilment els vostres fitxers tal com feu amb Git. Simplement executeu l’ordre firebase deploy per implementar la vostra sol·licitud.

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! 

Ara es desplega la vostra aplicació i podeu veure-la llançant l’ordre següent.

firebase open hosting: site

Conclusió

Com heu vist, és molt fàcil començar amb Firebase perquè es necessita molt poca configuració per allotjar la vostra sol·licitud. I triga molt menys temps que la creació d’allotjaments tradicionals! Angular és un marc excel·lent per al desenvolupament d’aplicacions. Realment ha evolucionat al llarg dels anys i cada actualització s’acompanya de funcions més avançades i correccions d’errors.

Per obtenir més informació, visiteu el lloc web oficial angular i Firebase i exploreu les possibilitats. Ús conjunt d’aquestes dues tecnologies ..

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *