Deploy Your Angular App on Firebase.

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.
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.

If you are interested in the source code of this App, you can get it from link of my angular-todo-app 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). 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.

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.

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.

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

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

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

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"
}
],


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

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


...and we are done!!!

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