How to Deploy Angular Application on Firebase Hosting example


Firebase Hosting is production-grade web content hosting, we can quickly deploy web apps by a single command. In the tutorial, we show you how to deploy Angular application on Firebase Hosting.

Related posts:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically


– Angular
– Firebase Hosting


Video Guide


We use Firebase Hosting to deploy Angular application ->




Create Firebase Project

Login to Firebase Account then create a Firebase project as below:

Build Angular Project

– Get Angular’s Sourcecode, then build with below commandline:

ng build --prod --output-path angularapp


-> result:


Install Firebase Tool

– Use below cmd to install Firebase Tool:

npm install -g firebase-tools


Firebase Login

Use Firebase’s CLI tools to login to Firebase:

firebase login

-> Your browser will open to authentication:



Firebase Init

Link our local Angular app to our Firebase Project with below cmd:

firebase init

The list of questions Firebase tools will ask:

  • ? Are you ready to proceed? Yes
  • Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
    ( ) Database: Deploy Firebase Realtime Database Rules
    ( ) Firestore: Deploy rules and create indexes for Firestore
    ( ) Functions: Configure and deploy Cloud Functions
    >(*) Hosting: Configure and deploy Firebase Hosting sites
    ( ) Storage: Deploy Cloud Storage security rules
  • ? Select a default Firebase project for this directory:
    [create a new project]
    [don’t setup a default project]
    > grokonez-angulardeploy (AngularDeploy)
    jsa-cloud-firestore (JSA Cloud Firestore)
    jsa-firebaseauth-6d45a (JSA FirebaseAuth)
    (Move up and down to reveal more choices)
  • ? What do you want to use as your public directory? (public) angularapp
  • ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
  • ? File angularapp/index.html already exists. Overwrite? No


-> Firebase CLI will create 2 files for linking:

.firebaserc file -> Sets the Firebase project we’re linking to :

  "projects": {
    "default": "grokonez-angulardeploy"

firebase.json -> Sets the deployed folder and rewrites :

  "hosting": {
    "public": "angularapp",
    "ignore": [
    "rewrites": [
        "source": "**",
        "destination": "/index.html"

Firebase Deploy

Now we had build Angular application, and result is folder angularapp. We deploy it by cmd:

firebase deploy


-> Results:




We just re-build the Angular application to apply the new changes of our implementation. Then use firebase deploy to re-deploy it on Firebase Hosting.

Automate The Build & Deployment

Open the package.json file, then add a new script as below:

"scripts": {
	"deploy": "ng build --prod --output-path angularapp && firebase deploy"

Then run the cmd:

npm run deploy




By grokonez | December 6, 2018.

Last updated on May 14, 2021.

Related Posts

2 thoughts on “How to Deploy Angular Application on Firebase Hosting example”

  1. Pingback: Jane

Got Something To Say:

Your email address will not be published. Required fields are marked *