feat(docs): setup server-side rendering

Author: Char2sGu

docs/package.json

@@ -9,14 +9,17 @@
     "@angular/core": "17.x.x",
     "@angular/forms": "17.x.x",
     "@angular/platform-browser": "17.x.x",
+    "@angular/platform-server": "17.x.x",
     "@angular/router": "17.x.x",
+    "@angular/ssr": "17.x.x",
+    "express": "^4.19.2",
     "@ng-doc/app": "17.5.5",
     "@ng-doc/core": "17.5.5",
     "@ng-doc/ui-kit": "17.5.5",
     "rxjs": "7.x.x",
     "tslib": "2.x.x"
   },
-  "peerDependencies": {
-    "@ng-doc/generated": "*"
+  "devDependencies": {
+    "@types/express": "4.17.14"
   }
 }

docs/project.json

@@ -16,6 +16,7 @@
         "outputPath": "dist/docs",
         "index": "docs/src/index.html",
         "browser": "docs/src/main.ts",
+        "server": "docs/src/main.server.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "docs/tsconfig.app.json",
         "inlineStyleLanguage": "scss",

docs/server.ts

@@ -0,0 +1,62 @@
+/* eslint-disable no-console */
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine } from '@angular/ssr';
+import express from 'express';
+
+import bootstrap from './src/main.server';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app(): express.Express {
+  const server = express();
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
+
+  const commonEngine = new CommonEngine();
+
+  server.set('view engine', 'html');
+  server.set('views', browserDistFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get(
+    '*.*',
+    express.static(browserDistFolder, {
+      maxAge: '1y',
+    }),
+  );
+
+  // All regular routes use the Angular engine
+  server.get('*', (req, res, next) => {
+    const { protocol, originalUrl, baseUrl, headers } = req;
+
+    commonEngine
+      .render({
+        bootstrap,
+        documentFilePath: indexHtml,
+        url: `${protocol}://${headers.host}${originalUrl}`,
+        publicPath: browserDistFolder,
+        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+      })
+      .then((html) => res.send(html))
+      .catch((err) => next(err));
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env['PORT'] || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+run();

docs/src/app/app.config.server.ts

@@ -0,0 +1,10 @@
+import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+
+import { appConfig } from './app.config';
+
+const config: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+
+export const appConfigForServer = mergeApplicationConfig(appConfig, config);

docs/src/app/app.config.ts

@@ -4,6 +4,7 @@ import {
   withInterceptorsFromDi,
 } from '@angular/common/http';
 import { ApplicationConfig } from '@angular/core';
+import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
 import {
@@ -16,10 +17,12 @@ import {
   providePageSkeleton,
   provideSearchEngine,
 } from '@ng-doc/app';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { NG_DOC_ROUTING, provideNgDocContext } from '@ng-doc/generated';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideClientHydration(),
     provideAnimations(),
     provideRouter(
       NG_DOC_ROUTING,

docs/src/main.server.ts

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-default-export */
+import { ApplicationRef } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+import { AppComponent } from './app/app.component';
+import { appConfigForServer } from './app/app.config.server';
+
+const bootstrap = (): Promise<ApplicationRef> =>
+  bootstrapApplication(AppComponent, appConfigForServer);
+
+export default bootstrap;

docs/tsconfig.app.json

@@ -2,8 +2,8 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "types": []
+    "types": ["node"]
   },
-  "files": ["src/main.ts"],
+  "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
   "include": ["src/**/*.d.ts"]
 }