How to initialize new Angular SSR with Firebase Cloud Functions

Viewed 42

Using the latest Angular(14) and Firebase(11.8.0) with AngularFire, I'm trying to build a SSR app deployed to firebase hosting with cloud functions. Really just want to make sure I've deployed it correctly, I haven't found any documentation to indicate that we need to make changes to the angular.json file like previous versions of angular. Iv'e see quite a few older doc's mentioning changing output path and copying over dependencies.

Angular SSR with Universal and firebase

Questions:

  • has this already been taken care of with the newer schematics(no need to change output & copy over deps)?
  • do we still have to run firebase deploy --only functions,hosting, I ran ng deploy and this seemed to have also deployed the app.

Steps I used to create my new app:

  1. ng new example-app
  2. ng add @nguniversal/express-engine
  3. ng add @angular/fire -> then followed the cli questions/options below
 ng add @angular/fire

ℹ Using package manager: npm
✔ Found compatible package version: @angular/fire@7.4.1.
✔ Package information loaded.

The package @angular/fire@7.4.1 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
UPDATE package.json (1547 bytes)
✔ Packages installed successfully.
? What features would you like to setup? ng deploy -- hosting, Authentication, Firestore, Realtime Database, Analytics, Cloud Functions (callable), Cloud Messaging, Performance
Monitoring, Cloud Storage, Remote Config
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
Using firebase-tools version 11.8.0
? Which Firebase account would you like to use? me@me.com
✔ Preparing the list of your Firebase projects
? Please select a project: [CREATE NEW PROJECT]
? Please specify a unique project id (cannot be modified afterward) [6-30 characters]: ng-firebase-ssr-cloudfuncs
? What would you like to call your project? ng-firebase-ssr-cloudfuncs
✔ Creating Google Cloud Platform project
✔ Adding Firebase resources to Google Cloud Platform project
? Should we prerender before deployment? Yes
? How would you like to render server-side content? Cloud Functions
? What version of Node.js would you like to use? 16
? Please select a hosting site: [CREATE NEW SITE]
? Please provide an unique, URL-friendly id for the site (<id>.web.app): ngssrfirebasecloudfuncs
✔ Preparing the list of your Firebase WEB apps
? Please select an app: [CREATE NEW APP]
? What would you like to call your app? ngssrfirebasecloudfuncs
✔ Creating your Web app
✔ Downloading configuration data of your Firebase WEB app
CREATE .firebaserc (236 bytes)
UPDATE .gitignore (602 bytes)
UPDATE src/app/app.module.ts (1764 bytes)
UPDATE server.ts (2076 bytes)
UPDATE src/environments/environment.ts (995 bytes)
UPDATE src/environments/environment.prod.ts (388 bytes)
UPDATE angular.json (6024 bytes)
UPDATE package.json (1616 bytes)
UPDATE firebase.json (979 bytes)
✔ Packages installed successfully.
0 Answers
Related