Deploying Angular application to Firebase Hosting for free.

Are you developing an Angular application and would like to see it running with production configuration live on the browser? Firebase hosting enables us to deploy any JS based application for free. Let me show you how you can achieve it.

What is Firebase Hosting?

Firebase Hosting is production-grade web content hosting for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network). You can also pair Firebase Hosting with Cloud Functions or Cloud Run to build and host microservices on Firebase.

Prerequisites

All you need is access to Google workspaces, so a Gmail account will do the job.

Setting up a new Firebase project

1. Go to https://console.firebase.google.com.
2. Click on Add Project box.

3. Give your project a name. Since the domain is free, then you should find a slug which is not used, in order to create a meaningful hosting.Since I am using this domain for a Progressive Web Application built with Angular I will call it ng-pwa-hosting. I will also publish an article on how to get started with PWA in Angular soon.

4. You can Enable Firebase Analytics for the project.

5. Create your project. You’ll see some loaders and in the end it should look something like this

6. Press Continue, and there you have it. The project is set up and waiting for a deployment.

Deploying to Firebase

1. Create a production build of your application → ng build (or if you’re in any older version use the flag — prod).
2. Install firebase tools package globally → Open a terminal and run npm i -g firebase-tools
3. Login to firebase → Run the following command on the terminal

firebase login
It should redirect you in the browser window asking for permissions. You need to grant those and when its done, you can just close the browser tab and see that you authenticated successfully message on the terminal.

1. Initializing firebase → Run the command (if it’s not the first time doing it then you can skip it).

firebase init hosting
It will give you some options to be selected.

1. Choose Use an existing project.
2. Choose the default Firebase project for this directory (the name we just created above). ng-pwa-hosting
3. Now it will ask for the public directory. This is the local production build folder. Mine is dist/angular-pwa.
4. Choose to rewrite all url’s to index.html in order to be used as an SPA application.

5. If you want to setup automatic github deployments, you can do so, but I chose no, since I will build and deploy from my machine.
   6.Don’t overwrite the existing index.html

6. Deploy to firebase

firebase deploy
This will take your local files and upload them to firebase hosting. When it’s done you should see the domain where you can access your production running application. You can visit mine here: https://ng-pwa-hosting.web.app

Yuhuu🏋️🚀. Our app is live.

A little extra candy 🍬

If you want to save some time with your local build and deployment you can create a custom command and put it in the script section of package.json. This way you don’t need to write build and then firebase deploy commands but do it all at once:

"deploy": "ng build && firebase deploy --only hosting"
And then you can run:

npm run deploy
and it will build and deploy your application to firebase.

Source code
Link of the bitbucket repository: https://bitbucket.org/klajdiavdiaj/angular-pwa/src/master

That’s it
As usual, thank you for reading. I appreciate the time you take to read my content and stories. I hope you can find this article useful. If you like it give it 👏👏 and don’t hesitate to follow. Also check out my twitter profile: https://twitter.com/klajdiavdiaj6 and medium: https://medium.com/@klajdiavdiaj6

Stay tuned and happy coding!