Deploying Angular Project to Firebase

Create Angular project from scratch with Webpack
Angular Logo Firebase Logo

Required dependencies

npm install -g firebase-tools  

Let’s start by building the package

ng build --prod  

Next login to firebase via CLI(Command Line Interface)

firebase login  

Above command will ask to sign in to google account and will also ask to grant access to the firebase.

Try firebase login --no-localhost, Incase of the above failure.

Now initialize the project with firebase

firebase init  

Above command will ask you some questions, Select accordingly.

  • Choose Hosting by hitting space and then hit enter
  • Change public path to angular’s build path (e.g: /dist)
  • Single page application - Select Y
  • Override index.html - Select N

And finally, enter

firebase deploy  

Deployed!!!

To deploy again with new changes, Simply enter ng build --prod and firebase deploy.


Tip 1
firebase deploy will deploy all the products you have selected while initializing the app (e.g: Hosting, Functions, Firestore, etc)

To deploy a specific product you can pass addition flag as

firebase deploy --only hosting  
firebase deploy --only functions  

Tip 2
To deploy multiple selected products

firebase deploy --only hosting, functions  

Other flags

--only hosting  
--only functions  
--only database  
--only storage  
--only firestore  
--only firestore:rules  
--only firestore:indexes  

Comments