Come distribuire un’applicazione su Firebase con un CLI angolare


Angular CLI è un’interfaccia della riga di comando per angolare e uno dei modi più semplici per avviare l’applicazione. L’Angular CLI ha il vantaggio di permetterti di concentrarti sul tuo codice, senza dover preoccuparti della struttura della tua applicazione, poiché tutti i file necessari sono generati per te ..

è molto facile creare pronto Applicazioni realizzate con cli angolari. Inoltre, FireBase consente di ospitare rapidamente le applicazioni. Inoltre, Firebase ha molte caratteristiche e un pacchetto gratuito che ti consente di sperimentare la piattaforma senza essere collegati a un pacchetto a pagamento.

Il piano gratuito ha le seguenti caratteristiche:

          • Test A / B
          • analitico
          • Indicizzazione dell’applicazione
          • Autenticazione
          • cloud messaging
          • analisi di collisione
          • Prompt
          • tracciamento delle prestazioni
          • previsioni

          Condizioni Prerequisiti

          Per eseguire CLI angolare, tu Deve aver installato Node.js 6.9 e NPM 3 o successivo sul tuo sistema. Se non è stato installato Node.js, visita il sito Web Node.js per trovare le istruzioni sull’installazione del nodo.js sul tuo sistema operativo.

          Devi anche avere una comprensione di base di quanto segue:

          • Programmazione orientata agli oggetti
          • JavaScript o dattiloscritto

          Installazione del cli angolare

          Installare la CLI angolare è semplice Come:

          npm install -g @ angular / cli

          Il comando sopra installa l’ultima versione di Angular. Per convalidare l’installazione riuscita di CLI angolare, è sufficiente avviare il seguente comando:

          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 

          Creazione di un’applicazione angolare

          Ora che hai installato CLI angolare, possiamo iniziare a sviluppare la nostra applicazione. In questo tutorial, non definiremo i componenti di un progetto CLI angolare perché questo articolo si concentra sulla distribuzione di Firebase.

          Per creare una nuova applicazione, è sufficiente avviare ng new , dove si sostituisce nom_du_projet con il nome dell’applicazione.

          ng new bucketlist

          Creare tutti i file necessari per iniziare. Come puoi vedere, Angular CLI ha creato molti file che ti avresti creato nelle versioni precedenti, cioè Angular V1 ..

          Avvia la tua applicazione

          per visualizzare la tua applicazione nel browser , Passare alla cartella del progetto ed eseguire ng -serve. Questo comando viene utilizzato per servire un’applicazione localmente.

          cd bucketlist ng -serve

          Ora, vai su http: // localhost: 4200 / per vedere la tua applicazione in azione . Tutte le modifiche apportate alla tua applicazione vengono ricaricate nel tuo browser, quindi non è necessario continuare a eseguire l’applicazione ..

          Distribuzione

          Ora che abbiamo creato la nostra applicazione, è tempo per distribuirlo. Seguiremo i seguenti passaggi:

          • Creare un progetto FireBase
          • Installare strumenti Firebase
          • Costruct per la produzione
          • Distribuisci Firebase

          Creazione di un’applicazione Firebase

          Per avviare, è necessario disporre di un account Firebase. Se non ne hai uno, crea un account gratuito ora.

          Nella cruscotto di FireBase, creare un nuovo progetto come mostrato di seguito. Puoi semplicemente dargli lo stesso nome della tua applicazione angolare. Ciò faciliterà le cose, specialmente se si dispone di molti progetti sulla cruscotto di FireBase ..

          Installare gli strumenti di controllo Firebase

          Firebase facilita la configurazione dell’alloggio perché ti fornisce tutti i passaggi da seguire. Per installare gli strumenti di controllo di FireBase, è sufficiente eseguire:

          npm install -g firebase-tools

          Nota: è necessario essere nella directory del progetto quando si esegue questo comando in modo che gli strumenti installati nel tuo progetto ..

          Authenticate Firebase

          Accedi a FireBase.

          Rispondi Sì al prompt interattivo.

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

          Avanti, lo strumento CLI FireBase aprirà un browser in cui ti verrà chiesto di consentire l’autenticazione di Birebase tramite Google Mail ..

          Se autenticazione ha esito positivo, la seguente interfaccia viene visualizzata nel tuo browser all’indirizzo http: // localhost: 9005 //// p>

          Inizializza il progetto

          Il passaggio successivo è di inizializzare il tuo progetto FireBase. Questo collegherà la tua applicazione angolare locale all’applicazione FireBase che hai appena creato. Per questo, è sufficiente lanciare:

          firebase init 

          Scegliere l’hosting come funzione che si desidera configurare per il progetto perché siamo interessati solo dall’alloggio di 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!

          Questo comando creerà due file:

          • .firebaser
          • . Firebase .json

          Questi due file contengono configurazioni di firebase e informazioni importanti sulla tua applicazione.

          Il file JSON dovrebbe assomigliare a questo:

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

          Building for Production

          Angular CLI fornisce il comando ng build --prod che avvia una costruzione di produzione. Questo comando crea una cartella dist che contiene tutti i file per servire l’applicazione. Questo processo è importante per rendere l’applicazione più leggera e più veloce durante il caricamento delle pagine Web. Per fare ciò, basta pubblicare:

          ng build --prod

          Distribuisci l’applicazione!

          Se hai seguito tutti i passaggi fino a presentare, il nostro locale L’app angolare è ora collegata a FireBase e puoi facilmente trasferire i tuoi file come fai con Git. Basta eseguire il comando firebase deploy per distribuire la tua applicazione.

          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! 

          L’applicazione è ora implementata e è possibile visualizzarla avvio del seguente comando.

          firebase open hosting: site

          Conclusione

          Come hai visto, è molto facile iniziare con il fuoco di fuoco perché è necessaria una piccola configurazione per ospitare la tua applicazione. E ci vuole molto meno tempo che creare alloggi tradizionali! Angular è un quadro eccellente per lo sviluppo di applicazioni. Si è davvero evoluto nel corso degli anni e ogni aggiornamento è accompagnato da funzionalità più avanzate e correzioni di bug ..

          Per ulteriori informazioni, visitare il sito web ufficiale angolare e Firebase ed esplorare le possibilità. Uso congiunto di queste due tecnologie ..

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *