Deploy Angular 8 app to Firebase hosting in easy steps

Firebase provides fast and secure hosting for your web app, static and dynamic content, and microservices including real-time database and backend as a service that helps users to develop easy, secure, fast tools for high-quality apps and grow your user base. Firebase is developed by Firebase Inc. in 2011, then acquired by Google in 2014 and jellify into the Google Cloud service. Now, it’s a flagship product of the Google Cloud offering.

In this article, We will develop an Angular 8 app using Angular CLI then deploy to Firebase hosting. If you need to know more about Angular Version-8, You can check out my other article on Angular version 8 new features and breaking changes.

Install Angular CLI 8 and create an Angular 8 app

For developing an Angular version 8 app, First, you have to check the following dependencies:

Angular 8 supports Nodejs version 12 or later and Typescript 3.4.X or later
You can check the Nodejs version using the command node -v
You can check the NPM version using the command npm -v
To check Typescript version run tsc -v

If you have above version of Nodejs and Typescript you can update the Angular CLI using the command ng update @angular/cli @angular/core

If you are facing any difficulty to update Angular CLI, You can uninstall the cli and Install angular cli version 8. To update the latest angular-cli package installed globally in your system, you need to run the following commands:

sudo npm uninstall -g angular-cli // For Mac
npm uninstall -g angular-cli // For Windows
sudo npm cache verify
sudo npm cache clean //If you older version of NPM
sudo npm install -g @angular/cli@latest

Create Angular app using Angular CLI version 8

Create an Angular 8 app by running following commands:

ng new ng-firebase
cd ng-firebase
ng serve

Now you are ready with your basic Angular 8. Hit http://localhost:4200 on your browser and you will see your App up and running.

Build your Angular app for production

This is the last step towards your Angular app setup, To create a production build run command ng build --prod

Create a Firebase account & project

First, we have to create a Firebase account and a Firebase app to deploy. Once you log-in to your account now go to the Firebase console and start a new project for your app. You can refer the steps from the below image.

Install the Firebase command line tools

After setting up the project on firebase console now install firebase tools globally by running the below command on terminal

npm install -g firebase-tools

Deployment steps

Login using the Firebase CLI & initialize your project

After installing firebase tools now we have to log-in to firebase using the terminal. Use the below command to login.

firebase login

After running firebase login command, it will generate a link to open that link and authenticate it to successfully login through terminal. Now we have to link our local angular app to the firebase app that we have created and to do this run the below command. This command will initialize the project. During the initialization step, most importantly you have to be careful while answering the questions.

firebase init

Which Firebase CLI features do you want to set up for this folder? [ use space-bar to select the option and press enter to confirm] Hosting
Select a default Firebase project for this directory [Use arrow keys to select and press enter] Select the correct firebase project name where you want to deploy local app
What do you want to use as your public directory? dist/ng-firebase [If you are using different name give that one]
Configure as a single-page app yes
Overwrite index.html: No

Deploying An Angular App To Firebase

Most importantly before deploying app check firebase.json. There you will find your hosting folder from dist/ng-firebase. Now run deploy command which will deploy your local app to firebase.

firebase deploy

Your application has now been deployed and will be available for access through the link provided in the terminal or through firebase console/project name

If you enjoyed this story please give us a clap. Happy Learning…