Share
Angular CLI è un'interfaccia a riga di comando per Angular e uno dei modi più semplici per avviare la tua app. La bellezza dell'utilizzo di Angular CLI è che ti consente di concentrarti sul tuo codice, senza doversi preoccupare della struttura della tua applicazione, poiché tutti i file necessari vengono generati per te.
È molto facile creare applicazioni pronte per la produzione con Angular CLI. D'altra parte, Firebase rende veloce l'hosting delle applicazioni. Inoltre, Firebase ha molte funzionalità e un piano gratuito che ti permette di sperimentare con la piattaforma senza essere legato a un piano a pagamento.
Il piano gratuito ha le seguenti caratteristiche:
Per eseguire la CLI Angolare, è necessario che nel sistema siano installati Node.js 6.9 e NPM 3 o versioni successive. Se non hai installato Node.js, visita il sito Web Node.js per trovare le istruzioni su come installare Node.js sul tuo sistema operativo.
Dovresti anche avere una conoscenza di base di quanto segue:
Installare Angular CLI è facile come:
npm install -g @ angular / cli
Il comando precedente installa l'ultima versione di Angular. Per convalidare l'installazione corretta di Angular CLI, è sufficiente emettere il seguente comando:
ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ _ _' | | | | | / _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | | | | | (_ | | | | | ___ | | ___ | | / _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ | | ___ / Angular CLI: 6.0.8 Nodo: 10.7.0 SO: linux x64 Angolare: ... Versione pacchetto ------------------- ----------------------------------- @ angular-devkit / architect 0.6.8 @ angular-devkit / core 0.6.8 @ angular-devkit / schemi 0.6.8 @ schematici / angolari 0.6.8 @ schemi / aggiornamento 0.6.8 rxjs 6.2.2 typescript 2.7.2
Ora che hai installato la CLI Angolare, possiamo iniziare a sviluppare la nostra applicazione. In questo tutorial, non approfondiremo i componenti che costituiscono un progetto Angular CLI poiché questo post riguarda principalmente la distribuzione in Firebase.
Per creare una nuova applicazione, basta eseguire nuovo nuovo [nome_di_project], dove tu sostituisci name_of_project con il nome della tua domanda.
Nuova lista dei desideri
Questo creerà tutti i file necessari per iniziare. Come potete vedere, Angular CLI ha creato molti file che altrimenti avreste creato voi stessi nelle versioni precedenti, ad esempio Angular v1.
Per visualizzare la tua applicazione nel browser, vai alla cartella del progetto ed esegui ng -serve. Questo comando è usato per servire un'applicazione localmente.
cd bucketlist ng -serve
Ora vai a http: // localhost: 4200 / per vedere la tua applicazione in azione. Qualsiasi modifica apportata alla tua applicazione viene ricaricata nel tuo browser, quindi non devi continuare a eseguire l'applicazione.
Ora che abbiamo creato la nostra app, è ora di implementarla. Stiamo andando a seguire i seguenti passi:
Per iniziare, devi avere un account Firebase. Se non ne possiedi uno, accedi subito con un account gratuito.
Nella dashboard Firebase, crea un nuovo progetto come mostrato di seguito. Puoi semplicemente dare lo stesso nome della tua app Angular. Ciò renderà tutto più facile, specialmente se hai molti progetti sulla dashboard di Firebase.
Firebase semplifica la configurazione dell'hosting poiché ti fornisce tutti i passaggi da seguire. Per installare gli strumenti di comando Firebase, esegui semplicemente:
npm install -g firebase-tools
Nota: si dovrebbe essere nella directory del progetto quando si esegue questo comando in modo che gli strumenti vengano installati nel progetto.
Accedi a Firebase.
login firebase
Risposta sì al prompt interattivo.
? Consenti a Firebase di raccogliere informazioni sull'utilizzo e sulla segnalazione degli errori anonimi della CLI? Sì Visita questo URL su qualsiasi dispositivo per accedere: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww .googleapis.com% 2Fauth% 2Fcloudplatformprojects.readonly% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Fcloud-piattaforma & response_type = codice & state = 486.130.067 & redirect_uri = http % 3A% 2F% 2Flocalhost% 3A9005 In attesa di autenticazione ...
Successivamente, lo strumento CLI di Firebase aprirà un browser in cui ti verrà chiesto di consentire a Firebase di autenticarsi tramite Google Mail.
Se l'autenticazione ha esito positivo, nel browser verrà visualizzata la seguente interfaccia all'indirizzo http: // localhost: 9005 /.
Il prossimo passo è inizializzare il tuo progetto Firebase. Ciò collegherà l'app Angular locale all'applicazione Firebase appena creata. Per farlo, esegui semplicemente:
firebase init
Scegli Hosting come funzione che vuoi configurare per il progetto poiché siamo interessati solo all'hosting Firebase.
######## #### ######## ######## ######## ### ###### ##### ### ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ### ##### ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## ######## ## ## ###### ######## Stai per inizializzare un Firebase progetto in questa directory: / home / vaatiesther / Desktop / bucketlist? Quali funzionalità di Firebase CLI vuoi configurare per questa cartella? Premere Spazio per selezionare le funzioni, quindi Invio per confermare le scelte. Database: Distribuisci regole del database in tempo reale Firebas e, Hosting: configura e distribuisci siti di hosting Firebase === Impostazione del progetto Innanzitutto, associamo questa directory del progetto a un progetto Firebase. Puoi creare più alias di progetto eseguendo firebase --add, ma per ora installeremo solo un progetto predefinito. ? Seleziona un progetto Firebase predefinito per questa directory: Bucketlist (bucketlist-7 2e57) === Impostazioni database Firebase Le regole del database in tempo reale ti consentono di definire come devono essere strutturati i dati e quando è possibile leggere e scrivere i tuoi dati. ? Quale file dovrebbe essere usato per le regole del database? database.rules.json ✔ Le regole del database per bucketlist-72e57 sono state scaricate su database.rules.json. Le future modifiche a database.rules.json aggiorneranno le regole del database quando si esegue la distribuzione di Firebase. === Hosting Setup La tua directory pubblica è la cartella (relativa alla directory del tuo progetto) che conterrà le risorse di Hosting da caricare con la distribuzione di Firebase. Se si dispone di un processo di compilazione per le risorse, utilizzare la directory di output della build. ? Cosa vuoi usare come directory pubblica? pubblico? Configura come app a pagina singola (riscrivi tutti gli URL in /index.html)? Sì ✔ Scritta public / index.html I Scrittura delle informazioni di configurazione su firebase.json ... i Scrittura delle informazioni sul progetto su .firebaserc ... ✔ Inizializzazione di Firebase completata!
Questo comando creerà due file:
Questi due file contengono le configurazioni di Firebase e alcune informazioni importanti sulla tua app.
Il file JSON dovrebbe assomigliare a questo:
"hosting": "pubblico": "pubblico", "ignora": ["firebase.json", "** /. *", "** / node_modules / **"], "riscrive": [ "source": "**", "destination": "/index.html"]
La CLI angolare fornisce il ng build --prod comando, che avvia una build di produzione. Questo comando crea a dist cartella che contiene tutti i file per servire l'app. Questo processo è importante per rendere la tua app più leggera e veloce nel caricamento delle pagine web. Per fare questo, emetti semplicemente:
ng build --prod
Se hai seguito tutti i passaggi fino ad ora, la nostra app Angular locale ora è collegata a Firebase e puoi facilmente spingere i tuoi file come fai con Git. Basta eseguire il Distribuzione di Firebase comando per distribuire la tua app.
firebase deploy === Deploying to 'bucketlist-72e57' ... Io distribuisco database, hosting i database: controllo delle regole sintassi ... ✔ database: regole sintassi per database bucketlist-72e57 è valido io hosting: preparazione directory pubblica per upload ... ✔ hosting: 1 file caricati con successo i database: regole di rilascio ... ✔ database: regole per database bucketlist-72e57 rilasciato correttamente ✔ Distribuzione completa!
La tua app è ora distribuita e puoi visualizzarla inviando il seguente comando.
Accentsconagua
firebase open hosting: sitoCome hai visto, è molto facile iniziare con Firebase in quanto è necessaria una configurazione minima per ospitare la tua app. E ci vuole molto meno tempo rispetto all'impostazione di hosting tradizionale! Angular è un ottimo framework per lo sviluppo di app, si è davvero evoluto nel corso degli anni e ogni aggiornamento è dotato di funzionalità più avanzate e correzioni di bug.
Per ulteriori informazioni, visita il sito ufficiale Angular e Firebase ed esplora le possibilità di utilizzare queste due tecnologie insieme.
