Angular + Cloud Functions for Firebase + Firebase Hosting + NestJS approach.
- Rename
index.html to index2.html. This is important to render your route path, otherwise you will have rendering working fine on all routes, excluding the root /.
- Update
angular.json to have the following "index": "apps/myapp/src/index2.html", (Simply change index.html to index2.html). Note: path to the index.html might be different for you, I'm using Nx workspace.
- Add
templatePath: join(BROWSER_DIR, 'index2.html'), to NestJS's ApplicationModule, most probably you name the file as app.module.ts in a server directory.
Like so:
@Module({
imports: [
AngularUniversalModule.forRoot({
bundle: require('./path/to/server/main'), // Bundle is created dynamically during build process.
liveReload: true,
templatePath: join(BROWSER_DIR, 'index2.html'),
viewsPath: BROWSER_DIR
})
]
})
Initialize Firebase Cloud Functions and Firebase Hosting, for how to set up this you can check https://hackernoon.com/deploying-angular-universal-v6-with-firebase-c86381ddd445 or https://blog.angularindepth.com/angular-5-universal-firebase-4c85a7d00862
Edit your firebase.json.
It should look like that, or at least the hosting part.
{
"hosting": {
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"public": "functions/path/to/browser",
"rewrites": [
{
"function": "angularUniversalFunction",
"source": "**"
}
]
}
}
- In your main.ts you need to set up Cloud Functions on your server.
In a minimialistic case it would like something like that:
import * as admin from 'firebase-admin';
import * as functions from 'firebase-functions';
admin.initializeApp(); // Initialize Firebase SDK.
const expressApp: Express = express(); // Create Express instance.
// Create and init NestJS application based on Express instance.
(async () => {
const nestApp = await NestFactory.create<NestExpressApplication>(
ApplicationModule,
new ExpressAdapter(expressApp)
);
nestApp.init();
})().catch(err => console.error(err));
// Firebase Cloud Function for Server Side Rendering (SSR).
exports.angularUniversalFunction = functions.https.onRequest(expressApp);
With this approach you don't have to care about routes on the NestJS side. You can set up everything on the Angular side, and that's all. Angular takes care for routing. As you probably noticed this is Server-Side Rendering (SSR), but redirection of all routes to index.html (or more precisely index2.html) can be done using NestJS + Cloud Functions for Firebase in conjuction. Plus you have a SSR "for free" :)
Projects to showcase:
1) Angular + Angular Universal (SSR) + Cloud Functions for Firebase: https://github.com/Ismaestro/angular8-example-app (missing NestJS).
2) Angular + NestJS: https://github.com/kamilmysliwiec/universal-nest (missing Cloud Functions for Firebase).
