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
- You can check the NPM version using the command
- To check Typescript version run
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
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 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.
- 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]
- 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
- Overwrite index.html:
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.
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…