webpack.dev.js

const { execSync } = require('child_process');
const path = require('path');
const { merge } = require('webpack-merge');
const { setupWebpackDotenvFilesForEnv, setupDotenvFilesForEnv } = require('./dotenv');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasurePlugin({ disable: !process.env.MEASURE });

const env = process.env.DEV_ENV ?? 'development';
const isTilt = env === 'tilt';
setupDotenvFilesForEnv({ env });
const webpackCommon = require('./webpack.common.js');

const RELATIVE_DIRNAME = process.env._RELATIVE_DIRNAME;
const IS_PROJECT_ROOT_DIR = process.env._IS_PROJECT_ROOT_DIR;
const SRC_DIR = process.env._SRC_DIR;
const COMMON_DIR = process.env._COMMON_DIR;
const PUBLIC_PATH = process.env._PUBLIC_PATH;
const DIST_DIR = process.env._DIST_DIR;
const HOST = process.env._HOST;
const PORT = process.env._PORT;
const PROXY_PROTOCOL = process.env._PROXY_PROTOCOL;
const PROXY_HOST = process.env._PROXY_HOST;
const PROXY_PORT = process.env._PROXY_PORT;
const DEPLOYMENT_MODE = process.env._DEPLOYMENT_MODE;
const AUTH_METHOD = process.env._AUTH_METHOD;
const BASE_PATH = DEPLOYMENT_MODE === 'kubeflow' ? '/workspaces' : PUBLIC_PATH;

// Get the kubeconfig token at startup as a fallback for standalone dev mode.
const getKubeconfigToken = () => {
  try {
    const token = execSync(
      "kubectl config view --raw --minify --flatten -o jsonpath='{.users[].user.token}'",
    )
      .toString()
      .trim();
    const username = execSync("kubectl auth whoami -o jsonpath='{.status.userInfo.username}'")
      .toString()
      .trim();
    // eslint-disable-next-line no-console
    console.info('Logged in as user:', username);
    return token;
  } catch (error) {
    // eslint-disable-next-line no-console
    console.error('Failed to get Kubernetes token:', error.message);
    return '';
  }
};

const fallbackToken = AUTH_METHOD === 'user_token' ? getKubeconfigToken() : '';

// Build static proxy headers for auth methods that don't need dynamic forwarding.
const getProxyHeaders = () => {
  if (AUTH_METHOD === 'internal') {
    return {
      'kubeflow-userid': 'user@example.com',
    };
  }
  // For user_token, auth headers are set dynamically in onProxyReq below.
  return {};
};

// When using user_token auth, dynamically forward the authorization header from the
// incoming request if present (e.g. from a host backend proxy with dev impersonation).
// Fall back to the kubeconfig token captured at startup for standalone dev mode.
const onProxyReq = (proxyReq, req) => {
  if (AUTH_METHOD !== 'user_token') {
    return;
  }
  const incomingAuth = req.headers.authorization;
  if (incomingAuth) {
    proxyReq.setHeader('Authorization', incomingAuth);
    const token = incomingAuth.replace(/^Bearer\s+/i, '');
    proxyReq.setHeader('x-forwarded-access-token', token);
  } else if (fallbackToken) {
    proxyReq.setHeader('Authorization', `Bearer ${fallbackToken}`);
    proxyReq.setHeader('x-forwarded-access-token', fallbackToken);
  }
};

module.exports = smp.wrap(
  merge(
    {
      plugins: [
        ...setupWebpackDotenvFilesForEnv({
          directory: RELATIVE_DIRNAME,
          env,
          isRoot: IS_PROJECT_ROOT_DIR,
        }),
      ],
    },
    webpackCommon('development'),
    {
      mode: 'development',
      devtool: 'eval-source-map',
      optimization: {
        runtimeChunk: 'single',
        removeEmptyChunks: true,
      },
      devServer: {
        host: HOST,
        port: PORT,
        compress: true,
        historyApiFallback: {
          index: `${BASE_PATH}/index.html`.replace('//', '/'),
        },
        // In Tilt mode, disable HMR and live reload since the Istio gateway
        // doesn't route WebSocket traffic. Webpack still watches files and
        // rebuilds on changes; just refresh the browser manually.
        hot: !isTilt,
        liveReload: !isTilt,
        open: [BASE_PATH],
        proxy: [
          {
            context: ['/api', '/workspaces/api'],
            target: {
              host: PROXY_HOST,
              protocol: PROXY_PROTOCOL,
              port: PROXY_PORT,
            },
            changeOrigin: true,
            headers: getProxyHeaders(),
            onProxyReq,
          },
        ],
        devMiddleware: {
          stats: 'errors-only',
          publicPath: BASE_PATH,
        },
        client: isTilt
          ? false
          : {
              overlay: false,
            },
        static: {
          directory: DIST_DIR,
          publicPath: BASE_PATH,
        },
        onListening: (devServer) => {
          if (devServer) {
            // eslint-disable-next-line no-console
            console.log(
              `\x1b[32m✓ Dashboard available at: \x1b[4mhttp://localhost:${
                devServer.server.address().port
              }\x1b[0m`,
            );
          }
        },
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            include: [
              SRC_DIR,
              COMMON_DIR,
              path.resolve(RELATIVE_DIRNAME, 'node_modules/@patternfly'),
              path.resolve(
                RELATIVE_DIRNAME,
                'node_modules/mod-arch-shared/node_modules/@patternfly',
              ),
            ],
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
      plugins: [
        new ForkTsCheckerWebpackPlugin(),
        new ReactRefreshWebpackPlugin({ overlay: false }),
      ],
    },
  ),
);