Angular with Firebase setup & deployment.

First generate angular project using CLI command

ng new angular-firebase

Next install firebase into angular project using ng add command

ng add @angular/fire

On executing command

• Created .firebaserc file
• Updated .gitignore
• Updated angular.json
• Updated firebase.json

Firebase Project Set-Up

• Go to https://console.firebase.google.com/ and create firebase project
• In firebase project under product categories click on build.
• Under Build click on Hosting and get started.

Run this command in angular to install firebase

npm install firebase

Next paste firebaseConfig values under environmen.ts in angular project

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: 'YOUR_KEY_VALUES',
    authDomain: 'YOUR_KEY_VALUES',
    projectId: 'YOUR_KEY_VALUES',
    storageBucket: 'YOUR_KEY_VALUES',
    messagingSenderId: 'YOUR_KEY_VALUES',
    appId: 'YOUR_KEY_VALUES',
    measurementId: 'YOUR_KEY_VALUES',
  },
};

Add firebase-tools using cli command in angular project

npm install -g firebase-tools

Before Deploying project to firebase need to build angular project using CLI command

ng build

Login to firebase in angular project and Initialize in project

firebase login

firebase init

These are steps need to follow while deploying

• Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices - Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
• What do you want to use as your public directory? 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
• File dist/angular-firebase-app/index.html already exists. Overwrite? - No

• Skipping write of dist/angular-firebase-app/index.html

• 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)

• What script should be run before every deploy? - npm ci && npm run build

• GitHub workflow file for PR previews exists. Overwrite? - firebase-hosting-pull-request.yml Yes

• Created workflow file C:\Users\manth\angular-firebase-app.github/workflows/firebase-hosting-pull-request.yml

• 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

• The GitHub workflow file for deploying to the live channel already exists. Overwrite? firebase-hosting-merge.yml Yes

To deploy :

firebase deploy

Finally Project URL & Hosting URL is generated as shown below 👇

Project Console: https://console.firebase.google.com/project/angular-firebase-app-fb381/overview
Hosting URL: https://angular-firebase-app-fb381.web.app