Deploy Your Angular App on Firebase.
Tags: angular, firebase, deployment, webdev
Published: 2019-12-17 08:32:11

Here I am going to share with you how you can deploy your Angular app on Firebase.
In case you don’t know what Firebase is, it’s a mobile and web application development and deployment platform. For more details checkout this [link](https://firebase.google.com/).
I have developed this simple frontend only (No backend) Todo App in Angular which I am going to use to explain how simple it is to deploy your App on Firebase.
If you already have any App ready for deployment you can follow along with me as I am explaining these simple steps in this article.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/llh5wtgn8r5yid0avkbr.jpg)

If you are interested in the source code of this App, you can get it from link of my [angular-todo-app](https://github.com/sanjaysaini2000/angular-todo-app/tree/firebase) GitHub repository.

##Create Firebase Account
In order to deploy your app on Firebase you must first need to have an account on the firebase website ([https://console.firebase.google.com](https://console.firebase.google.com)). The good news is that Firebase expects google account for login and I am sure you already have one otherwise you can create one if you don’t have or you can create another google account for Firebase if you don’t want to use existing one.

##Create New Firebase Project 
Once you are done with the account creation, now create your first Firebase project by clicking on the Add Project button. It’s a 3 steps process.
+ First, provide unique name to your project. In my case I have named it *angular7-todo-app*.
+ Second, enable google analytics for this project, which is by default enabled so click on continue.
+ Finally, configure the google analytics by selecting *“default account for firebase”* from the dropdown field and click on create project.  
It will take 1-2 minutes to create the project and that’s all you need to do on Firebase site for now in order to deploy this Todo app. Although you can do much more with Firebase but that’s not in scope for this article.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1eluay7bvfl338b9cl48.png)

Now we have all the setup needed at the Firebase site done, we are few more steps away from the deployment of our app on Firebase.

##Deploy App with Firebase Tool

We will require Firebase tools installed on the machine for the deployment.

### Install Firebase Tool
So open the command window and navigate to your app project folder and install firebase-tools on your machine via npm by running following command.

`$ npm install –g firebase-tools
`
Next we need to login to Firebase site from the console using following command.

`$ firebase login --interactive
`
This will open the Firebase login in the browser for you to login.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/la93ravl50ep81skib2m.png)

### Initialize Firebase Project
Next we need to initialize Firebase project from our project folder using following command.

`$ firebase init
`
This will start a selection wizard to initialize Firebase project with following steps in the console.
+ Step-1. Select “Y” to proceed and then select Hosting option since we want to only host our app at this moment.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2xi43zaxx01zht87cnpp.png)

+ Step-2. Now select existing project option since we already created Firebase project for this app hosting.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ta77sg0icfbliqj1a5bq.png)

+ Step-3. So now select the newly created Firebase project which in my case is *angular7-todo-app*.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5xtg9uowrc8xkad06h65.png)

+ Step-4. Select “No” to configure the app as single page app since we will configure it by updating *firebase.json* file.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vx2xx5562v6m880yd62t.png)

In the end, Firebase initialization wizard will create following files in the project folder.
>404.html
>Index.html
>.firebaserc
>Firebase.json

Delete this index.html file since you might already have index.html in your app project folder.
Now edit this newly created firebase.json file and add following configuration.

`   "public": "docs",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
`
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/75o5pdunz6x7saowu80x.png)

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e8749ua9n2ti9dez3w5i.png)

### Build App Project
Since we are done with initialization of our Firebase project, now we need to create production release build for our app. 
So run the following command on the command window to generate build files in the “docs” folder.

`$ ng build - -prod 
`

### Deploy the App
With all the setup is done and release build is ready, we are one step away to deploy our app on the Firebase site.
Now run following command to deploy the app.
 
`$ firebase deploy
`
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/iciigdvsjd8g97pb4b4w.png)

...and we are done!!!

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ykqym2fedim2qc62v5l0.png)