Deploy an Angular App to Firebase

Introduction

 

In this article, we will learn how to deploy Angular in firebase.

 

What is Firebase?

 

It allows us to create web development applications without server-side programming, and its supports web, iOS, and Android platforms.

 

Firebase Deployment

 

We can follow the instructions for Firebase deployment, shown below:

• Create a Firebase Project
• Install Firebase tools
• Build for production
• Deploy to Firebase

Installing AngularCLI

 

Let’s get started by installing Angular CLI, which is the official tool for creating and working with Angular projects. Open a new terminal and run the below command.

 

npm install --g @angular/cli@next

 

Steps to follow:

 

Step 1

 

Create an Angular project setup using the below command, or however you want to create it.

 

ng new projectname

 

Example:

 

ng new angular-firebase

 

 

 

Step 2

 

Now, we must install Firebase in our Angular app. Open a new terminal and run the below command.

 

npm install firebase @angular/fire –save

 

 

 

Step 3 - Install Firebase Command Tools

 

Without Firebase tools, we will not be able to deploy Angular applications. Now, we will install firebase tools in our run command.

 

npm install -g firebase-tools

 

 

 

Step 4 - Log in to Firebase

 

Now, we must log in to the Firebase project.

 

 

 

Step 5 - Env setup

 

Set up env, and include your Firebase credentials in the same manner as below:

export const environment = {
    production: true,
    firebase: {
        apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
};

Step 6

 

Once you've logged into the firebase account, then run the command to initialize the Firebase.

 

firebase init

 

 

 

In firebasecli, the features are:

• Database
• Functions
• Storage
• Hosting
• Firestore

Select the feature for database and Hosting.

 

 

 

Step 7

 

Now, Run the application

 

ng build --prod –aot

 

 

 

Now, we will see following the Folder structure in our project

 

 

 

Step 8 - Firebase Deployment

 

Finally, we will deploy our cloud server using firebase

 

firebase deploy

 

 

Step 9

 

On successful execution of the above command, we will see the hosting URL:

 

https://createfire-3674a.firebaseapp.com/