bazel: add webpack devserver config (#48978)

WORKSPACE

@@ -22,9 +22,9 @@ http_archive(
 
 http_archive(
     name = "aspect_rules_js",
-    sha256 = "1aa0ab76d1f9520bb8993e2d84f82da2a9c87da1e6e8d121dbb4c857a292c2cd",
-    strip_prefix = "rules_js-1.20.1",
-    url = "https://github.com/aspect-build/rules_js/releases/download/v1.20.1/rules_js-v1.20.1.tar.gz",
+    sha256 = "a592fafd8a27b2828318cebbda0003686c6da3318df366b563e8beeffa05a02c",
+    strip_prefix = "rules_js-1.21.0",
+    url = "https://github.com/aspect-build/rules_js/releases/download/v1.21.0/rules_js-v1.21.0.tar.gz",
 )
 
 http_archive(
@@ -155,11 +155,12 @@ esbuild_register_toolchains(
 )
 
 # rules_webpack setup ===========================
+# Commit to include unreleased https://github.com/aspect-build/rules_webpack/commit/4a5f04a4bc504f71d32825124c7872ff721aa1b0
 http_archive(
     name = "aspect_rules_webpack",
-    sha256 = "4f30fb310d625a4045e37b9e04afb2366c56b547a73c935f308e3d9c31b77519",
-    strip_prefix = "rules_webpack-0.9.1",
-    url = "https://github.com/aspect-build/rules_webpack/releases/download/v0.9.1/rules_webpack-v0.9.1.tar.gz",
+    sha256 = "8d81f8d018127c72270ea4b7287be5c4ff63d9656a34334c305d52f14e0c922f",
+    strip_prefix = "rules_webpack-4a5f04a4bc504f71d32825124c7872ff721aa1b0",
+    url = "https://github.com/aspect-build/rules_webpack/archive/4a5f04a4bc504f71d32825124c7872ff721aa1b0.tar.gz",
 )
 
 load("@aspect_rules_webpack//webpack:dependencies.bzl", "rules_webpack_dependencies")
@@ -225,7 +226,6 @@ protobuf_deps()
 
 # rust toolchain setup
 load("@rules_rust//rust:repositories.bzl", "rules_rust_dependencies", "rust_register_toolchains")
-load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
 rules_rust_dependencies()
 

client/web/BUILD.bazel

@@ -1937,16 +1937,27 @@ webpack_bundle(
     deps = WEBPACK_CONFIG_DEPS,
 )
 
+# ibazel run //client/web:devserver
+# should make the web application available under http://localhost:3080/ by default.
 webpack_devserver(
     name = "devserver",
-    data = WEBPACK_CONFIG_DEPS + [
-        ":module_styles",
-        ":package_styles",
+    data = BUNDLE_DATA_DEPS + WEBPACK_CONFIG_DEPS + [
         "//:babel_config",
         "//:browserslist",
         "//:package_json",
+
+        # references from the devserver config
+        "webpack.bazel.config.js",
     ],
-    webpack_config = "webpack.bazel.config.js",
+    entry_points = {
+        "src/main.js": "app",
+    },
+    env = {
+        "NODE_ENV": "development",
+        # TODO(bazel): make it dynamic or make multiple targets.
+        "SOURCEGRAPH_API_URL": "https://sourcegraph.sourcegraph.com"
+    },
+    webpack_config = "webpack.bazel.devserver.config.js",
 )
 
 build_test(

client/web/dev/BUILD.bazel

@@ -21,6 +21,7 @@ ts_project(
     name = "dev",
     srcs = [
         "mocks/mockEventLogger.ts",
+        "server/bazel.server.ts",
         "server/production.server.ts",
         "utils/constants.ts",
         "utils/create-js-context.ts",

client/web/dev/server/bazel.server.ts

@@ -0,0 +1,69 @@
+import compression from 'compression'
+import WebpackDevServer from 'webpack-dev-server'
+
+import { STATIC_ASSETS_PATH } from '@sourcegraph/build-config'
+
+import {
+    ENVIRONMENT_CONFIG,
+    getAPIProxySettings,
+    getIndexHTML,
+    getWebpackManifest,
+    shouldCompressResponse,
+    STATIC_ASSETS_URL,
+} from '../utils'
+
+const { SOURCEGRAPH_API_URL, SOURCEGRAPH_HTTPS_PORT, SOURCEGRAPH_HTTP_PORT } = ENVIRONMENT_CONFIG
+
+export function createDevelopmentServerConfig(): WebpackDevServer.Configuration {
+    console.log(ENVIRONMENT_CONFIG)
+    // if (!SOURCEGRAPH_API_URL) {
+    //     throw new Error('bazel.server.ts only supports *web-standalone* usage')
+    // }
+
+    const apiURL = SOURCEGRAPH_API_URL!
+
+    const { proxyRoutes, ...proxyConfig } = getAPIProxySettings({
+        apiURL,
+        getLocalIndexHTML(jsContextScript) {
+            const manifestFile = getWebpackManifest()
+            return getIndexHTML({ manifestFile, jsContextScript })
+        },
+    })
+
+    return {
+        // react-refresh plugin triggers page reload if needed.
+        liveReload: false,
+        allowedHosts: 'all',
+        hot: true,
+        historyApiFallback: {
+            disableDotRule: true,
+        },
+        port: SOURCEGRAPH_HTTP_PORT,
+        client: {
+            overlay: false,
+            webSocketTransport: 'ws',
+            logging: 'verbose',
+            webSocketURL: {
+                port: SOURCEGRAPH_HTTPS_PORT,
+                protocol: 'wss',
+            },
+        },
+        static: {
+            directory: STATIC_ASSETS_PATH,
+            publicPath: [STATIC_ASSETS_URL, '/'],
+        },
+        proxy: [
+            {
+                context: proxyRoutes,
+                ...proxyConfig,
+            },
+        ],
+        // Disable default DevServer compression. We need more fine grained compression to support streaming search.
+        compress: false,
+        setupMiddlewares: (middlewares, developmentServer) => {
+            // Re-enable gzip compression using our own `compression` filter.
+            developmentServer.app!.use(compression({ filter: shouldCompressResponse }))
+            return middlewares
+        },
+    }
+}

client/web/webpack.bazel.config.js

@@ -52,7 +52,7 @@ const {
   SENTRY_PROJECT,
 } = ENVIRONMENT_CONFIG
 
-const IS_PERSISTENT_CACHE_ENABLED = IS_DEVELOPMENT && !IS_CI
+const IS_PERSISTENT_CACHE_ENABLED = false // Disabled in Bazel
 const IS_EMBED_ENTRY_POINT_ENABLED = ENTERPRISE && (IS_PRODUCTION || (IS_DEVELOPMENT && EMBED_DEVELOPMENT))
 
 const RUNTIME_ENV_VARIABLES = {
@@ -125,11 +125,8 @@ const config = {
     }),
   },
   // entry: { ... SET BY BAZEL RULE ... }
-  devServer: {
-    port: 8080,
-  },
   output: {
-    // path: STATIC_ASSETS_PATH,
+    path: STATIC_ASSETS_PATH,
     // Do not [hash] for development -- see https://github.com/webpack/webpack-dev-server/issues/377#issuecomment-241258405
     // Note: [name] will vary depending on the Webpack chunk. If specified, it will use a provided chunk name, otherwise it will fallback to a deterministic id.
     filename:
@@ -164,7 +161,7 @@ const config = {
     }),
     getMonacoWebpackPlugin(),
     new WebpackManifestPlugin({
-      writeToFileEmit: false,
+      writeToFileEmit: true,
       fileName: 'webpack.manifest.json',
       seed: {
         environment: NODE_ENV,

client/web/webpack.bazel.devserver.config.js

@@ -0,0 +1,7 @@
+const { createDevelopmentServerConfig } = require('./dev/server/bazel.server')
+const base = require('./webpack.bazel.config')
+
+module.exports = {
+  ...base,
+  devServer: createDevelopmentServerConfig(),
+}