How to deploy SSR and Prerender app in Firebase?

[jeslomo]

Version info

Angular: 9.1.11

Firebase: 7.15.1

AngularFire: 6.0.0

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node 10

How to reproduce these conditions

Steps to set up and reproduce

ng new TestSSRAndPrerendering

ng add @nguniversal/express-engine

ng add @angular/fire (with option "We detected an Angular Universal project. Do you want to deploy as a Firebase Function? Yes")

npm run prerender

Expected behavior

I would like that when doing "ng deploy" the web were published having 2 behaviors. 1, that the URLs chosen as "prerender" will be prerendered and those that are not, will be rendered via SSR.

Actual behavior

When i run "npm run prerender" and "ng deploy", fist generate code in "dist//browser" and server and the last statement generate code in "dist//dist//broswer and server" and this is what is finally uploaded and executed by the Firebase Function, and this is what is finally uploaded and executed by the function, ignoring what the "prerender" statement generated.

[yasinkocak]

Follow this docs: https://github.com/angular/angularfire/blob/master/docs/deploy/getting-started.md

[jeslomo]

Follow this docs: https://github.com/angular/angularfire/blob/master/docs/deploy/getting-started.md

sorry i think i didn't explain myself well. The "ng deploy" command only builds the application in SSR mode, it does not build it in "prerender" mode. What I want is to build some pages in "prerender" mode and others in SSR mode.

The repository documentation also talks about the old way of doing it, it is not updated to Angular 9.

[jamesdaniels]

I'm hoping to support prerendering in ng deploy in an upcoming release, it is not currently supported.

[jeslomo]

It's include in new release this feature?

[stuartcargill]

Any updates on this? Has angular fires support for ng deploy been updated to include prerendering?

[stuartcargill]

I figured out a workaround to get prerendering to work with ng deploy. Update your angular.json:

"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"buildTarget": "PROJECTNAME:prerender",
.................

then you need to go to your node modules and navigate to actions.js within @angular\fire\schematics\deploy

Update the code where it looks for a outputPath for your static build option:

if(staticBuildTarget.name.includes('prerender')) {
        console.log("hit prerender");
        staticBuildOptions.outputPath = 'dist/browser';    
    } else {
        throw new Error('Cannot read the output path option of the Angular project ' + staticBuildTarget.name +  ' in angular.json');
    }

The reason you need to do this is because the prerender build target in your angular.json does not have an output path specified and you cant add one as the schema doesnt allow it.

I know it's hacky but it works, I was able to deploy successfully.

[conde2]

@jamesdaniels is this already implemented?

@stuartcargill where exaclty should I put this snippet ?

Tried here but no success

[dnmakarov]

check maybe your dist folder has structure like dist/<PROJECT_NAME>/borwser