DR: Upgrade to Vite from webpack

This is a record in the Decision Records on Solutions Adopted.

Issue

#1778

Problem Statement

We wanted to set up a front-end testing framework. Our team ran into issues configuring Jest with webpack, the existing build tool. While exploring alternatives, another issue with webpack was highlighted: the slow refresh times were a pain point for developers.

Webpack is used to compile JavaScript modules with dependencies into static assets. The entire page must be refreshed, which triggers a request for data every time a JS module is changed. i.e., whenever a JS/JSX file is saved.

Potential Solution

Vite is an alternative build tool that could be simpler for setting up testing using Vitest. Additionally, Vite's HMR (hot module reloading) could improve the developer experience by updating the dev server almost instantly when saving changes to files during development.

Vite is an open-source frontend build tool that aims to provide a faster and leaner development experience for modern web projects. Vite provides an HMR API over native ESM. Frameworks with HMR capabilities can leverage the API to provide instant, precise updates without reloading the page or removing application state.

Feasibility Determination

Testing determined that Vite could be successfully set up and run on GitHub Pages.

HMR showed a huge performance increase. An update using webpack averaged 7.88 seconds, while Vite took 0.58 seconds, 13.59 times faster than webpack's refresh time.

Basic front-end tests were successfully implemented using Vitest.

Common Vite Migration Problems

Problem: Page not loading and Network tab showing assets returning 404.

Solution: Add/update the base config option in vite.config.js to match the name of your repository. This will configure Vite's build so that bundled assets are requested from https://{username}.github.io/{repo name}/assets/.