Integrate UI with backend

gulpfile.js

@@ -0,0 +1,19 @@
+const { series, src, dest } = require('gulp');
+const { exec } = require('child_process');
+
+function buildUI(cb) {
+  return exec('cd ./views/interactivity && yarn install && yarn ci', cb);
+}
+
+function copyUI() {
+  return src([
+    'views/interactivity/build/static/**/*',
+    'views/interactivity/build/asset-manifest.json',
+  ]).pipe(dest('public'));
+}
+
+function buildBackend(cb) {
+  return exec('yarn build', cb);
+}
+
+exports.default = series([buildUI, copyUI, buildBackend]);

package.json

@@ -23,7 +23,7 @@
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
     "test:e2e": "jest --config ./test/jest-e2e.json",
     "ci": "yarn run build && yarn run lint && yarn run check-format",
-    "app:install": "yarn run build && yarn run migration:run"
+    "app:install": "yarn run gulp && yarn run migration:run"
   },
   "dependencies": {
     "@nestjs/common": "^10.0.0",
@@ -50,8 +50,10 @@
     "@eslint/js": "^9.13.0",
     "@nestjs/cli": "^10.0.0",
     "@nestjs/schematics": "^10.0.0",
+    "@nestjs/serve-static": "^4.0.2",
     "@nestjs/testing": "^10.0.0",
     "@types/express": "^5.0.0",
+    "@types/hbs": "^4.0.4",
     "@types/jest": "^29.5.2",
     "@types/node": "^22.8.1",
     "@types/passport-google-oauth20": "^2.0.16",
@@ -63,6 +65,8 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "global": "^4.4.0",
+    "gulp": "^5.0.0",
+    "gulp-cli": "^3.0.0",
     "jest": "^29.5.0",
     "prettier": "^3.0.0",
     "source-map-support": "^0.5.21",

src/app.module.ts

@@ -1,15 +1,22 @@
 import { Module } from '@nestjs/common';
+import { ServeStaticModule } from '@nestjs/serve-static';
+import { join } from 'path';
 import { AuthModule } from './auth/auth.module';
 import { ConfigModule, ConfigService } from '@nestjs/config';
 import { TypeOrmModule } from '@nestjs/typeorm';
 
 import { DictionaryRecordsModule } from './dictionary-records/dictionary-records.module';
 import { AppController } from './app.controller';
 import { JwtModule } from '@nestjs/jwt';
+import { AppService } from './app.service';
 
 @Module({
   imports: [
     ConfigModule.forRoot({ isGlobal: true }),
+    ServeStaticModule.forRoot({
+      rootPath: join(__dirname, '..', 'public'),
+      serveRoot: '/static',
+    }),
     TypeOrmModule.forRootAsync({
       imports: [ConfigModule],
       useFactory: (configService: ConfigService) => ({
@@ -30,5 +37,7 @@ import { JwtModule } from '@nestjs/jwt';
     JwtModule,
   ],
   controllers: [AppController],
+  providers: [AppService],
+  exports: [AppService],
 })
 export class AppModule {}

src/app.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@nestjs/common';
+import * as fs from 'fs';
+import * as path from 'path';
+
+@Injectable()
+export class AppService {
+  private manifest: Record<string, any>;
+
+  constructor() {
+    this.loadManifest();
+  }
+
+  private loadManifest() {
+    const manifestPath = path.join(
+      __dirname,
+      '..',
+      'public/asset-manifest.json',
+    );
+    this.manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+  }
+
+  getAssetPath(asset: string): string {
+    return this.manifest?.['files']?.[asset] || '';
+  }
+}

src/main.ts

@@ -1,13 +1,17 @@
 import { NestFactory } from '@nestjs/core';
 import { NestExpressApplication } from '@nestjs/platform-express';
 import { join } from 'path';
+import * as hbs from 'hbs';
 
 import { AppModule } from './app.module';
+import { AppService } from './app.service';
 
 async function bootstrap() {
   const app = await NestFactory.create<NestExpressApplication>(AppModule);
 
-  app.useStaticAssets(join(__dirname, '..', 'public'));
+  const appService = app.get(AppService);
+  hbs.registerHelper('assetPath', (asset) => appService.getAssetPath(asset));
+
   app.setBaseViewsDir(join(__dirname, '..', 'views'));
   app.setViewEngine('hbs');