2016-07-08 12 views
5

Desidero conoscere i passaggi necessari per distribuire un'applicazione Angular 2 semplice utilizzando Firebase-hosting.Come distribuire un'app Angular 2 utilizzando l'hosting Firebase?

+0

Dovresti leggere i documenti. Se hai un errore o una domanda specifici, ti preghiamo di elaborare. https://firebase.google.com/docs/hosting/ – Cameron637

+1

Ho letto i documenti ma non ho trovato nulla di specifico per Angular 2. –

+0

Ecco una spiegazione più dettagliata dei passaggi: https://firebase.google.com/docs/ hosting/avvio rapido – Cameron637

risposta

7

Questi sono i passi:

1) npm install -g firebase-tools 

Questo installerà CLI Firebase che useremo nei seguenti passi.

Firebase CLI richiede Node.js versione 0.10.0 o successiva.

2) firebase init 

configurazione Progetto

In tal modo, l'installazione del progetto Firebase e memorizzare tutte le impostazioni in un file locale firebase.json.

  • ? Quali funzionalità di Firebase CLI vuoi configurare per questa cartella? Assicurati che [Hosting: Configura e distribuisca i siti di hosting Firebase] sia selezionato e premi INTRO.

  • ? Quale progetto Firebase vuoi associare come predefinito? Scegliere [creare un nuovo progetto]

Hosting configurazione

  • ? Cosa vuoi usare come directory pubblica? È necessario scegliere la cartella (build) per l'applicazione Angular 2. L'impostazione predefinita è (pubblica).
  • ? Configura come app a pagina singola (riscrivi tutti gli URL in /index.html)? Risposta Sì.

Nota: qualsiasi elemento in questa cartella verrà utilizzato come asset statici.

4) You need to go to (https://console.firebase.google.com) to create a new Project. 
  • Fare clic su (Crea nuovo progetto).

  • Raccogli un nome interessante per il tuo progetto e seleziona un Paese/regione. Ad esempio: Regno Unito.

Il nome del tuo progetto sarà simile a cool-f5b0d.

5) firebase use --add 

Raccogli il progetto che hai appena creato.

  • ? Quale progetto vuoi aggiungere? Scegli il nuovo progetto che hai creato.

  • ? Quale alias vuoi usare per questo progetto? È possibile utilizzare un alias per una facile consultazione

6) firebase deploy

Ciò distribuire la cartella di asset istituito durante la fase 2. Assicurarsi che questo corrisponde alla cartella (build) per il vostro angolare 2 Applicazione.

+0

Perché un'app Angular2 deve rispondere Sì a "Configura come app a pagina singola (riscrivi tutti gli URL in /index.html)?" –

+1

questo è così quando scrivi un url casuale viene reindirizzato a index.html ed evita di mostrare 404 per molti casi –

2

i passaggi qui sotto mostra come distribuire angolare del progetto 2 a Firebase hosting:

  1. genera il progetto, per esempio in WebStorm all'interno terminale comando di marcia:

    pub costruire

Il comando verrà eseguito e creerà una directory build/web che include e il progetto compilato

  1. nella riga di comando inizializzare il progetto Firebase da corsa:

    Firebase init

seguire le istruzioni fino a raggiungere sotto domanda:

What do you want to use as your public directory? 
  1. Qui devi indicare il percorso completo della directory del tuo progetto build/web a partire da home directory. In Windows, ad esempio la home directory è:

    C: \ Users \ YOU-USER-DIRECTORY

quindi se il vostro progetto disponibile in C: \ Users \ progetti USER-directory-\ \ MyProject, poi dare seguito alla directory Firebase:

projects/MyProject/build/web 

assicurarsi di utilizzare davanti taglio su/ non backslash \

  1. Dopo aver terminato domande Firebase riposo, eseguire:

    Firebase distribuire

ci vorrà del tempo per caricare tutti i file di progetto, quindi godono !

3

Do Creare prima un progetto con CLI Angolare.Ottenere più informazioni qui https://cli.angular.io/

Fase 1: creare l'app

Eseguire il seguito cmd per costruire

ng build --prod 

Passaggio 2: Creare progetto Firebase e installare Firebase CLI

Apri la console Firebase allo https://console.firebase.google.com/ e crea un nuovo progetto Firebase.

Per installare gli strumenti della riga di comando Firebase corrono:

npm install -g firebase-tools 

Fase 3: distribuire a Firebase

Eseguire il seguito Firebase cmd per accedere:

firebase login 

Aprirà il browser e chiederti l'autenticazione Accedi con il tuo account Firebase. Lì dopo puoi chiudere la finestra del browser. Sulla riga di comando riceverai il messaggio che il login è stato eseguito con successo.

Ora eseguire il cmd di seguito:

firebase init 

Prima di tutto ti è stato chiesto quale dei client Firebase caratteristiche che si desidera utilizzare. È necessario selezionare l'opzione Hosting: Configura e distribuisci il sito di hosting di Firebase. Successivamente il client Firebase chiederà quale cartella utilizzare per la distribuzione. Digitare dist. Questo è importante perché quella è la posizione in cui è memorizzata la nostra produzione.

Successivamente si pone la domanda se questa app è un'app per singola pagina e se deve riscrivere tutti gli URL in index.html. Nel nostro caso dobbiamo rispondere di si.

L'ultima domanda è se Firebase deve scrivere il file index.html. La risposta a questa domanda è no.

Ora, eseguire il sotto cmd per distribuire:

firebase deploy 

Firebase fornirà un URL che può essere utilizzato per accedere alla vostra domanda on-line.

+0

Ho seguito esattamente i tuoi passi e sull'URL i firebases forniti vedo solo un messaggio che dice Welcome Firebase Hosting Installazione completata Stai vedendo questo perché hai installato con successo Firebase Hosting. Ora è il momento di costruire qualcosa di straordinario! OPEN HOSTING DOCUMENTATION puoi aiutarmi ?? – Zekelonas

+0

Sembra che il file Index.html sia stato sostituito.Durante il processo di firebase init, digitare N, quando la domanda "File dist/index.html esiste già. Sovrascrivi?". –

+1

Grazie a questi passaggi ha funzionato per me – Heena

1

Di seguito sono riportati i passaggi completi che ho seguito e ospitato il mio sito Web correttamente. 1. Prima di tutto è necessario creare un progetto/app nella console di Firebase (Firebase Console).

Dopo la creazione di app/progetto si vedrà come myfirstfbhosting-b0ae ...... Ora siete pronti per installare gli strumenti per caricare i file del tuo sito web

  1. Installa Firebase CLI

La CLI Firebase (riga di comando) richiede un nodo.js e npm, che possono essere entrambi installati seguendo le istruzioni su Node.js software. L'installazione di Node.js installa anche npm.

La CLI di Firebase richiede Node.js versione 0.10.0 o successiva. Una volta che avete Node.js e NPM installati, è possibile installare il Firebase CLI via NPM:

  1. Dopo aver installato Firebase CLI con NPM

Eseguire il comando - " npm install -g firebase-tools "in cmd Questo installa il comando firebase disponibile a livello globale. Per aggiornare alla versione più recente, è sufficiente rieseguire lo stesso comando.

  1. inizializzare la vostra applicazione Una volta scelto l'applicazione Firebase che desideri implementare, cd nella directory del progetto come D:/Pradeep/website/ ed eseguire il comando : "Firebase init" cmd

l'esecuzione del comando Firebase init si vedrà che un file "firebase.json" viene creato nella root del vostro progetto (D:/Pradeep/website /) Nota importante: Aprire firebase.json nel blocco note, se è {}, quindi modificarlo in { "hosting": { "public": "." } } e salvare.

Una cosa più file index.html insieme ad altri file devono trovarsi nella stessa directory (D:/Pradeep/website /)

  1. Selezionare l'applicazione che si crea in console Firebase. Se hai creato più di 1 app lì, seleziona una qualsiasi app per digita in cmd - "lista firebase" - verrà mostrato tutto l'elenco di app. poi - "uso Firebase" e poi

  2. rilasciare il sito di rilasciare il sito è sufficiente eseguire: scrittura in cmd - "Deploy Firebase"

E infine La tua app verrà distribuito a il dominio .firebaseapp.com