[DURACOM-247] Refactoring SSR configuration in order to align it with new nomenclature

This commit is contained in:
Giuseppe Digilio
2024-04-11 18:14:34 +02:00
parent 7b1f264812
commit d7d8067006
10 changed files with 90 additions and 114 deletions

135
server.ts
View File

@@ -17,7 +17,6 @@
import 'zone.js/node';
import 'reflect-metadata';
import 'rxjs';
/* eslint-disable import/no-namespace */
import * as morgan from 'morgan';
@@ -40,26 +39,25 @@ import { join } from 'path';
import { enableProdMode } from '@angular/core';
import { environment } from './src/environments/environment';
import { createProxyMiddleware } from 'http-proxy-middleware';
import { hasNoValue, hasValue } from './src/app/shared/empty.util';
import { hasValue } from './src/app/shared/empty.util';
import { UIServerConfig } from './src/config/ui-server-config.interface';
import bootstrap from './src/main.server';
import { buildAppConfig } from './src/config/config.server';
import { APP_CONFIG, AppConfig } from './src/config/app-config.interface';
import {
APP_CONFIG,
AppConfig,
} from './src/config/app-config.interface';
import { extendEnvironmentWithAppConfig } from './src/config/config.util';
import { logStartupMessage } from './startup-message';
import { TOKENITEM } from './src/app/core/auth/models/auth-token-info.model';
import { CommonEngine } from '@angular/ssr';
import { APP_BASE_HREF } from '@angular/common';
import { REQUEST, RESPONSE } from './src/express.tokens';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import {
REQUEST,
RESPONSE,
} from './src/express.tokens';
/*
* Set path for the browser application's dist folder
@@ -92,9 +90,6 @@ export function app() {
* Create a new express application
*/
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const commonEngine = new CommonEngine();
// Tell Express to trust X-FORWARDED-* headers from proxies
// See https://expressjs.com/en/guide/behind-proxies.html
@@ -134,27 +129,6 @@ export function app() {
*/
server.use(json());
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
/* server.engine('html', (_, options, callback) =>
ngExpressEngine({
bootstrap,
providers: [
{
provide: REQUEST,
useValue: (options as any).req,
},
{
provide: RESPONSE,
useValue: (options as any).req.res,
},
{
provide: APP_CONFIG,
useValue: environment,
},
],
})(_, (options as any), callback),
);*/
server.engine('ejs', ejs.renderFile);
/*
@@ -234,12 +208,7 @@ export function app() {
* copy of the page (see cacheCheck())
*/
router.get('*', cacheCheck, ngApp);
// All regular routes use the Angular engine
// server.get('*', (req, res, next) => {
// const { protocol, originalUrl, baseUrl, headers } = req;
//
//
// });
server.use(environment.ui.nameSpace, router);
return server;
@@ -249,7 +218,7 @@ export function app() {
* The callback function to serve server side angular
*/
function ngApp(req, res, next) {
if (environment.universal.preboot) {
if (environment.ssr.enabled) {
// Render the page to user via SSR (server side rendering)
serverSideRender(req, res, next);
} else {
@@ -264,17 +233,19 @@ function ngApp(req, res, next) {
* returned to the user.
* @param req current request
* @param res current response
* @param next the next function
* @param sendToUser if true (default), send the rendered content to the user.
* If false, then only save this rendered content to the in-memory cache (to refresh cache).
*/
function serverSideRender(req, res, next, sendToUser: boolean = true) {
const { protocol, originalUrl, baseUrl, headers } = req;
const commonEngine = new CommonEngine();
const commonEngine = new CommonEngine({ enablePerformanceProfiler: environment.ssr.enablePerformanceProfiler });
// Render the page via SSR (server side rendering)
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
inlineCriticalCss: environment.ssr.inlineCriticalCss,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: DIST_FOLDER,
providers: [
@@ -293,44 +264,35 @@ function serverSideRender(req, res, next, sendToUser: boolean = true) {
},
],
})
.then((html) => res.send(html))
.catch((err) => next(err));
/* res.render(indexHtml, {
req,
res,
preboot: environment.universal.preboot,
async: environment.universal.async,
time: environment.universal.time,
baseUrl: environment.ui.nameSpace,
originUrl: environment.ui.baseUrl,
requestUrl: req.originalUrl,
}, (err, data) => {
if (hasNoValue(err) && hasValue(data)) {
// save server side rendered page to cache (if any are enabled)
saveToCache(req, data);
if (sendToUser) {
res.locals.ssr = true; // mark response as SSR (enables text compression)
// send rendered page to user
res.send(data);
.then((html) => {
if (hasValue(html)) {
// save server side rendered page to cache (if any are enabled)
saveToCache(req, html);
if (sendToUser) {
res.locals.ssr = true; // mark response as SSR (enables text compression)
// send rendered page to user
res.send(html);
}
}
} else if (hasValue(err) && err.code === 'ERR_HTTP_HEADERS_SENT') {
// When this error occurs we can't fall back to CSR because the response has already been
// sent. These errors occur for various reasons in universal, not all of which are in our
// control to solve.
console.warn('Warning [ERR_HTTP_HEADERS_SENT]: Tried to set headers after they were sent to the client');
} else {
console.warn('Error in server-side rendering (SSR)');
if (hasValue(err)) {
console.warn('Error details : ', err);
})
.catch((err) => {
if (hasValue(err) && err.code === 'ERR_HTTP_HEADERS_SENT') {
// When this error occurs we can't fall back to CSR because the response has already been
// sent. These errors occur for various reasons in universal, not all of which are in our
// control to solve.
console.warn('Warning [ERR_HTTP_HEADERS_SENT]: Tried to set headers after they were sent to the client');
} else {
console.warn('Error in server-side rendering (SSR)');
if (hasValue(err)) {
console.warn('Error details : ', err);
}
if (sendToUser) {
console.warn('Falling back to serving direct client-side rendering (CSR).');
clientSideRender(req, res);
}
}
if (sendToUser) {
console.warn('Falling back to serving direct client-side rendering (CSR).');
clientSideRender(req, res);
}
}
});*/
next(err);
});
}
/**
@@ -388,7 +350,7 @@ function initCache() {
function botCacheEnabled(): boolean {
// Caching is only enabled if SSR is enabled AND
// "max" pages to cache is greater than zero
return environment.universal.preboot && environment.cache.serverSide.botCache.max && (environment.cache.serverSide.botCache.max > 0);
return environment.ssr.enabled && environment.cache.serverSide.botCache.max && (environment.cache.serverSide.botCache.max > 0);
}
/**
@@ -397,7 +359,7 @@ function botCacheEnabled(): boolean {
function anonymousCacheEnabled(): boolean {
// Caching is only enabled if SSR is enabled AND
// "max" pages to cache is greater than zero
return environment.universal.preboot && environment.cache.serverSide.anonymousCache.max && (environment.cache.serverSide.anonymousCache.max > 0);
return environment.ssr.enabled && environment.cache.serverSide.anonymousCache.max && (environment.cache.serverSide.anonymousCache.max > 0);
}
/**
@@ -410,9 +372,9 @@ function cacheCheck(req, res, next) {
// If the bot cache is enabled and this request looks like a bot, check the bot cache for a cached page.
if (botCacheEnabled() && isbot(req.get('user-agent'))) {
cachedCopy = checkCacheForRequest('bot', botCache, req, res);
cachedCopy = checkCacheForRequest('bot', botCache, req, res, next);
} else if (anonymousCacheEnabled() && !isUserAuthenticated(req)) {
cachedCopy = checkCacheForRequest('anonymous', anonymousCache, req, res);
cachedCopy = checkCacheForRequest('anonymous', anonymousCache, req, res, next);
}
// If cached copy exists, return it to the user.
@@ -448,9 +410,10 @@ function cacheCheck(req, res, next) {
* @param cache LRU cache to check
* @param req current request to look for in the cache
* @param res current response
* @param next the next function
* @returns cached copy (if found) or undefined (if not found)
*/
function checkCacheForRequest(cacheName: string, cache: LRU<string, any>, req, res): any {
function checkCacheForRequest(cacheName: string, cache: LRU<string, any>, req, res, next): any {
// Get the cache key for this request
const key = getCacheKey(req);
@@ -466,7 +429,7 @@ function checkCacheForRequest(cacheName: string, cache: LRU<string, any>, req, r
// Update cached copy by rerendering server-side
// NOTE: In this scenario the currently cached copy will be returned to the current user.
// This re-render is peformed behind the scenes to update cached copy for next user.
serverSideRender(req, res, null, false);
serverSideRender(req, res, next, false);
}
} else {
if (environment.cache.serverSide.debug) { console.log(`CACHE MISS FOR ${key} in ${cacheName} cache.`); }
@@ -570,7 +533,7 @@ function createHttpsServer(keys) {
const listener = createServer({
key: keys.serviceKey,
cert: keys.certificate,
}, app).listen(environment.ui.port, environment.ui.host, () => {
}, app()).listen(environment.ui.port, environment.ui.host, () => {
serverStarted();
});