How to deploy Angular app on Firebase?

I have developed this simple Todo App in Angular which I am going to deploy on Firebase.

You can get the code of this app from my github repository.

https://github.com/sanjaysaini2000/angular-todo-app/tree/firebase

First you need to have account on the firebase website so go to the https://console.firebase.google.com and create your account.

Now create your first firebase project and give it a unique name. In my case I have named it “angular7-todo-app”.

Now install firebase-tools on your machine via npm.

>npm install –g firebase-tools

Next you need to login to firebase from the console using following command.

>firebase login --interactive

This will open the firebase login in the browser for you to login.

Next you need to initialize firebase in the project folder using following command.

>firebase init

This will start a selection wizard in the console.

First -  select “Y” to proceed and then select Hosting option.

Second – now select existing project option.

And select the newly created firebase project.

Third – Select “No” to configure the app as single page app. We will configure it by updating firebase.json file.

  

Firebase initialization process will create following files in the project folder.

404.html

Index.html

.firebaserc

Firebase.json

Note – delete the both html files since we already have index.html in the project folder.

Now edit the firebase.json file and add following configuration.

    "public": "docs",

    "rewrites": [

      {

        "source": "**",

        "destination": "/index.html"

      }

    ],

Note – make sure the outputPath value in the angular.json should be “docs”.

Now run following commad on the console window to generate distributable files in the docs folder.

ng build - -prod

Finally deploy the app using following command.

>firebase deploy

Now open the hosting URL https://angular7-todo-app.firebaseapp.com in the browser.