Enable backend to serve frontend (twentyhq#4461)

Basic POC to have frontend served by backend

Author: FelixMalfait

package.json

@@ -34,7 +34,7 @@
     "@nestjs/jwt": "^10.0.3",
     "@nestjs/passport": "^9.0.3",
     "@nestjs/platform-express": "^9.0.0",
-    "@nestjs/serve-static": "^3.0.0",
+    "@nestjs/serve-static": "^4.0.1",
     "@nestjs/terminus": "^9.2.2",
     "@nestjs/typeorm": "^10.0.0",
     "@nivo/calendar": "^0.84.0",

packages/twenty-front/src/config/index.ts

@@ -5,10 +5,29 @@ declare global {
   }
 }
 
+const getDefaultUrl = () => {
+  if (
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '127.0.0.1'
+  ) {
+    // In development environment front and backend usually run on seperate ports
+    // we set the default value to localhost:3000.
+    // It dev context, we use env vars to overwrite it
+    return 'http://localhost:3000';
+  } else {
+    // Outside of localhost we assume that they run on the same port
+    // because the backend will serve the frontend
+    // It prod context, we use env-config.js + window var to ovewrite it
+    return `${window.location.protocol}//${window.location.hostname}${
+      window.location.port ? `:${window.location.port}` : ''
+    }`;
+  }
+};
+
 export const REACT_APP_SERVER_BASE_URL =
   window._env_?.REACT_APP_SERVER_BASE_URL ||
   process.env.REACT_APP_SERVER_BASE_URL ||
-  'http://localhost:3000';
+  getDefaultUrl();
 
 export const REACT_APP_SERVER_AUTH_URL =
   window._env_?.REACT_APP_SERVER_AUTH_URL ||

packages/twenty-server/src/app.module.ts

@@ -1,6 +1,10 @@
-import { Module } from '@nestjs/common';
+import { DynamicModule, Module } from '@nestjs/common';
 import { GraphQLModule } from '@nestjs/graphql';
 import { ConfigModule } from '@nestjs/config';
+import { ServeStaticModule } from '@nestjs/serve-static';
+
+import { existsSync } from 'fs';
+import { join } from 'path';
 
 import { YogaDriver, YogaDriverConfig } from '@graphql-yoga/nestjs';
 
@@ -26,6 +30,22 @@ import { GraphQLConfigModule } from './graphql-config/graphql-config.module';
     IntegrationsModule,
     CoreModule,
     WorkspaceModule,
+    ...AppModule.getConditionalModules(),
   ],
 })
-export class AppModule {}
+export class AppModule {
+  private static getConditionalModules(): DynamicModule[] {
+    const modules: DynamicModule[] = [];
+    const frontPath = join(__dirname, '..', 'front');
+
+    if (existsSync(frontPath)) {
+      modules.push(
+        ServeStaticModule.forRoot({
+          rootPath: frontPath,
+        }),
+      );
+    }
+
+    return modules;
+  }
+}

yarn.lock

@@ -8134,15 +8134,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nestjs/serve-static@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "@nestjs/serve-static@npm:3.0.1"
+"@nestjs/serve-static@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@nestjs/serve-static@npm:4.0.1"
   dependencies:
     path-to-regexp: "npm:0.2.5"
   peerDependencies:
     "@fastify/static": ^6.5.0
-    "@nestjs/common": ^9.0.0
-    "@nestjs/core": ^9.0.0
+    "@nestjs/common": ^9.0.0 || ^10.0.0
+    "@nestjs/core": ^9.0.0 || ^10.0.0
     express: ^4.18.1
     fastify: ^4.7.0
   peerDependenciesMeta:
@@ -8152,7 +8152,7 @@ __metadata:
       optional: true
     fastify:
       optional: true
-  checksum: 70d47863c37aeb5876fd12feda6a26299af928385dfc24e336f50f7ce9c692a4950c2da449937c5c771ce0bc3869cd1c442cc21b9916973e6e3fbfddb999f1d0
+  checksum: 940119197dd0f9d35db8d59eb871171f857c4507363e50c2a7e9a430dfbf1055fd3bc43969eb5d2863d01b8dd86ae093371bf64cbead343065a7643769455738
   languageName: node
   linkType: hard
 
@@ -45849,7 +45849,7 @@ __metadata:
     "@nestjs/passport": "npm:^9.0.3"
     "@nestjs/platform-express": "npm:^9.0.0"
     "@nestjs/schematics": "npm:^9.0.0"
-    "@nestjs/serve-static": "npm:^3.0.0"
+    "@nestjs/serve-static": "npm:^4.0.1"
     "@nestjs/terminus": "npm:^9.2.2"
     "@nestjs/testing": "npm:^9.0.0"
     "@nestjs/typeorm": "npm:^10.0.0"