feat: made it work

Author: cskiwi

README.md

@@ -12,11 +12,11 @@ comes with a LSP for Vim users.
 
 ## Start the application
 
-Run `npx nx serve bun-test` to start the development server. Happy coding!
+Run `npx nx serve app` to start the development server. Happy coding!
 
 ## Build for production
 
-Run `npx nx build bun-test` to build the application. The build artifacts are stored in the output directory (e.g. `dist/` or `build/`), ready to be deployed.
+Run `npx nx build app` to build the application. The build artifacts are stored in the output directory (e.g. `dist/` or `build/`), ready to be deployed.
 
 ## Running tasks
 

apps/api/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/api/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'api',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/apps/api',
+};

apps/api/project.json

@@ -0,0 +1,31 @@
+{
+  "name": "api",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/api/src",
+  "projectType": "application",
+  "tags": ["scope:app"],
+  "targets": {
+    "serve": {
+      "executor": "@nx/js:node",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "api:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "api:build:development"
+        },
+        "production": {
+          "buildTarget": "api:build:production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/api/jest.config.ts"
+      }
+    }
+  }
+}

apps/api/src/main.ts

@@ -0,0 +1,22 @@
+/**
+ * This is not a production server yet!
+ * This is only a minimal backend to get started.
+ */
+
+import { Logger } from '@nestjs/common';
+import { NestFactory } from '@nestjs/core';
+
+import { AppModule } from '@app/backend-root';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  const globalPrefix = 'api';
+  app.setGlobalPrefix(globalPrefix);
+  const port = process.env.PORT || 3000;
+  await app.listen(port);
+  Logger.log(
+    `🚀 Application is running on: http://localhost:${port}/${globalPrefix}`,
+  );
+}
+
+bootstrap();

apps/api/tsconfig.app.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["node"],
+    "emitDecoratorMetadata": true,
+    "target": "es2021"
+  },
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

apps/api/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "esModuleInterop": true
+  }
+}

apps/api/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

apps/api/webpack.config.js

@@ -0,0 +1,18 @@
+const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
+const { join } = require('path');
+
+module.exports = {
+  output: {
+    path: join(__dirname, '../../dist/apps/api'),
+  },
+  plugins: [
+    new NxAppWebpackPlugin({
+      target: 'node',
+      compiler: 'tsc',
+      main: './src/main.ts',
+      tsConfig: './tsconfig.app.json',
+      optimization: false,
+      outputHashing: 'none',
+    }),
+  ],
+};

apps/bun-test-e2e/.eslintrc.json renamed to apps/app-e2e/.eslintrc.json

@@ -25,9 +25,9 @@ export default defineConfig({
   },
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'bun nx serve bun-test',
+    command: 'bun nx serve app',
     url: 'http://localhost:4200',
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: !process.env['CI'],
     cwd: workspaceRoot,
   },
   projects: [

apps/bun-test-e2e/playwright.config.ts renamed to apps/app-e2e/playwright.config.ts

@@ -0,0 +1,9 @@
+{
+  "name": "app-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/app-e2e/src",
+  "implicitDependencies": ["app"],
+  "// targets": "to see all targets run: nx show project app-e2e --web",
+  "targets": {}
+}

apps/app-e2e/project.json

@@ -1,9 +1,9 @@
 /* eslint-disable */
 export default {
-  displayName: 'bun-test',
+  displayName: 'app',
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: '../../coverage/apps/bun-test',
+  coverageDirectory: '../../coverage/apps/app',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/bun-test-e2e/src/example.spec.ts renamed to apps/app-e2e/src/example.spec.ts

@@ -1,33 +1,45 @@
 {
-  "name": "bun-test",
+  "name": "app",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "prefix": "app",
-  "sourceRoot": "apps/bun-test/src",
-  "tags": [],
+  "sourceRoot": "apps/app/src",
+  "tags": ["scope:app"],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/apps/bun-test",
-        "index": "apps/bun-test/src/index.html",
-        "browser": "apps/bun-test/src/main.ts",
+        "outputPath": "dist/apps/app",
+        "index": "apps/app/src/index.html",
+        "browser": "apps/app/src/main.ts",
         "polyfills": ["zone.js"],
-        "tsConfig": "apps/bun-test/tsconfig.app.json",
+        "tsConfig": "apps/app/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
           {
             "glob": "**/*",
-            "input": "apps/bun-test/public"
+            "input": "apps/app/public"
           }
         ],
-        "styles": ["apps/bun-test/src/styles.scss"],
+        "styles": [
+          "@angular/material/prebuilt-themes/magenta-violet.css",
+          "apps/app/src/styles.scss"
+        ],
+        "externalDependencies": [
+          "@nestjs/microservices",
+          "@nestjs/microservices/microservices-module",
+          "@nestjs/websockets",
+          "@nestjs/websockets/socket-module",
+          "cache-manager",
+          "class-transformer",
+          "class-validator"
+        ],
         "scripts": [],
-        "server": "apps/bun-test/src/main.server.ts",
+        "server": "apps/app/src/main.server.ts",
         "prerender": true,
         "ssr": {
-          "entry": "apps/bun-test/server.ts"
+          "entry": "apps/app/server/server.ts"
         }
       },
       "configurations": {
@@ -58,18 +70,19 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "buildTarget": "bun-test:build:production"
+          "buildTarget": "app:build:production"
         },
         "development": {
-          "buildTarget": "bun-test:build:development"
+          "buildTarget": "app:build:development",
+          "proxyConfig": "apps/app/proxy.conf.json"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "buildTarget": "bun-test:build"
+        "buildTarget": "app:build"
       }
     },
     "lint": {
@@ -79,7 +92,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/bun-test/jest.config.ts"
+        "jestConfig": "apps/app/jest.config.ts"
       }
     }
   }

apps/bun-test-e2e/tsconfig.json renamed to apps/app-e2e/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}

apps/bun-test/.eslintrc.json renamed to apps/app/.eslintrc.json

@@ -0,0 +1,19 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from '@app/backend-root';
+import { Logger } from '@nestjs/common';
+
+export default async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  app.enableCors({
+    methods: 'GET',
+    maxAge: 3600
+  });
+  app.setGlobalPrefix('api');
+  const port = process.env['PORT'] || 3000;
+
+  await app.listen(port);
+
+  Logger.log(`Server running on http://localhost:${port}`, 'Bootstrap');
+}
+
+bootstrap();

apps/bun-test/jest.config.ts renamed to apps/app/jest.config.ts

@@ -3,10 +3,13 @@ import { CommonEngine } from '@angular/ssr';
 import express from 'express';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';
-import bootstrap from './src/main.server';
+import bootstrap from '../src/main.server';
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from '@app/backend-root';
+import { ExpressAdapter } from '@nestjs/platform-express';
 
 // The Express app is exported so that it can be used by serverless Functions.
-export function app(): express.Express {
+export async function app(): Promise<express.Express> {
   const server = express();
   const serverDistFolder = dirname(fileURLToPath(import.meta.url));
   const browserDistFolder = resolve(serverDistFolder, '../browser');
@@ -19,6 +22,7 @@ export function app(): express.Express {
 
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
+
   // Serve static files from /browser
   server.get(
     '**',
@@ -28,30 +32,42 @@ export function app(): express.Express {
     })
   );
 
-  // All regular routes use the Angular engine
+  // All regular routes use the Angular engine for rendering
+  // except for /api/** routes
   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));
+    if (req.originalUrl.startsWith('/api')) {
+      // Handle API routes separately
+      next();
+    } else {
+      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));
+    }
   });
 
+  // setup NestJS app
+  const adapter = new ExpressAdapter(server);
+  const app = await NestFactory.create(AppModule, adapter);
+  app.setGlobalPrefix('api');
+  await app.init();
+
   return server;
 }
 
-function run(): void {
+async function run(): Promise<void> {
   const port = process.env['PORT'] || 4000;
 
   // Start up the Node server
-  const server = app();
+  const server = await app();
   server.listen(port, () => {
     console.log(`Node Express server listening on http://localhost:${port}`);
   });