Add LiquidJS view engine and static UI serving to server

hotlong · hotlong · commit fe7503b0c27a · 2026-01-09T02:57:23.000+08:00
Integrated LiquidJS as the view engine in the NestJS server and added a sample index.liquid view for debugging. Configured @nestjs/serve-static to serve the UI build from /assets/ui. Updated dependencies in server and UI packages, improved tsup config for UI, and adjusted React type versions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/server/package.json b/packages/server/package.json
@@ -13,11 +13,13 @@
     "@nestjs/common": "^10.0.0",
     "@nestjs/core": "^10.0.0",
     "@nestjs/platform-express": "^10.0.0",
+    "@nestjs/serve-static": "^4.0.2",
     "@objectql/api": "*",
     "@objectql/core": "*",
     "@objectql/driver-knex": "*",
     "@objectql/driver-mongo": "*",
     "better-auth": "^1.4.10",
+    "liquidjs": "^10.24.0",
     "pg": "^8.11.3",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.8.1"
diff --git a/packages/server/src/app.controller.ts b/packages/server/src/app.controller.ts
@@ -1,12 +1,13 @@
-import { Controller, Get } from '@nestjs/common';
+import { Controller, Get, Render } from '@nestjs/common';
 import { AppService } from './app.service';
 
 @Controller()
 export class AppController {
   constructor(private readonly appService: AppService) {}
 
   @Get()
-  getHello(): string {
-    return this.appService.getHello();
+  @Render('index')
+  root() {
+    return { message: 'Hello world!' };
   }
 }
diff --git a/packages/server/src/app.module.ts b/packages/server/src/app.module.ts
@@ -1,11 +1,20 @@
-import { Module } from '@nestjs/common';
+import { Module, MiddlewareConsumer, RequestMethod } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
 import { ObjectQLModule } from './objectql/objectql.module';
 import { AuthModule } from './auth/auth.module';
+import { ServeStaticModule } from '@nestjs/serve-static';
+import { join } from 'path';
 
 @Module({
-  imports: [ObjectQLModule, AuthModule],
+  imports: [
+    ObjectQLModule, 
+    AuthModule,
+    ServeStaticModule.forRoot({
+      rootPath: join(__dirname, '../../../ui/dist'),
+      serveRoot: '/assets/ui',
+    }),
+  ],
   controllers: [AppController],
   providers: [AppService],
 })
diff --git a/packages/server/src/main.ts b/packages/server/src/main.ts
@@ -1,8 +1,17 @@
 import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
+import { NestExpressApplication } from '@nestjs/platform-express';
+import { Liquid } from 'liquidjs';
+import { join } from 'path';
 
 async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
+  const app = await NestFactory.create<NestExpressApplication>(AppModule);
+  
+  const engine = new Liquid();
+  app.engine('liquid', engine.express());
+  app.setViewEngine('liquid');
+  app.setBaseViewsDir(join(__dirname, '..', 'views'));
+
   // NestJS by default listens on 3000
   await app.listen(3000);
   console.log(`Application is running on: ${await app.getUrl()}`);
diff --git a/packages/server/views/index.liquid b/packages/server/views/index.liquid
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ObjectQL Server (Debug Mode)</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- React Dependencies -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    
+    <!-- Babel for in-browser JSX compilation -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div id="root" class="p-8"></div>
+
+    <script type="text/babel">
+        const { useState, useEffect } = React;
+
+        // --- Inline Components for Debugging ---
+        
+        function Button({ children, onClick, className }) {
+            return (
+                <button 
+                    onClick={onClick}
+                    className={`px-4 py-2 bg-stone-900 text-white rounded hover:bg-stone-800 transition ${className}`}
+                >
+                    {children}
+                </button>
+            );
+        }
+
+        function FieldWrapper({ label, description, children }) {
+             return (
+                <div className="mb-4 space-y-1.5">
+                    <label className="block text-sm font-medium leading-none">{label}</label>
+                    {children}
+                    {description && <p className="text-[0.8rem] text-stone-500">{description}</p>}
+                </div>
+            );
+        }
+
+        function StringField({ label, description, value, onChange }) {
+            return (
+                <FieldWrapper label={label} description={description}>
+                    <input 
+                        type="text" 
+                        value={value} 
+                        onChange={(e) => onChange(e.target.value)}
+                        className="flex h-10 w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-stone-950"
+                    />
+                </FieldWrapper>
+            );
+        }
+
+        function NumberField({ label, description, value, onChange }) {
+             return (
+                <FieldWrapper label={label} description={description}>
+                    <input 
+                        type="number" 
+                        value={value} 
+                        onChange={(e) => onChange(Number(e.target.value))}
+                        className="flex h-10 w-full rounded-md border border-stone-200 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-stone-950"
+                    />
+                </FieldWrapper>
+            );
+        }
+
+        function BooleanField({ label, description, value, onChange }) {
+             return (
+                <div className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                        <label className="text-base font-medium">{label}</label>
+                        {description && <p className="text-sm text-stone-500">{description}</p>}
+                    </div>
+                    <input 
+                        type="checkbox" 
+                        checked={value} 
+                        onChange={(e) => onChange(e.target.checked)}
+                        className="h-4 w-4"
+                    />
+                </div>
+            );
+        }
+
+        // --- Main App ---
+
+        function App() {
+            const [name, setName] = useState('My Project');
+            const [budget, setBudget] = useState(5000);
+            const [isPublic, setIsPublic] = useState(true);
+
+            return (
+                <div className="max-w-md mx-auto bg-white p-6 rounded-lg shadow-lg border space-y-6">
+                    <div>
+                        <h1 className="text-2xl font-bold">New Project</h1>
+                        <p className="text-stone-500">Create a new project using Inline Components</p>
+                    </div>
+
+                    <div className="space-y-4">
+                        <StringField 
+                            label="Project Name" 
+                            description="Public display name"
+                            value={name} 
+                            onChange={setName} 
+                        />
+                        
+                        <NumberField 
+                            label="Budget" 
+                            description="Total budget in USD"
+                            value={budget} 
+                            onChange={setBudget} 
+                        />
+                        
+                        <BooleanField 
+                            label="Public Access" 
+                            description="Anyone can view this project"
+                            value={isPublic} 
+                            onChange={setIsPublic} 
+                        />
+
+                        <div className="pt-4 flex justify-end">
+                            <Button onClick={() => alert(JSON.stringify({ name, budget, isPublic }, null, 2))}>
+                                Create Project
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
+        const root = ReactDOM.createRoot(document.getElementById('root'));
+        root.render(<App />);
+    </script>
+</body>
+</html>
+
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -9,8 +9,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "lint": "eslint src/**",
     "test": "echo \"No tests specified\" && exit 0"
   },
@@ -19,8 +19,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.0",
     "react": "^18.2.0",
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm', 'iife'],
+  globalName: 'ObjectQLUI',
+  dts: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+  noExternal: ['clsx', 'tailwind-merge', 'class-variance-authority', '@radix-ui/react-label', '@radix-ui/react-slot', '@radix-ui/react-checkbox', 'lucide-react', 'react-hook-form', 'zod', '@hookform/resolvers'],
+  define: {
+    'process.env.NODE_ENV': '"production"'
+  },
+  minify: true,
+  target: 'es2020'
+})
