[WEB-5040] feat: migrate admin app from Next.js to React Router

Author: lifeiscontent

.dockerignore

@@ -66,4 +66,4 @@ temp/
 .react-router/
 build/
 node_modules/
-README.md
+README.md

.gitignore

@@ -102,3 +102,6 @@ dev-editor
 storybook-static
 
 CLAUDE.md
+
+build/
+.react-router/

apps/admin/.dockerignore

@@ -0,0 +1,5 @@
+# React Router - https://github.com/remix-run/react-router-templates/blob/dc79b1a065f59f3bfd840d4ef75cc27689b611e6/default/.dockerignore
+.react-router/
+build/
+node_modules/
+README.md

apps/admin/.eslintrc.js renamed to apps/admin/.eslintrc.cjs

@@ -1,9 +1,14 @@
 module.exports = {
   root: true,
   extends: ["@plane/eslint-config/next.js"],
+  ignorePatterns: [
+    "build/**",
+    "dist/**",
+    ".vite/**",
+  ],
   rules: {
     "no-duplicate-imports": "off",
-    "import/no-duplicates": ["error", { "prefer-inline": false }],
+    "import/no-duplicates": ["error", {"prefer-inline": false}],
     "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
     "@typescript-eslint/no-import-type-side-effects": "error",
     "@typescript-eslint/consistent-type-imports": [
@@ -16,3 +21,5 @@ module.exports = {
     ],
   },
 };
+
+

apps/admin/Dockerfile.admin

@@ -1,103 +1,86 @@
-# syntax=docker/dockerfile:1.7
 FROM node:22-alpine AS base
 
-# Setup pnpm package manager with corepack and configure global bin directory for caching
+WORKDIR /app
+
+ENV TURBO_TELEMETRY_DISABLED=1
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
+ENV CI=1
+
+RUN corepack enable pnpm
+
+# =========================================================================== #
 
-# *****************************************************************************
-# STAGE 1: Build the project
-# *****************************************************************************
 FROM base AS builder
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
 
-ARG TURBO_VERSION=2.5.6
-RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
+RUN pnpm add -g turbo@2.5.8
+
 COPY . .
 
+# Create a pruned workspace for just the admin app
 RUN turbo prune --scope=admin --docker
 
-# *****************************************************************************
-# STAGE 2: Install dependencies & build the project
-# *****************************************************************************
-FROM base AS installer
-
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
+# =========================================================================== #
 
-COPY .gitignore .gitignore
-COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
-RUN corepack enable pnpm
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+FROM base AS installer
 
-COPY --from=builder /app/out/full/ .
-COPY turbo.json turbo.json
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store
+# Build in production mode; we still install dev deps explicitly below
+ENV NODE_ENV=production
 
+# Public envs required at build time (pick up via process.env)
 ARG NEXT_PUBLIC_API_BASE_URL=""
 ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+ARG NEXT_PUBLIC_API_BASE_PATH="/api"
+ENV NEXT_PUBLIC_API_BASE_PATH=$NEXT_PUBLIC_API_BASE_PATH
 
 ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
 ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
-
 ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
 ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
 
 ARG NEXT_PUBLIC_SPACE_BASE_URL=""
 ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
-
 ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
 ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
 
+ARG NEXT_PUBLIC_LIVE_BASE_URL=""
+ENV NEXT_PUBLIC_LIVE_BASE_URL=$NEXT_PUBLIC_LIVE_BASE_URL
+ARG NEXT_PUBLIC_LIVE_BASE_PATH="/live"
+ENV NEXT_PUBLIC_LIVE_BASE_PATH=$NEXT_PUBLIC_LIVE_BASE_PATH
+
 ARG NEXT_PUBLIC_WEB_BASE_URL=""
 ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+ARG NEXT_PUBLIC_WEB_BASE_PATH=""
+ENV NEXT_PUBLIC_WEB_BASE_PATH=$NEXT_PUBLIC_WEB_BASE_PATH
 
-ENV NEXT_TELEMETRY_DISABLED=1
-ENV TURBO_TELEMETRY_DISABLED=1
-
-RUN pnpm turbo run build --filter=admin
+ARG NEXT_PUBLIC_WEBSITE_URL="https://plane.so"
+ENV NEXT_PUBLIC_WEBSITE_URL=$NEXT_PUBLIC_WEBSITE_URL
+ARG NEXT_PUBLIC_SUPPORT_EMAIL="[email protected]"
+ENV NEXT_PUBLIC_SUPPORT_EMAIL=$NEXT_PUBLIC_SUPPORT_EMAIL
 
-# *****************************************************************************
-# STAGE 3: Copy the project and start it
-# *****************************************************************************
-FROM base AS runner
-WORKDIR /app
-
-# Don't run production as root
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-USER nextjs
-
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=installer /app/apps/admin/.next/standalone ./
-COPY --from=installer /app/apps/admin/.next/static ./apps/admin/.next/static
-COPY --from=installer /app/apps/admin/public ./apps/admin/public
-
-ARG NEXT_PUBLIC_API_BASE_URL=""
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
-ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 
-ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+# Fetch dependencies to cache store, then install offline with dev deps
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store --prod=false
 
-ARG NEXT_PUBLIC_SPACE_BASE_URL=""
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
+# Build only the admin package
+RUN pnpm turbo run build --filter=admin
 
-ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
-ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
+# =========================================================================== #
 
-ARG NEXT_PUBLIC_WEB_BASE_URL=""
-ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+FROM nginx:1.27-alpine AS production
 
-ENV NEXT_TELEMETRY_DISABLED=1
-ENV TURBO_TELEMETRY_DISABLED=1
+COPY apps/admin/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=installer /app/apps/admin/build/client /usr/share/nginx/html
 
 EXPOSE 3000
 
-CMD ["node", "apps/admin/server.js"]
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD curl -fsS http://127.0.0.1:3000/ >/dev/null || exit 1
+
+CMD ["nginx", "-g", "daemon off;"]

apps/admin/app/(all)/(dashboard)/ai/layout.tsx

@@ -6,9 +6,10 @@ import { Loader } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
+import type { Route } from "./+types/page";
 import { InstanceAIForm } from "./form";
 
-const InstanceAIPage = observer(() => {
+const InstanceAIPage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig } = useInstance();
 
@@ -42,4 +43,6 @@ const InstanceAIPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "Artificial Intelligence Settings - God Mode" }];
+
 export default InstanceAIPage;

apps/admin/app/(all)/(dashboard)/ai/page.tsx

@@ -10,16 +10,17 @@ import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
 // components
+import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
+import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
-import githubLightModeImage from "@/public/logos/github-black.png";
-import githubDarkModeImage from "@/public/logos/github-white.png";
 // local components
+import type { Route } from "./+types/page";
 import { InstanceGithubConfigForm } from "./form";
 
-const InstanceGithubAuthenticationPage = observer(() => {
+const InstanceGithubAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -111,4 +112,6 @@ const InstanceGithubAuthenticationPage = observer(() => {
   );
 });
 
+export const meta: Route.MetaFunction = () => [{ title: "GitHub Authentication - God Mode" }];
+
 export default InstanceGithubAuthenticationPage;