support both 'npm run build' and 'npm run dev'

Author: ryanontheinstide

README.md

@@ -170,6 +170,7 @@ Install dependencies
 ```bash
 cd ui
 npm install --legacy-peer-deps
+npm install --save-dev cross-env
 ```
 
 Run local dev server:

ui/README.md

@@ -20,6 +20,10 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
+> **Note for ComfyUI Node Development:**  
+> - `npm run dev` uses a separate `./.next` directory that won't affect the ComfyUI node's static files
+> - `npm run build` creates production files in `../nodes/web/static` for use by the ComfyUI node
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

ui/next.config.ts

@@ -19,13 +19,21 @@ const getExtensionName = () => {
 
 const extensionName = getExtensionName();
 
+// Check if we're in development mode
+// This is set by the NEXT_PUBLIC_DEV environment variable in package.json scripts
+const isDev = process.env.NEXT_PUBLIC_DEV === 'true';
+console.log(`Running in ${isDev ? 'DEVELOPMENT' : 'PRODUCTION'} mode`);
+console.log(`Output directory: ${isDev ? './.next' : '../nodes/web/static'}`);
+
+const distDir = isDev ? './.next' : '../nodes/web/static';
+
 const nextConfig: NextConfig = {
-  output: 'export',
-  distDir: '../nodes/web/static',
+  output: isDev ? undefined : 'export',
+  distDir: distDir,
   // Set base path for the app when served from ComfyUI
-  basePath: `/extensions/${extensionName}/static`,
+  basePath: isDev ? '' : `/extensions/${extensionName}/static`,
   // Set asset prefix for static files
-  assetPrefix: `/extensions/${extensionName}/static`,
+  assetPrefix: isDev ? '' : `/extensions/${extensionName}/static`,
   // Disable image optimization since we're doing static export
   images: {
     unoptimized: true,
@@ -34,11 +42,13 @@ const nextConfig: NextConfig = {
     // Only run ESLint during development, not during builds
     ignoreDuringBuilds: true,
   },
-  // Test comment
 };
 
 export default nextConfig;
 
-//to build:
-// cd ui
-// ./node_modules/.bin/next build
+/*
+Build Commands:
+--------------
+- Development: npm run dev (uses ./.next directory)
+- Production: npm run build (uses ../nodes/web/static directory)
+*/

ui/package-lock.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "dev:https": "next dev --experimental-https",
-    "build": "next build",
+    "dev": "cross-env NEXT_PUBLIC_DEV=true next dev",
+    "dev:https": "cross-env NEXT_PUBLIC_DEV=true next dev --experimental-https",
+    "build": "cross-env NEXT_PUBLIC_DEV=false next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -34,6 +34,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "cross-env": "^7.0.3",
     "eslint": "^8",
     "eslint-config-next": "15.0.2",
     "postcss": "^8",

ui/package.json

@@ -34,7 +34,8 @@
     "../nodes/web/static/types/**/*.ts",
     ".next/types/**/*.ts",
     "next-env.d.ts",
-    "out/types/**/*.ts"
+    "out/types/**/*.ts",
+    "./.next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"