Publish Angular 6 App To Firebase

In this tutorial, we are going to learn how to publish an Angular 6 app to Firebase by following a few steps.

Introduction
 
We are going to learn to publish an Angular app using Firebase by following these steps. 
 
Publishing the site using Firebase is pretty easy. There are so many ways to publish our Angular app but Firebase makes it very simple and much faster to publish. 
 
Why we choose Firebase 
 
Firebase is a mobile and web application development platform powered by Google. You can say Firebase is a Backend-as-a-Service,  apart from SaaS. With Firebase, we do not even need to create APIs so there is no separate back-end needed at all. Tons of services are provided by Firebase. A few of the major services are given below.
  • Hosting
  • Analytics
  • Real-time database
  • Storage and Cloud functions
  • AdWords and Cloud Messaging
  • Notifications 
However, in this write-up, we are going to work with Hosting where our Angular app is going to host using the Firebase platform. 
If you are new to Firebase, then you can log-in using Gmail account credentials and go to Firebase Console. You will see a console somewhat like the below screenshot. 
 
Firebase Hosting
 
Now, let's publish an Angular app to Firebase using these steps.
 
To publish an Angular app, we should have an Angular app created and ready to publish. For that, you can create any new Angular app by following the steps of the command below.

To create the new Angular app, run the below command in the console.
  1. ng new angulartofirebasehosting  
After the new app is created, it's time to install the dependencies by using the following command. 
  1. npm install  
Now, let's run our newly created app by running the command.
  1. npm start  
  2.   
  3. // OR  
  4.   
  5. ng serve -o  
You can use any of the two options. The second option automatically opens the browser window and you can see that our Angular app is executed now.
 
For that, I have already created one Angular project and I am going to publish the same project to Firebase, which looks like the below snap. And my folder structure will be like below.
 
      Firebase Hosting 
 
Now, let's move to the hosting part with Firebase. For that, we need to install a few packages as described below. To work with Firebase, we need to use its Firebase CLI commands, then install by writing in the console npm command,
  1. npm install firebase-tools  
After that, go to the Firebase console and create the new project like below described steps.
          Firebase Hosting 
  • When you click on Add project, it pops up a new screen and it expects your site name to be published. Enter as per your requirement. 
         Firebase Hosting 
 
As you can see, I have entered the site name as myappliedthoughts but you can use whatever you can, for country let's select the United States,

Our next move is to build our Angular app for production. For that, go to VS Code console and write the below command.
  1. ng build --prod   
  2.   
  3. OR  
  4.   
  5. npm run build  
From both ways, you can build your Angular app into production mode, and build folder will be generated like the below snap.

         Firebase Hosting 
 
After the build is completed, now it's time to publish our production-ready Angular application. First of all, we need to log in with Firebase account by writing the command.
  1. firebase login
By running the above command, you can see after visiting one link, and within second a new browser window automatically generated,
 
        Firebase Hosting 

The further step is to choose your Gmail account and allow access for accessing a few details, 

Firebase Hosting  
As you can see in the above snap, Firebase requested access for,
  • Platform services
  • Your cloud projects information
  • All your Firebase data and settings 
  • Allowing above requested data to forward you to a success message screen like, 
        Firebase Hosting
  • By the completion of all the above steps, actually you can see the informative message that you are now logged in with firebase-cli,
        Firebase Hosting 

So far, we are done with firebase login portion, the next move is to initialize Firebase into our project by using the command,
  1. firebase init  
       Firebase Hosting
  • Then you will be asked a few questions about which service of Firebase you are going to use, in this article we are going to use Firebase hosting,

    Firebase Hosting 
Project Setup 
  • Next step is for project-setup, in which we can select any of the projects listed in Firebase,
        Firebase Hosting

Hosting Setup
 
  • Our project setup step is completed and now it's time to select the directory for actually hosting our app using /dist directory that previously we have created ,

    Firebase Hosting 
  • Also, there are  afew questions asked about rewriting URLs and default not-found pages, choose NO as the option
      Firebase Hosting 

Firebase Deployment
 

Great!! Our last step is remaining which is the deployment of our configured app to firebase, for that we should use the command for Firebase deployment:
  1. firebase deploy  
After using the above command the console provides us information about deployment, and deployment of a successful message:
       Firebase Hosting 
 
Bravo, my site is published now, you can open the below URL in the browser,
Also, you can see the actual hosted website using my Firebase:
Firebase Hosting 
Conclusion
 
In this article, we have covered so many topics, which are listed below as a quick read  
  • Different Firebase services
  • Creating and adding projects into Firebase
  • Adding firebase tools to our app
  • Firebase login using CLI
  • Initializing and deploying the Angular app to Firebase
Firebase hosting feature lets you host your website or Android/iOS app by the following few steps, and lets your app be used by the world 
 
I hope you have understood the hosting environment of Firebase; feel free to suggest any modification sif you want. Thanks for reading.