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?
risposta
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.
Perché un'app Angular2 deve rispondere Sì a "Configura come app a pagina singola (riscrivi tutti gli URL in /index.html)?" –
questo è così quando scrivi un url casuale viene reindirizzato a index.html ed evita di mostrare 404 per molti casi –
i passaggi qui sotto mostra come distribuire angolare del progetto 2 a Firebase hosting:
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
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?
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 \
Dopo aver terminato domande Firebase riposo, eseguire:
Firebase distribuire
ci vorrà del tempo per caricare tutti i file di progetto, quindi godono !
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.
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
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?". –
Grazie a questi passaggi ha funzionato per me – Heena
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
- 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:
- 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.
- 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 /)
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
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
- 1. utilizzando jQuery globalmente nell'applicazione Angular 2
- 2. Angular 2, come usare setTimeout?
- 3. Firebase: sito non aggiornato dopo aver fatto distribuire Firebase
- 4. Angular 2 Data deserializzazione
- 5. Angular 2 - Supporto multilingue
- 6. Angular 2 - JWT auth
- 7. Angular 2 multiple TemplateRef
- 8. Angular 2 e SignalR
- 9. Come ricevere le risposte BLOB utilizzando il modulo Angular 2+ @ angular/http?
- 10. Django with Angular 2
- 11. Angular 2: Immagini dinamiche
- 12. Angular 2 Multiple validators
- 13. Angular 2 inline editor
- 14. Angular 2 router.navigate
- 15. Che cos'è @angular in Angular 2?
- 16. Come iterare l'oggetto JSON in Angular 2?
- 17. angular 2 OpaqueToken
- 18. Redux and Angular 2
- 19. Angular 2 Staggering Animation
- 20. Come eseguire l'operazione groupBy in Angular 2?
- 21. Angular 2: Come importare correttamente normalize.css
- 22. Test unitari per l'aggiunta di Firebase utilizzando angolare 2
- 23. Rileva messa a fuoco input utilizzando Angular 2+
- 24. Angular 2 ngOnInit non chiamato
- 25. Come distribuire le regole di sicurezza del database Firebase utilizzando la riga di comando?
- 26. Come configurare gulp-typescript per Angular 2?
- 27. Come cancellare un HTTPRequest in Angular 2?
- 28. Come utilizzare FullCalendar all'interno di Angular 2
- 29. Come funziona ImmutableJS con Angular 2?
- 30. Come aggiungere SockJS al progetto Angular 2?
Dovresti leggere i documenti. Se hai un errore o una domanda specifici, ti preghiamo di elaborare. https://firebase.google.com/docs/hosting/ – Cameron637
Ho letto i documenti ma non ho trovato nulla di specifico per Angular 2. –
Ecco una spiegazione più dettagliata dei passaggi: https://firebase.google.com/docs/ hosting/avvio rapido – Cameron637