googleads
How to Deploy an App to Firebase With Angular CLI In Minutes | Tutorial
preloder
​BLACK FRIDAY DEALS 2019: 
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.

 

Creating An Angular App

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

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

 

Running An Angular App 

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

 

 

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.

After installing firebase tools we have to login to firebase using the terminal. Use the below command to 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.

 

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.

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

 


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.

 

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!

Like What You're Reading ?

 

The following two tabs change content below.

Leave a Reply

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

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call