feat: use npm run dev-server in docker-compose (#31876)

docker-compose.yml

@@ -173,6 +173,10 @@ services:
       BUILD_SUPERSET_FRONTEND_IN_DOCKER: true
       NPM_RUN_PRUNE: false
       SCARF_ANALYTICS: "${SCARF_ANALYTICS:-}"
+      # configuring the dev-server to use the host.docker.internal to connect to the backend
+      superset: "http://host.docker.internal:8088"
+    ports:
+      - "127.0.0.1:9000:9000"  # exposing the dynamic webpack dev server
     container_name: superset_node
     command: ["/app/docker/docker-frontend.sh"]
     env_file:

docker/docker-frontend.sh

@@ -36,7 +36,9 @@ if [ "$BUILD_SUPERSET_FRONTEND_IN_DOCKER" = "true" ]; then
     npm install
 
     echo "Start webpack dev server"
-    npm run dev
+    # start the webpack dev server, serving dynamically at http://localhost:9000
+    # it proxies to the backend served at http://localhost:8088
+    npm run dev-server
 
 else
     echo "Skipping frontend build steps - YOU NEED TO RUN IT MANUALLY ON THE HOST!"

superset-frontend/webpack.config.js

@@ -521,26 +521,24 @@ Object.entries(packageConfig.dependencies).forEach(([pkg, relativeDir]) => {
 });
 console.log(''); // pure cosmetic new line
 
-let proxyConfig = getProxyConfig();
-
 if (isDevMode) {
-  config.devServer = {
-    onBeforeSetupMiddleware(devServer) {
-      // load proxy config when manifest updates
-      const { afterEmit } = getCompilerHooks(devServer.compiler);
+  let proxyConfig = getProxyConfig();
+  // Set up a plugin to handle manifest updates
+  config.plugins = config.plugins || [];
+  config.plugins.push({
+    apply: compiler => {
+      const { afterEmit } = getCompilerHooks(compiler);
       afterEmit.tap('ManifestPlugin', manifest => {
         proxyConfig = getProxyConfig(manifest);
       });
     },
+  });
+
+  config.devServer = {
     historyApiFallback: true,
     hot: true,
     port: devserverPort,
-    // Only serves bundled files from webpack-dev-server
-    // and proxy everything else to Superset backend
-    proxy: [
-      // functions are called for every request
-      () => proxyConfig,
-    ],
+    proxy: [() => proxyConfig],
     client: {
       overlay: {
         errors: true,
@@ -549,7 +547,9 @@ if (isDevMode) {
       },
       logging: 'error',
     },
-    static: path.join(process.cwd(), '../static/assets'),
+    static: {
+      directory: path.join(process.cwd(), '../static/assets'),
+    },
   };
 }
 

superset-frontend/webpack.proxy-config.js

@@ -24,12 +24,12 @@ const yargs = require('yargs');
 const parsedArgs = yargs.argv;
 
 const parsedEnvArg = () => {
+  let envArgs = {};
   if (parsedArgs.env) {
-    return yargs(parsedArgs.env).argv;
+    envArgs = yargs(parsedArgs.env).argv;
   }
-  return {};
+  return { ...process.env, ...envArgs };
 };
-
 const { supersetPort = 8088, superset: supersetUrl = null } = parsedEnvArg();
 const backend = (supersetUrl || `http://localhost:${supersetPort}`).replace(
   '//+$/',