Angular with Firebase setup & deployment.
Tags: angular, firebase
Published: 2022-12-09 12:24:02

### First generate angular project using CLI command

```bash
ng new angular-firebase
```

### Next install firebase into angular project using ng add command

```bash
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/](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

```bash
npm install firebase
```

Next paste `firebaseConfig` values under `environmen.ts` in angular project

```bash
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

```bash
npm install -g firebase-tools
```

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

```bash
ng build
```

Login to firebase in angular project and Initialize in project

```bash
firebase login
```

```bash
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 :

```bash
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](https://console.firebase.google.com/project/angular-firebase-app-fb381/overview)
Hosting URL: [https://angular-firebase-app-fb381.web.app](https://angular-firebase-app-fb381.web.app/)