Deploy Angular Universal App to Firebase Functions

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

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.

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 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.
2. You also now need to enable permissions for your functions. See here.
3. Unfortunately it only supports us-central1 region. See here, but you can hack it using one of the older methods here.
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.