Deploy Angular Universal App to Firebase Functions

Deploy Angular Universal App to Firebase Functions

5 min read

## 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.
angular
cloudfunction
faq