feat(ui): switch to nextjs (#760)

Signed-off-by: Petr Kadlec <[email protected]>
Signed-off-by: Petr Bulánek <[email protected]>
Co-authored-by: Petr Bulánek <[email protected]>

Author: kapetr

.dockerignore

@@ -22,6 +22,7 @@ Dockerfile
 
 # Node
 node_modules
+.next
 
 # Misc
 dist

.github/workflows/release.yml

@@ -109,6 +109,20 @@ jobs:
           cache-from: type=registry,ref=ghcr.io/${{ github.repository }}/beeai-server:cache
           cache-to: type=registry,ref=ghcr.io/${{ github.repository }}/beeai-server:cache,mode=max
 
+      - uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./apps/beeai-ui/Dockerfile
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: |
+            ghcr.io/${{ github.repository }}/beeai-ui:${{ github.sha }}
+            ghcr.io/${{ github.repository }}/beeai-ui:${{ steps.version.outputs.version }}
+            ghcr.io/${{ github.repository }}/beeai-ui:${{ steps.version.outputs.latestTag }}
+          cache-from: type=registry,ref=ghcr.io/${{ github.repository }}/beeai-ui:cache
+          cache-to: type=registry,ref=ghcr.io/${{ github.repository }}/beeai-ui:cache,mode=max
+
+
       - run: mise run helm:build
       - run: echo '${{ secrets.GITHUB_TOKEN }}' | helm registry login --username '${{ github.actor }}' --password-stdin ghcr.io
       - run: helm push ./helm/dist/beeai-platform-*.tgz 'oci://ghcr.io/${{ github.repository }}/beeai-platform-chart'

apps/beeai-ui/.dockerignore

@@ -0,0 +1,10 @@
+# Docker
+Dockerfile
+.dockerignore
+
+# Node
+node_modules
+.next
+
+# Misc
+dist

apps/beeai-ui/.env.example

@@ -1,13 +1,16 @@
+API_URL='http://127.0.0.1:8333'
+
 ############# OPTIONAL #############
 
 # Default: 'BeeAI'
-VITE_APP_NAME=
+NEXT_PUBLIC_APP_NAME=
 
 # Default: '/bee.svg'
-VITE_APP_FAVICON_SVG=
-
-# Default: 'http://localhost:8333'
-VITE_API_SERVER_TARGET=
+NEXT_PUBLIC_APP_FAVICON_SVG=
 
 # Default: 'http://localhost:6006'
-VITE_PHOENIX_SERVER_TARGET=
+NEXT_PUBLIC_PHOENIX_SERVER_TARGET='http://localhost:6006'
+
+# Custom navigation structure in JSON format 
+# See ./src/modules/nav/schema.ts for the schema definition
+NEXT_PUBLIC_NAV_ITEMS=

apps/beeai-ui/.gitignore

@@ -0,0 +1 @@
+/.next/

apps/beeai-ui/Dockerfile

@@ -0,0 +1,48 @@
+FROM node:23-alpine AS base
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable pnpm
+
+FROM base AS builder
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV API_URL=http://beeai-platform-svc:8333
+
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm i --frozen-lockfile
+RUN pnpm run --filter=@i-am-bee/beeai-ui build
+RUN pnpm deploy --legacy --filter=@i-am-bee/beeai-ui --prod /prod/app
+RUN cp -r apps/beeai-ui/.next /prod/app/.next
+
+FROM base AS runner
+WORKDIR /opt
+
+ENV NODE_ENV=production
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /prod/app/.next/standalone ./
+
+WORKDIR /opt/apps/beeai-ui
+
+COPY --from=builder --chown=nextjs:nodejs /prod/app/.next/static ./.next/static
+COPY --from=builder /prod/app/public ./public
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]

apps/beeai-ui/eslint.config.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { FlatCompat } from '@eslint/eslintrc';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends('next/core-web-vitals', 'next/typescript', 'prettier'),
+  ...compat.plugins('simple-import-sort'),
+  {
+    rules: {
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+    },
+  },
+];
+
+export default eslintConfig;

apps/beeai-ui/eslint.config.mjs

@@ -0,0 +1,84 @@
+/**
+ * Copyright 2025 © BeeAI a Series of LF Projects, LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { NextConfig } from 'next';
+import path from 'path';
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+  sassOptions: {
+    additionalData: `@use 'styles/common' as *; @use 'sass:math';`,
+    // silenceDeprecations: ['mixed-decls', 'global-builtin'],
+    api: 'modern',
+    implementation: 'sass-embedded',
+    quietDeps: true,
+    includePaths: [path.join(__dirname, 'node_modules'), path.join(__dirname, 'src')],
+  },
+  webpack(config) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const fileLoaderRule = config.module.rules.find((rule: any) => rule.test?.test?.('.svg'));
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              svgoConfig: {
+                plugins: [
+                  {
+                    name: 'preset-default',
+                    params: {
+                      overrides: {
+                        removeViewBox: false,
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
+  experimental: {
+    // Disable CSS chunking due to persistent nextjs bug with ordering of css and this seems to help partially.
+    // Nextjs in production build only! puts global styles last so it messes up css specificity.
+    //
+    // We get css modules styles twice but atleast the second css file overwrites them in correct order.
+    //
+    // I think it's actually two issues, first is with sideEffects and external packages, because beeai-ui doesn't
+    // have `sideEffects: false` in package.json and I don't wanna add it because it's vite app, not a library
+    // and we have single `index.ts` in it that exports everything, nextjs bundler doesn't tree shake and sees
+    // all styles as required in a root layout. Having separate exports in package.json helps but doesn't mitigrate
+    // the issue completely see second issue bellow.
+    //
+    // The second issue is IMHO when the same component is imported from the page and layout and from RSC and from
+    // client component simultaneously, this breaks nextjs and as a result puts global styles after css modules styles.
+    // In our codebase it's a case of a Container component. I wasn't able to refactor this cleanly hence this workaround
+    //
+    // https://github.com/vercel/next.js/issues/68207
+    // https://github.com/vercel/next.js/issues/64921
+    cssChunking: false,
+  },
+};
+
+export default nextConfig;