Deploy Angular Universal App to Firebase Functions
Tags: firebase, angular, ssr, deploy
Published: 2021-09-04 22:36:10

## Update 3/7/24
For more information about Angular Deployment, see my latest post.
https://dev.to/jdgamble555/the-state-of-angular-ssr-deployment-in-2024-17jb
___
## Original Post
___

## Generate New Angular 12 Project

`ng new 'project name'`

- Add routing
- Add preferred stylesheet

## Open directory in VSCode then View Terminal

`ng add @nguniversal/express-engine`

### Optional

`ng add @angular/pwa`
`ng add @angular/material`

### Firebase

`ng add @angular/fire` - sometimes an error and needs to run 2x... hopefully this will be fixed...

- Select Firebase Project
- Say Yes to Deploy to Firebase Function
- Edit `angular.json`, then:
- Add `deploy.options.functionsNodeVersion: 14`

### Edit App.modules

```typescript
import { provideFirebaseApp, initializeApp } 
from '@angular/fire/app';
import { getFirestore, provideFirestore } 
from '@angular/fire/firestore';
...
@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    ...
  ],
  ...
})
```
### Github

- Edit `.gitignore` and add this to the bottom.

```
# Config Files
/src/environments/*
```

#### Create your Github project, then:

- `git remote add origin 'your github project url`
- `git branch -M master`
- `git push -u origin master`

Remove it from tracking by running:  

`git rm -r --cached -- ./src/environments/`

Recommit

`git add .`
`git commit -m 'init commit'`
`git push`

(Make sure you don't see your src/environments folder on github)

### Environment.ts / Environment.prod.ts

Add your Firebase Keys From Firebase Project Settings Web App (prod and dev projects). 

- `firebase use --add` to add `prod` and `dev` project. 
- Go back and forth with `firebase use` before deployment.

```typescript
export const environment = {
  production: false, // true for prod project in .prod file
  firebase: {
    ...keys
  }
};
```
Once you have your security rules set up correctly (if you're using firestore), you don't need to worry as much about hiding the key.

[Here](https://github.com/jdgamble555/angular-universal-firebase-functions) is my sample repository. I may update it if I see other common usage packages etc.

## Deploy

### Budget

Edit Angular.json Budget in:
`configuration.production.budgets.maximumWarning`.  You will probably already be at 650kb-ish even with new Firebase Version and a Blank Project. 

#### Run:

`ng deploy`

That's it. 

I honestly wonder whether or not this automatic version is faster than the older version (see below).

J

### Notes

1. You need to set the version of node to the latest version (14).  See [docs](https://github.com/angular/angularfire/blob/master/docs/deploy/getting-started.md#configuring-cloud-functions).
2. You also now need to enable permissions for your functions. See [here](https://stackoverflow.com/a/69059010/271450). 
3. Unfortunately it only supports `us-central1` region.  See [here](https://firebase.google.com/docs/hosting/full-config#rewrite-functions), but you can hack it using one of the older methods [here](https://bapittu.medium.com/angular-9-universal-ssr-with-firebase-and-deployment-in-cloud-function-54867020a656).
4. If you want to use regular firebase functions, create the functions folder, and init a new instance of them inside that folder. This keeps the deployment settings separate. You have to be inside that folder to deploy those functions, and root director for ssr function.