Step 3 - Finish

Author: klerick

apps/host-application/project.json

@@ -62,7 +62,7 @@
           "sourceMap": true
         }
       },
-      "defaultConfiguration": "production"
+      "defaultConfiguration": "development"
     },
     "serve": {
       "dependsOn": ["^build"],
@@ -93,10 +93,22 @@
         "jestConfig": "apps/host-application/jest.config.ts"
       }
     },
+    "build-static": {
+      "dependsOn": ["build"],
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "cp dist/apps/host-application/browser/index.csr.html dist/apps/host-application/browser/index.html",
+          "touch dist/apps/host-application/browser/404.html"
+        ],
+        "parallel": false
+      }
+    },
     "serve-static": {
       "executor": "@nx/web:file-server",
       "options": {
-        "buildTarget": "host-application:build",
+        "buildTarget": "host-application:build-static",
+        "port": 4200,
         "staticFilePath": "dist/apps/host-application/browser",
         "spa": true
       }

apps/host-application/src/server.ts

@@ -5,38 +5,14 @@ import {
   writeResponseToNodeResponse,
 } from '@angular/ssr/node';
 import express from 'express';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 
-const serverDistFolder = dirname(fileURLToPath(import.meta.url));
-const browserDistFolder = resolve(serverDistFolder, '../browser');
+const pathToSSRServer = pathToFileURL(join(dirname(fileURLToPath(import.meta.url)),'server.ssr.mjs')).toString()
 
 const app = express();
 const angularApp = new AngularNodeAppEngine();
 
-/**
- * Example Express Rest API endpoints can be defined here.
- * Uncomment and define endpoints as necessary.
- *
- * Example:
- * ```ts
- * app.get('/api/**', (req, res) => {
- *   // Handle API request
- * });
- * ```
- */
-
-/**
- * Serve static files from /browser
- */
-app.use(
-  express.static(browserDistFolder, {
-    maxAge: '1y',
-    index: false,
-    redirect: false,
-  })
-);
-
 /**
  * Handle all other requests by rendering the Angular application.
  */
@@ -53,7 +29,7 @@ app.use('/**', (req, res, next) => {
  * Start the server if this module is the main entry point.
  * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
  */
-if (isMainModule(import.meta.url)) {
+if (isMainModule(pathToSSRServer)) {
   const port = process.env['PORT'] || 4000;
   app.listen(port, () => {
     console.log(`Node Express server listening on http://localhost:${port}`);