Angular CLI

Angular CLI is a command line interface which helps to setup Angular applications easily. By default, it will structure the app and create the necessary files. With Angular CLI, it is even more easy to create production-ready applications.
Once the application finished where we can deploy? While there are many ways to deploy but here comes the Firebase which makes deployment super easy.
Firebase is a mobile and web application development platform developed by Firebase later acquired by Google in 2014. Firebase offers many great features.
Let’s see how to create an angular app and deploying it to firebase.

Install Angular CLI

We have to install Angular CLI to create an app. Use the below command to install.

npm install -g @angular/cli

 

Creating An Angular App

After installing angular CLI, you can able to create a new angular app.

ng  new app-name

Change it to the name you like, here I am naming it as angular-firebase.

ng new angular-firebase

 

Running An Angular App

Once the app created, follow the steps to run the app.

cd angular-firebase/

 

ng serve --open

 

Now our app is running up and working fine. Let’s start setting Firebase up for deployment.

Creating Firebase App

We have to create a Firebase account and a Firebase app to deploy. Once you log in to your account create a new app.

Now, I am creating an app with the name Angular Firebase App.

Install Firebase CLI Tools

Now we have to install Firebase CLI Tools to deploy the angular app to firebase.

npm install -g firebase-tools

After installing firebase tools we have to login to firebase using the terminal. Use the below command to login.

firebase login

 

After running login command, it will generate a link so open that link and authenticate it then logging from the terminal will become successful.

 

Also Read: How To Build Login Page Using Angular Material Design Clearly Explained

 

Link Your App To Firebase App

Now we have to link our local angular app to firebase app that we have created and to do this run the below command.

firebase init

 
After running the above firebase tools will ask the following questions


1) Which Firebase CLI features do you want to setup for this folder? (use space to select the option and press enter to confirm)
Ans: Hosting
2) Select a default Firebase project for this directory (Use arrow keys to select and press enter)
Ans: Select the project to which you want to deploy.
3) What do you want to use as your public directory?
Ans: dist/angular-firebase (If you are using different name give that one)
4) Configure as a single-page app (rewrite all urls to /index.html)?
Ans: Yes
After answering the above questions it will create two files in our application.
1. firebaserc : Sets the Firebase app which we linked to,

2. firebase.json : Sets the hosting folder and rewrites

Deploying An Angular App To Firebase

Connecting our local app to firebase is completed. Now we have to create a production build of our angular app.

ng build --prod

Once the build created, run the below command to deploy the application.

firebase deploy

 


Successfully the app is deployed. To check whether the app is working or not, visit the Hosting URL that we got in the console. There is also another way to open the application from the terminal itself.

firebase open hosting:site

 
It’s simple as like that! Try out deploying your angular apps to production with firebase hosting. In future, we will try with other hosting providers too. Post your comments below, we had like to hear from you!