web: test web app enteprise build with Bazel (#48407)

Share the way to test the web application enterprise build with Bazel.

## Test plan

1. `bazel build //client/web:bundle-enterprise`
2. To start the node.js server with the Bazel web application build.

`STATIC_ASSETS_PATH=XXX/sourcegraph/bazel-bin/client/web/bundle-enterprise
WEBPACK_SERVE_INDEX=true
SOURCEGRAPH_API_URL=https://sourcegraph.sourcegraph.com pnpm --filter
@sourcegraph/web run serve:prod`

client/build-config/src/paths.ts

@@ -24,7 +24,6 @@ export const WORKSPACES_PATH = resolveWithSymlink(ROOT_PATH, 'client')
 export const NODE_MODULES_PATH = resolveWithSymlink(ROOT_PATH, 'node_modules')
 export const MONACO_EDITOR_PATH = resolveWithSymlink(NODE_MODULES_PATH, 'monaco-editor')
 export const STATIC_ASSETS_PATH = resolveWithSymlink(ROOT_PATH, 'ui/assets')
-export const STATIC_INDEX_PATH = resolveWithSymlink(STATIC_ASSETS_PATH, 'index.html')
 
 function getWorkspaceNodeModulesPaths(): string[] {
     const workspaces = fs.readdirSync(WORKSPACES_PATH)

client/web/dev/server/production.server.ts

@@ -5,11 +5,17 @@ import expressStaticGzip from 'express-static-gzip'
 import { createProxyMiddleware } from 'http-proxy-middleware'
 import signale from 'signale'
 
-import { STATIC_ASSETS_PATH, STATIC_INDEX_PATH } from '@sourcegraph/build-config'
+import {
+    getAPIProxySettings,
+    ENVIRONMENT_CONFIG,
+    HTTP_WEB_SERVER_URL,
+    HTTPS_WEB_SERVER_URL,
+    getWebpackManifest,
+    STATIC_INDEX_PATH,
+    getIndexHTML,
+} from '../utils'
 
-import { getAPIProxySettings, ENVIRONMENT_CONFIG, HTTP_WEB_SERVER_URL, HTTPS_WEB_SERVER_URL } from '../utils'
-
-const { SOURCEGRAPH_API_URL, SOURCEGRAPH_HTTP_PORT } = ENVIRONMENT_CONFIG
+const { SOURCEGRAPH_API_URL, SOURCEGRAPH_HTTP_PORT, STATIC_ASSETS_PATH } = ENVIRONMENT_CONFIG
 
 function startProductionServer(): void {
     if (!SOURCEGRAPH_API_URL) {
@@ -35,6 +41,12 @@ function startProductionServer(): void {
 
     const { proxyRoutes, ...proxyConfig } = getAPIProxySettings({
         apiURL: SOURCEGRAPH_API_URL,
+        ...(ENVIRONMENT_CONFIG.WEBPACK_SERVE_INDEX && {
+            getLocalIndexHTML(jsContextScript) {
+                const manifestFile = getWebpackManifest()
+                return getIndexHTML({ manifestFile, jsContextScript })
+            },
+        }),
     })
 
     // Proxy API requests to the `process.env.SOURCEGRAPH_API_URL`.

client/web/dev/utils/environment-config.ts

@@ -1,8 +1,10 @@
+import path from 'path'
+
 /**
  * Unpack all `process.env.*` variables used during the build
  * time of the web application in this module to keep one source of truth.
  */
-import { getEnvironmentBoolean } from '@sourcegraph/build-config'
+import { getEnvironmentBoolean, STATIC_ASSETS_PATH } from '@sourcegraph/build-config'
 
 import { DEFAULT_SITE_CONFIG_PATH } from './constants'
 
@@ -44,6 +46,7 @@ export const ENVIRONMENT_CONFIG = {
     WEBPACK_EXPORT_STATS_FILENAME: process.env.WEBPACK_EXPORT_STATS_FILENAME,
     // Allow to adjust https://webpack.js.org/configuration/devtool/ in the dev environment.
     WEBPACK_DEVELOPMENT_DEVTOOL: process.env.WEBPACK_DEVELOPMENT_DEVTOOL || 'eval-cheap-module-source-map',
+    STATIC_ASSETS_PATH: process.env.STATIC_ASSETS_PATH || STATIC_ASSETS_PATH,
 
     // The commit SHA the client bundle was built with.
     COMMIT_SHA: process.env.COMMIT_SHA,
@@ -99,3 +102,5 @@ const { SOURCEGRAPH_HTTPS_DOMAIN, SOURCEGRAPH_HTTPS_PORT, SOURCEGRAPH_HTTP_PORT
 
 export const HTTPS_WEB_SERVER_URL = `https://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}`
 export const HTTP_WEB_SERVER_URL = `http://localhost:${SOURCEGRAPH_HTTP_PORT}`
+
+export const STATIC_INDEX_PATH = path.resolve(ENVIRONMENT_CONFIG.STATIC_ASSETS_PATH, 'index.html')

client/web/dev/utils/get-index-html.ts

@@ -3,13 +3,11 @@ import path from 'path'
 
 import { WebpackPluginFunction } from 'webpack'
 
-import { STATIC_ASSETS_PATH, STATIC_INDEX_PATH } from '@sourcegraph/build-config'
-
 import { SourcegraphContext } from '../../src/jscontext'
 
-import { createJsContext, ENVIRONMENT_CONFIG, HTTPS_WEB_SERVER_URL } from '.'
+import { createJsContext, ENVIRONMENT_CONFIG, HTTPS_WEB_SERVER_URL, STATIC_INDEX_PATH } from '.'
 
-const { NODE_ENV } = ENVIRONMENT_CONFIG
+const { NODE_ENV, STATIC_ASSETS_PATH } = ENVIRONMENT_CONFIG
 
 export const WEBPACK_MANIFEST_PATH = path.resolve(STATIC_ASSETS_PATH, 'webpack.manifest.json')
 

client/web/webpack.bazel.config.js

@@ -124,10 +124,6 @@ const config = {
     }),
   },
   // entry: { ... SET BY BAZEL RULE ... }
-  // TODO(bazel): why is this sest by webpack_bundle() but not webpack_dev_server()?
-  entry: {
-    app: './client/web/src/main.js',
-  },
   devServer: {
     port: 8080,
   },