Deploy Angular 14 application on Firebase

This tutorial covers:

1. Introduction
2. Creating a sample Angular application
3. Creating and setting up a project on Firebase
4. Login and Initialize Firebase project using Firebase CLI
5. Build Angular application and deploy it
6. Conclusion

Introduction

As a web developer, it is absolutely necessary to develop a robust application with a secure and stable back-end built into a robust front-end framework,However, the requirement to implement a back-end is often considered a source of confusion, so a potential option could be to use Firebase (a back-end on its own). Firebase offers developers an authentication service, storage service (to manage files on the server), hosting (static host) and a Realtime Database (along with FireStore) to manage data of your robust application.

Anuglar :(also referred to as "Angular 2+") is a TypeScript-based, free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Firebase : is a set of hosting services for any type of application. It offers NoSQL and real-time hosting of databases, content, social authentication (Google, Facebook, Twitter and Github), and notifications, or services, such as a real-time communication server.

In this presentation, I will provide instructions for setting up Angular for you. As well as Firebase integration with angular application and deployment of angular application to firebase hosting.

Creating a sample Angular application

Step 1 : Installing the Angular CLI

The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell.

In order to create an Angular project, it is necessary to install the Angular CLI on the development system. This requires the installation of Node.js.

Follow the Node.js installation URL on your developer environment.

Install the CLI using the npm package manager on a terminal:

npm install -g @angular/cli

Step 2 : Creating an Angular Project

To get started, let's create a fresh Angular project using Angular CLI by typing the command below (on a terminal) with the project name “angular-firebase-app”.

ng new angular-firebase-app

Hit y to a dd Angular Routing to your project

Hit Enter to choose stylesheet format css (Cascading Style Sheets)

Once the Angular project is setup then get into the project folder by using the following command.

cd angular-firebase-app

Step 3 : Open Angular Project

Your basic Angular app is almost ready just hit the below command in terminal.

ng serve --open

Now your browser should be opened and you'll see this

Now Everything should be fine

Let's get to the real Work!!!!

Creating and setting up a project on Firebase

First of all you need to :

• Make sure you have Firebase account. If not, create a Firebase account here: https://firebase.google.com/
• Create a GitHub account and create one repository as well.(Guide)
• Create a GitHub Repository and add your code in GitHub Repository. (Guide)

After Setting up your Acounts in Both Firebase and Github ,Go to https://console.firebase.google.com/u/0/

Click on "Create Project" and name it as "AngularFirebaseApp"

And wait until your project is buileded at 100%

Now you should be redirected to see this

Install the Firebase Tools using Firebase CLI

Set up Firebase tools globally by the following command.

npm install -g firebase-tools

Login and Initialize Firebase project using Firebase CLI

Login to Firebase Inside your project folder.

cd .\angular-firebase-app\

Then .

firebase login

To Initialize your Firebase project run below command

firebase init

After initializing the Firebase project you will see the following properties in Firebase CLI.

It will prompt with a couple of questions. Answer them carefully.

Select the Hosting files for Firebase Hosting option

Please Follow these Steps :

• Use an existing project
• Select the porject that you want to link with your application (In this case It's name is AngularFireBaseApp)
• What do you want to use as your public directory? : Give "dist/project-name" In my case, it is : dist/angular-firebase-app
• Configure as a single-page app (rewrite all urls to /index.html) : Yes
• Set up automatic builds and deploys with GitHub? : Yes
• For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) , Give your GitHub username followed by repository name. In my case : ImeedAttia/angular-firebase-app
• Set up the workflow to run a build script before every deploy? Yes
• What script should be run before every deploy? npm ci && npm run build
• Set up automatic deployment to your site's live channel when a PR is merged? Yes
• What is the name of the GitHub branch associated with your site's live channel? master

This Window Should be appinring when you login to your Github Account

After Making sure you added firebase CLI to your application you should add firebase extension to you github repository

Now the Firebase initialization is complete!

Build Angular application and deploy it

Step 1 : Build our application in production configuration

Your Angular app is ready just hit the below command in terminal to build it.

ng build --configuration production

Step 2 : Deploy Angular Application

Your Angular application is builded successfully.

Now let's just hit the below command in terminal to deploy it.

firebase deploy

Open the Link "Hosting URL" to display your application in the browser and you should see this

PS: In case you want to make some changes just commit and push your code to Github and your application will be updated automatically

Repository Link

Conclusion

We successfully deployed Angular 14 with Firebase Hosting, Firebase facilitated its deployment to its server. If you have a better idea or suggestion for improvement on this topic, please share in the comments section.

Next tutorial we'll talk about Firebase Authentification using email/password and Google Authentification.

And if you like this post please like and share

Github Web Site