Host Angular application on Firebase

Firebase is Google’s platform that helps us to develop mobile & web apps. There are various features available in firebase like authentication, hosting, real-time database, cloud functions, storage facility along with analytics & much more. Angular apps are SPA’s which can be deployed in many places like GitHub pages, firebase, AWS S3, or any other static hosting. Since firebase provides many features all together in one place, it’s easy to manage your angular application. Firebase hosting also provisions a global CDN for faster app delivery. In this post, we are going to use one of the features “Hosting” & host angular application on firebase.

---

Step 1: firebase Project creation

• Go to https://console.firebase.google.com/ and create a new project

Step 2: Angular project setup

1. Install Firebase tools from npm.

We need to install firebase tools to access the firebase project via CLI.

npm install -g firebase-tools

2. Log in to your firebase account using CLI.

This will open up a window where you have to log in to your google account.

firebase login

3. Intiliaze firebase hosting service & select hosting.

firebase init

4. Set default project

Select the existing project setup & click on your project name to select it as the default project for this application.

5. Set Public directory

What do you want to use as your public directory? This is a place from where the firebase will copy the hosting assets & deploy them. In Angular Build is generated in the “Dist” folder. So specify “dist”

What do you want to use as your public directory?dist

6. Configure as a single-page app (rewrite all URLs to /index.html)?

Select yes of your application is single page application or else select No.

Your hosting setup is done in your angular project. This has created 2 files in your project 1. firebase.json 2. .firebaserc

Firebase.json file contains all the configurations required for application deployment. Firebase RC file specifies different project name alias based on your environment.

7. Build Application

Build your application into a bundle using a production environment. This will create a “Dist” folder in your project with the production environment specified in the environment.prod.ts file

ng build --prod

8. Deploy application

Before deploying an application to the active project you can always test it locally by using the “Firebase serve” command & then deploy your application with the following command.

firebase deploy

This will deploy your application to the default Firebase project. In order to specify a specific project add the project name in the command.

firebase deploy -P production
Or
firebase deploy -P staging

If you want to deploy a new feature all together you can deploy it with the message so it’s easy for you to identify which deployment has which feature.

firebase deploy -m "Deploying the user contacts module."

That’s it. Your angular application is now deployed to firebase. You can access it via the “https://your-project-name.firebaseapp.com/”. Firebase automatically provisions a SSL certificate for you, although this can take up to 10 minutes. You can always add your custom domain name for the project. Verify your domain & Add Records given by firebase to your DNS server & there you go. You can access your application via “https://your-domain.com”. SSL certificate for custom domains will also be provisioned by firebase for free.

Thank you for reading. If you need any help enter it in the comments section.