How to Implement Server-Side Rendering in Angular 17 Using the Serverless Framework and NX

npx create-nx-workspace@latest

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  standalone: true,
  imports: [RouterModule],
  selector: 'app-root',
  template: `Hello World! From The Server!`,
})
export class AppComponent {
}

npm start

npm i @codegenie/serverless-express aws-serverless-express serverless serverless-apigw-binary serverless-associate-waf serverless-offline

import 'zone.js/node';

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { existsSync } from 'node:fs';
import { join } from 'node:path';
import bootstrap from './src/main.server';

export function app(): express.Express {
	const server = express();
	const distFolder = join(process.cwd(), 'dist/{YOUR ORG}/browser'); // Change it for your org name.
	const indexHtml = existsSync(join(distFolder, 'index.original.html'))
		? join(distFolder, 'index.original.html')
		: join(distFolder, 'index.html');

	const commonEngine = new CommonEngine();

	server.set('view engine', 'html');
	server.set('views', distFolder);

	server.get(
		'*.*',
		express.static(distFolder, {
			maxAge: '1y',
		}),
	);

	server.get('*', (req, res, next) => {
		const { protocol, originalUrl, baseUrl, headers } = req;

		commonEngine
			.render({
				bootstrap,
				documentFilePath: indexHtml,
				url: `${protocol}://${headers.host}${originalUrl}`,
				publicPath: distFolder,
				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;

	const server = app();
	server.listen(port, () => {
		console.log(`Node Express server listening on http://localhost:${port}`);
	});
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = (mainModule && mainModule.filename) || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
	run();
}

export default bootstrap;

{
	"extends": "./tsconfig.app.json",
	"compilerOptions": {
		"outDir": "../../out-tsc/serverless",
		"target": "es2019",
		"types": ["node"]
	},
	"files": ["src/main.server.ts", "serverless.ts"]
}

"serverless": {
      "dependsOn": ["build"],
      "executor": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/{YOUR ORG}/serverless", // Change it for your org name.
        "main": "serverless.ts",
        "tsConfig": "tsconfig.serverless.json",
        "inlineStyleLanguage": "scss"
      },
      "configurations": {
        "production": {
          "outputHashing": "media"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "sourceMap": true,
          "extractLicenses": false,
          "vendorChunk": true
        }
      },
      "defaultConfiguration": "production"
    }

const awsServerlessExpress = require('aws-serverless-express');
const server = require('./dist/{YOUR ORG}/serverless/main'); // Change it for your org name.
const awsServerlessExpressMiddleware = require('aws-serverless-express/middleware');

const binaryMimeTypes = [
	'application/javascript',
	'application/json',
	'application/octet-stream',
	'application/xml',
	'image/jpeg',
	'image/png',
	'image/gif',
	'image/webp',
	'text/comma-separated-values',
	'text/css',
	'text/html',
	'text/javascript',
	'text/plain',
	'text/text',
	'text/xml',
	'image/x-icon',
	'image/svg+xml',
	'application/x-font-ttf',
];

const app = server.app();
app.use(awsServerlessExpressMiddleware.eventContext());
const serverProxy = awsServerlessExpress.createServer(app, null, binaryMimeTypes);

module.exports.universal = (event, context) => awsServerlessExpress.proxy(serverProxy, event, context);

service: project-serverless # Choose your project name. It is up to you.

useDotenv: true

plugins:
  - serverless-apigw-binary
  - serverless-offline
  - serverless-associate-waf

provider:
  name: aws
  runtime: nodejs18.x
  memorySize: 2048
  timeout: 10
  region: us-east-1
  apiGateway: 
   minimumCompressionSize: 1024

package:
  excludeDevDependencies: true
  patterns:
    - '!.angular/**'
    - '!.github/**'
    - '!.vscode/**'
    - '!coverage/**'
    - '!libs/**'
    - '!src/**'
    - '!node_modules/**'
    - '!e2e/**'
    - '!firebug-lite/**'
    - '!.eslintignore'
    - '!.eslintrc.base.json'
    - '!.eslintrc.json'
    - '!.gitignore'
    - '!.prettierignore'
    - '!.prettierrc'
    - '!jest.config.app.ts'
    - '!jest.config.ts'
    - '!jest.preset.js'
    - '!nx.json'
    - '!README.md'
    - '!server.ts'
    - '!tailwind.config.js'
    - '!tsconfig.app.json'
    - '!tsconfig.base.json'
    - '!tsconfig.editor.json'
    - '!tsconfig.json'
    - '!tsconfig.server.json'
    - '!tsconfig.spec.json'
    - node_modules/@vendia/**
    - node_modules/aws-serverless-express/**
    - node_modules/binary-case/**
    - node_modules/type-is/**
    - node_modules/media-typer/**
    - node_modules/mime-types/**
    - node_modules/mime-db/**

custom:
  serverless-offline:
    noPrependStageInUrl: true
    printOutput: true
  contentCompression: 1024
  apigwBinary:
    types:
      - '*/*'

functions:
  api:
    handler: lambda.universal
    events:
      - http: ANY /{proxy+}
      - http: ANY /

"start:serverless": "nx run {YOUR ORG}:serverless && serverless offline start",
"build:serverless": "nx run {YOUR ORG}:serverless"

npm run start:serverless