googleads
How to Deploy an App to Firebase With Angular CLI In Minutes | Tutorial
Angular Web Development

Deploying An Angular CLI App To Firebase Hosting

 
 

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!
 

 

Leave a Reply

Your email address will not be published. Required fields are marked *