diff --git a/docker-compose.yml b/docker-compose.yml index 471ac9363..35891b272 100644 --- a/docker-compose.yml +++ b/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: diff --git a/docker/docker-frontend.sh b/docker/docker-frontend.sh index f85157673..d086908de 100755 --- a/docker/docker-frontend.sh +++ b/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!" diff --git a/superset-frontend/webpack.config.js b/superset-frontend/webpack.config.js index 1434d8818..1bf1f72b0 100644 --- a/superset-frontend/webpack.config.js +++ b/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'), + }, }; } diff --git a/superset-frontend/webpack.proxy-config.js b/superset-frontend/webpack.proxy-config.js index c2070bb92..41835d88f 100644 --- a/superset-frontend/webpack.proxy-config.js +++ b/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( '//+$/',