Publish Angular 6 App To Firebase

manav17
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.
manav1
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.

npm start

// OR

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.
      manav16
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.

          manav2
  • 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.
         manav3

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.

ng build –prod

OR

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.

         manav4
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,

        manav5
The further step is to choose your Gmail account and allow access for accessing a few details,
manav6
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,
        manav7
  • By the completion of all the above steps, actually you can see the informative message that you are now logged in with firebase-cli,
        manav8
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
       manav9
  • 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,
    manav10
Project Setup
  • Next step is for project-setup, in which we can select any of the projects listed in Firebase,
        manav11

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,
    manav12
  • Also, there are  a few questions asked about rewriting URLs and default not-found pages, choose NO as the option
      manav13

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:

       manav14
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:
manav15
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 if you want. Thanks for reading.
Advertisements

2 thoughts on “Publish Angular 6 App To Firebase

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s