Using ESBuild as development server

[compulim]

Fixes #4316.

Changelog Entry

Changes

• Resolves #4316. Using ESBuild as development server, by @compulim, in PR #4330

Description

Using ESBuild as development server, while keeping Webpack@5 for our production build.

This greatly improve DX. Build time is down from 5-7 seconds to 500 ms.

Currently, we have 3 build favors:

• Production: minified
• Instrumented production: production build with instrumentation code
• Development build: source map

Goals

• Production build must continue to use Webpack, and bit-by-bit equals to current experience
• Testing infrastructure must continue to use existing instrumented production build
• Development build must be faster than current experience
• Development build must be supported under Windows, WSL2, GitHub Codespaces, and macOS
• npm start at root must start the development server (same as current experience)
• Bundles must be consumable in Docker container
  • Probably requires bits to be emitted as files and served inside Docker via bind volume (current experience)
• Bundles must be consumable by Web Chat loader (current experience is via http://localhost:5000/webchat-es5.js)
• Bundles must be work under modern browsers, and optional to work under IEMode/ES5
  • Our current production build work under IEMode/ES5 and should kept the same
• Bundles must not deviate/vary too much between production build and development build
  • To prevent DX deteroriation, any deviation/variations must be investigated and eliminated
• Must verify against our docs/BUILD_SCRIPTS.md

Design

Dual build approach

We will run dual bundle approach: build and serve. This enables us to both serve the development build to our Docker container and development server.

• Build is for emitting bundles under /packages/bundle/dist/ for Docker containers or http://localhost:5000/
• Serve is for serving bundles on-the-fly to improve DX
• We did not emit bundles other than webchat-es5.js as we did not use them for development
  • As we will serve them from GitHub Codespaces, we turned on minification and compression to make the bundle smaller to serve, usually under 800 ms

Currently, we have 2 development servers (port 5000 and 5001). We will keep the existing port 5000 serving files from /packages/bundle/dist/.

Build on-the-fly with ESBuild serve

Customized ESBuild serving experience actually requires proxy-forwarding, https://esbuild.github.io/api/#customizing-server-behavior

We will be hosting ESBuild server on port 8000 (default) and writing a new development server for port 5001:

• Proxy-forward /__dist__/ to ESBuild
• Keep everything else the same (using serve-test.json)
• Enable compression to improve DX on GitHub Codespaces

We observed the size of the bundle from ESBuild is 20-30% larger than Webpack. As we are not using ESBuild for production build, this is okay.

For simplicity, with NODE_ENV=development (or unset), running npm run build will use Webpack, while npm start will use ESBuild. As our builds should not deviate significantly, they should perform very similar.

Specific Changes

• Add packages/bundle/script/devServer.cjs for the development server

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)