chore(repo): use @nx/webpack/plugin to infer graph client targets (#22955)

graph/client-e2e/cypress-release-static.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
-import setupNodeEvents from './src/plugins/index';
 
 const cypressJsonConfig = {
   fileServerFolder: '.',
@@ -14,9 +13,14 @@ const cypressJsonConfig = {
 };
 export default defineConfig({
   e2e: {
-    ...nxE2EPreset(__dirname),
+    ...nxE2EPreset(__dirname, {
+      webServerCommands: {
+        default:
+          'pnpm exec nx run graph-client:serve --configuration=release-static',
+      },
+    }),
+    baseUrl: 'http://localhost:4205',
     ...cypressJsonConfig,
-    setupNodeEvents,
     /**
      * TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
      * This can cause tests to start breaking where not indended.

graph/client-e2e/cypress-release.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
-import setupNodeEvents from './src/plugins/index';
 
 const cypressJsonConfig = {
   fileServerFolder: '.',
@@ -14,9 +13,13 @@ const cypressJsonConfig = {
 };
 export default defineConfig({
   e2e: {
-    ...nxE2EPreset(__dirname),
+    ...nxE2EPreset(__dirname, {
+      webServerCommands: {
+        default: 'pnpm exec nx run graph-client:serve --configuration=release',
+      },
+    }),
+    baseUrl: 'http://localhost:4203',
     ...cypressJsonConfig,
-    setupNodeEvents,
     /**
      * TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
      * This can cause tests to start breaking where not indended.

graph/client-e2e/cypress-watch-mode.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
-import setupNodeEvents from './src/plugins/index';
 
 const cypressJsonConfig = {
   fileServerFolder: '.',
@@ -14,9 +13,13 @@ const cypressJsonConfig = {
 };
 export default defineConfig({
   e2e: {
-    ...nxE2EPreset(__dirname),
+    ...nxE2EPreset(__dirname, {
+      webServerCommands: {
+        default: 'pnpm exec nx run graph-client:serve --configuration=watch',
+      },
+    }),
+    baseUrl: 'http://localhost:4204',
     ...cypressJsonConfig,
-    setupNodeEvents,
     /**
      * TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
      * This can cause tests to start breaking where not indended.

graph/client-e2e/cypress.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
-import setupNodeEvents from './src/plugins/index';
 
 const cypressJsonConfig = {
   fileServerFolder: '.',
@@ -14,9 +13,13 @@ const cypressJsonConfig = {
 };
 export default defineConfig({
   e2e: {
-    ...nxE2EPreset(__dirname),
+    ...nxE2EPreset(__dirname, {
+      webServerCommands: {
+        default: 'pnpm exec nx run graph-client:serve --configuration=dev-e2e',
+      },
+    }),
+    baseUrl: 'http://localhost:4206',
     ...cypressJsonConfig,
-    setupNodeEvents,
     /**
      * TODO(@nx/cypress): In Cypress v12,the testIsolation option is turned on by default.
      * This can cause tests to start breaking where not indended.

graph/client-e2e/project.json

@@ -8,28 +8,21 @@
       "executor": "@nx/cypress:cypress",
       "options": {
         "testingType": "e2e",
+        "skipServe": true,
         "browser": "chrome"
       },
       "configurations": {
         "dev": {
-          "cypressConfig": "graph/client-e2e/cypress.config.ts",
+          "cypressConfig": "graph/client-e2e/cypress.config.ts"
-          "devServerTarget": "graph-client:serve-base:dev-e2e",
-          "baseUrl": "http://localhost:4206"
         },
         "watch": {
-          "cypressConfig": "graph/client-e2e/cypress-watch-mode.config.ts",
+          "cypressConfig": "graph/client-e2e/cypress-watch-mode.config.ts"
-          "devServerTarget": "graph-client:serve-base:watch",
-          "baseUrl": "http://localhost:4204"
         },
         "release": {
-          "cypressConfig": "graph/client-e2e/cypress-release.config.ts",
+          "cypressConfig": "graph/client-e2e/cypress-release.config.ts"
-          "devServerTarget": "graph-client:serve-base:release",
-          "baseUrl": "http://localhost:4203"
         },
         "release-static": {
-          "cypressConfig": "graph/client-e2e/cypress-release-static.config.ts",
+          "cypressConfig": "graph/client-e2e/cypress-release-static.config.ts"
-          "devServerTarget": "graph-client:serve-base:release-static",
-          "baseUrl": "http://localhost:4205"
         }
       },
       "defaultConfiguration": "dev"

graph/client/postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {
-      config: './graph/client/tailwind.config.js',
+      config: './tailwind.config.js',
     },
     autoprefixer: {},
   },

graph/client/project.json

@@ -31,191 +31,24 @@
       }
     },
     "build-client": {
-      "executor": "@nx/webpack:webpack",
-      "options": {
-        "maxWorkers": 8,
-        "outputPath": "build/apps/graph",
-        "index": "graph/client/src/index.html",
-        "main": "graph/client/src/main.tsx",
-        "tsConfig": "graph/client/tsconfig.app.json",
-        "styles": ["graph/client/src/styles.css"],
-        "scripts": [],
-        "assets": [],
-        "webpackConfig": "graph/client/webpack.config.js",
-        "optimization": false,
-        "outputHashing": "none",
-        "sourceMap": true,
-        "extractCss": true,
-        "namedChunks": false,
-        "extractLicenses": false,
-        "vendorChunk": true,
-        "budgets": [
-          {
-            "type": "initial",
-            "maximumWarning": "2mb",
-            "maximumError": "5mb"
-          }
-        ],
-        "babelUpwardRootMode": true
-      },
       "configurations": {
-        "dev": {
+        "dev": {},
-          "assets": [
+        "nx-console": {},
-            "graph/client/src/favicon.ico",
+        "release": {},
-            "graph/client/src/assets/project-graphs/",
+        "watch": {},
-            "graph/client/src/assets/task-graphs/",
+        "release-static": {},
-            "graph/client/src/assets/generated-project-graphs/",
+        "dev-e2e": {}
-            "graph/client/src/assets/generated-task-graphs/",
-            "graph/client/src/assets/generated-task-inputs/",
-            "graph/client/src/assets/generated-source-maps/",
-            {
-              "input": "graph/client/src/assets/dev",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ]
-        },
-        "dev-e2e": {
-          "assets": [
-            "graph/client/src/favicon.ico",
-            "graph/client/src/assets/project-graphs/",
-            "graph/client/src/assets/task-graphs/",
-            "graph/client/src/assets/task-inputs/",
-            "graph/client/src/assets/source-maps/",
-            {
-              "input": "graph/client/src/assets/dev-e2e",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ]
-        },
-        "nx-console": {
-          "assets": [
-            "graph/client/src/favicon.ico",
-            {
-              "input": "graph/client/src/assets/project-graphs",
-              "output": "/assets/project-graphs",
-              "glob": "e2e.json"
-            },
-            {
-              "input": "graph/client/src/assets/nx-console",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ]
-        },
-        "release": {
-          "assets": [
-            "graph/client/src/favicon.ico",
-            {
-              "input": "graph/client/src/assets/project-graphs",
-              "output": "/assets/project-graphs",
-              "glob": "e2e.json"
-            },
-            {
-              "input": "graph/client/src/assets/task-graphs",
-              "output": "/assets/task-graphs",
-              "glob": "e2e.json"
-            },
-            {
-              "input": "graph/client/src/assets/source-maps",
-              "output": "/assets/source-maps",
-              "glob": "e2e.json"
-            },
-            {
-              "input": "graph/client/src/assets/release",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ],
-          "optimization": true,
-          "sourceMap": false,
-          "extractCss": true,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "vendorChunk": false,
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "2mb",
-              "maximumError": "5mb"
-            }
-          ]
-        },
-        "release-static": {
-          "assets": [
-            "graph/client/src/favicon.ico",
-            {
-              "input": "graph/client/src/assets/project-graphs",
-              "output": "/assets/project-graphs",
-              "glob": "e2e.json"
-            },
-            {
-              "input": "graph/client/src/assets/task-graphs",
-              "output": "/assets/task-graphs",
-              "glob": "e2e.json"
-            },
-            {
-              "input": "graph/client/src/assets/release-static",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ],
-          "optimization": true,
-          "sourceMap": false,
-          "extractCss": true,
-          "namedChunks": false,
-          "extractLicenses": true,
-          "vendorChunk": false,
-          "budgets": [
-            {
-              "type": "initial",
-              "maximumWarning": "2mb",
-              "maximumError": "5mb"
-            }
-          ]
-        },
-        "watch": {
-          "assets": [
-            "graph/client/src/favicon.ico",
-            {
-              "input": "graph/client/src/assets/watch",
-              "output": "/",
-              "glob": "environment.js"
-            }
-          ]
-        }
       },
-      "defaultConfiguration": "release",
+      "defaultConfiguration": "release"
-      "outputs": ["{options.outputPath}"]
     },
     "serve-base": {
-      "executor": "@nx/webpack:dev-server",
       "configurations": {
-        "dev": {
+        "dev": {},
-          "buildTarget": "graph-client:build-client:dev",
+        "nx-console": {},
-          "port": 4201
+        "release": {},
-        },
+        "watch": {},
-        "nx-console": {
+        "release-static": {},
-          "buildTarget": "graph-client:build-client:nx-console",
+        "dev-e2e": {}
-          "port": 4202
-        },
-        "release": {
-          "buildTarget": "graph-client:build-client:release",
-          "port": 4203
-        },
-        "watch": {
-          "buildTarget": "graph-client:build-client:watch",
-          "port": 4204
-        },
-        "release-static": {
-          "buildTarget": "graph-client:build-client:release-static",
-          "port": 4205
-        },
-        "dev-e2e": {
-          "buildTarget": "graph-client:build-client:dev-e2e",
-          "port": 4206
-        }
       },
       "defaultConfiguration": "dev"
     },
@@ -229,6 +62,9 @@
           ],
           "parallel": false
         },
+        "dev-e2e": {
+          "commands": ["npx nx serve-base graph-client --configuration dev-e2e"]
+        },
         "release": {
           "commands": ["npx nx serve-base graph-client --configuration release"]
         },

graph/client/webpack.config.js

@@ -1,20 +1,157 @@
+const { join } = require('node:path');
 // nx-ignore-next-line
-const { withNx, composePlugins } = require('@nx/webpack');
+const { NxWebpackPlugin } = require('@nx/webpack');
 // nx-ignore-next-line
-const { withReact } = require('@nx/react');
+const { NxReactWebpackPlugin } = require('@nx/react');
 
-module.exports = composePlugins(withNx(), withReact(), (config, context) => {
+module.exports = {
-  return {
+  output: {
-    ...config,
+    path: join(__dirname, '../../build/apps/graph'),
-    resolve: {
+  },
-      ...config.resolve,
+  devServer: {
-      alias: {
+    port: getPort(process.env.NX_TASK_TARGET_CONFIGURATION),
-        ...config.resolve.alias,
+    historyApiFallback: {
-        react: 'preact/compat',
+      disableDotRule: true,
-        'react-dom/test-utils': 'preact/test-utils',
-        'react-dom': 'preact/compat', // Must be below test-utils
-        'react/jsx-runtime': 'preact/jsx-runtime',
-      },
     },
-  };
+  },
-});
+  resolve: {
+    alias: {
+      react: 'preact/compat',
+      'react-dom/test-utils': 'preact/test-utils',
+      'react-dom': 'preact/compat', // Must be below test-utils
+      'react/jsx-runtime': 'preact/jsx-runtime',
+    },
+  },
+  plugins: [
+    new NxWebpackPlugin({
+      index: './src/index.html',
+      compiler: 'babel',
+      main: './src/main.tsx',
+      tsConfig: './tsconfig.app.json',
+      styles: ['./src/styles.css'],
+      scripts: [],
+      assets: getAssets(process.env.NX_TASK_TARGET_CONFIGURATION),
+      webpackConfig: './webpack.config.js',
+      outputHashing: 'none',
+    }),
+    new NxReactWebpackPlugin({
+      svgr: false,
+    }),
+  ],
+};
+
+function getPort(nxConfiguration) {
+  switch (nxConfiguration) {
+    case 'nx-console':
+      return 4202;
+    case 'release':
+      return 4203;
+    case 'watch':
+      return 4204;
+    case 'release-static':
+      return 4205;
+    case 'dev-e2e':
+      return 4206;
+    default: // dev
+      return 4201;
+  }
+}
+
+function getAssets(nxConfiguration) {
+  switch (nxConfiguration) {
+    case 'nx-console':
+      return [
+        './src/favicon.ico',
+        {
+          input: './src/assets/project-graphs',
+          output: '/assets/project-graphs',
+          glob: 'e2e.json',
+        },
+        {
+          input: './src/assets/nx-console',
+          output: '/',
+          glob: 'environment.js',
+        },
+      ];
+    case 'release':
+      return [
+        './src/favicon.ico',
+        {
+          input: './src/assets/project-graphs',
+          output: '/assets/project-graphs',
+          glob: 'e2e.json',
+        },
+        {
+          input: './src/assets/task-graphs',
+          output: '/assets/task-graphs',
+          glob: 'e2e.json',
+        },
+        {
+          input: './src/assets/source-maps',
+          output: '/assets/source-maps',
+          glob: 'e2e.json',
+        },
+        {
+          input: './src/assets/release',
+          output: '/',
+          glob: 'environment.js',
+        },
+      ];
+    case 'watch':
+      return [
+        './src/favicon.ico',
+        {
+          input: './src/assets/watch',
+          output: '/',
+          glob: 'environment.js',
+        },
+      ];
+    case 'release-static':
+      return [
+        './src/favicon.ico',
+        {
+          input: './src/assets/project-graphs',
+          output: '/assets/project-graphs',
+          glob: 'e2e.json',
+        },
+        {
+          input: './src/assets/task-graphs',
+          output: '/assets/task-graphs',
+          glob: 'e2e.json',
+        },
+        {
+          input: './src/assets/release-static',
+          output: '/',
+          glob: 'environment.js',
+        },
+      ];
+    case 'dev-e2e':
+      return [
+        './src/favicon.ico',
+        './src/assets/project-graphs/',
+        './src/assets/task-graphs/',
+        './src/assets/task-inputs/',
+        './src/assets/source-maps/',
+        {
+          input: './src/assets/dev-e2e',
+          output: '/',
+          glob: 'environment.js',
+        },
+      ];
+    default: // dev
+      return [
+        './src/favicon.ico',
+        './src/assets/project-graphs/',
+        './src/assets/task-graphs/',
+        './src/assets/generated-project-graphs/',
+        './src/assets/generated-task-graphs/',
+        './src/assets/generated-task-inputs/',
+        './src/assets/generated-source-maps/',
+        {
+          input: './src/assets/dev',
+          output: '/',
+          glob: 'environment.js',
+        },
+      ];
+  }
+}

nx.json

@@ -169,9 +169,6 @@
     "build-ng": {
       "cache": true
     },
-    "build-client": {
-      "cache": true
-    },
     "sitemap": {
       "cache": true
     },
@@ -205,6 +202,13 @@
       "options": {
         "targetName": "test"
       }
+    },
+    {
+      "plugin": "@nx/webpack/plugin",
+      "options": {
+        "serveTargetName": "serve-base",
+        "buildTargetName": "build-client"
+      }
     }
   ],
   "nxCloudAccessToken": "YmZiOWQyNzctOThiZC00MjYwLWI3YTAtZDA3MDg4YWY1YTExfHJlYWQ=",

package.json

@@ -353,7 +353,8 @@
     "tailwind-merge": "^1.8.1",
     "tailwindcss": "3.2.4",
     "tslib": "^2.3.0",
-    "weak-napi": "^2.0.2"
+    "weak-napi": "^2.0.2",
+    "webpack-cli": "^5.1.4"
   },
   "resolutions": {
     "minimist": "^1.2.6",