sourcegraph/client/web/README.md
Quinn Slack de613e92b6
use esbuild for client/web builds (#57365)
Use [esbuild](https://esbuild.github.io/) instead of Webpack for builds of `client/web`, for faster builds (dev and prod) and greater dev-prod parity. This PR completely removes all use of Webpack in this repository.

`client/web` is the last build target that still uses Webpack; all others have been recently migrated to esbuild. Most devs here have been using esbuild for local dev of `client/web` for the last 6-12 months anyway. The change here is that now our production builds will be built by esbuild.

All sg commands, integration/e2e tests, etc., continue to work as-is. The bundlesize report will take a while to stabilize because the new build products use different filenames.

## Benchmarks

Running `pnpm run generate && time pnpm -C client/web run task:gulp webBuild` and taking the `time` output from the last command:

- Webpack: 62.5s
- esbuild: 6.7s

Note: This understates esbuild's victory for 2 reasons: (1) because esbuild is building both the main and embed entrypoints, whereas Webpack only builds the main entrypoint in this benchmark) and (2) because a lot of it is in the fixed startup time of `gulp`; esbuild incremental rebuilds during local dev only take ~1s.

## Notes

We no longer use Babel to produce web builds (we use esbuild), so we don't need any Babel plugins that optimize the output or improve browser compatibility. Right now, Babel is only used by Jest (for tests) and by Bazel as an intermediate step.
2023-10-23 10:59:06 -07:00

1.7 KiB

Web Application

Local development

Use sg CLI tool to configure and start local development server. For more information check out the sg documentation.

Our local development server runs by starting both a Caddy HTTPS server and a Node HTTP server. We then can reverse proxy requests to the Node server to serve client assets under HTTPS.

Configuration

Environment variables important for the web server:

  1. WEB_BUILDER_SERVE_INDEX should be set to true to enable serving of an index page.
  2. SOURCEGRAPH_API_URL is used as a proxied API url. By default it points to the https://k8s.sgdev.org.

It's possible to overwrite these variables by creating sg.config.overwrite.yaml in the root folder and adjusting the env section of the relevant command.

Development server

sg start web-standalone

Public API

To use a public API that doesn't require authentication for most of the functionality:

SOURCEGRAPH_API_URL=https://sourcegraph.com sg start web-standalone

Production server

sg start web-standalone-prod

Web app should be available at https://${SOURCEGRAPH_HTTPS_DOMAIN}:${SOURCEGRAPH_HTTPS_PORT}. Build artifacts will be served from <rootRepoPath>/client/web/dist.

Note: If you are unable to use the above commands (e.g. you can't install Caddy), you can use sg run web-standalone-http instead. This will start a development server using only Node, and will be available at http://localhost:${SOURCEGRAPH_HTTP_PORT}.

API proxy

In both environments, server proxies API requests to SOURCEGRAPH_API_URL provided as the .env variable.