migrate build tooling from webpack to Vite

[aqandrew]

Overview

We'd like to propose an alternative build tool in order to make it easier to implement tests for our frontend testing framework

More Info (optional)

Vite is a popular open-source frontend build tool that offers HMR (hot module reloading), which means that saving changes to files during development can update the dev server almost instantly (< 50 milliseconds, source).

Hey team, I've made progress on the testing ticket #1334 (and got some unit tests working), but I've been having some difficulty configuring Babel/Jest to run further tests.

In my experience, Vite/Vitest are much simpler to set up than webpack/Jest. I got curious and wanted to see if I could replace webpack in our repo with Vite. I managed to get HMR working in about half an hour (see screen recording below!) and figured this would improve everyone's developer experience a lot.

@ryanfchase I'd like to propose deprioritizing tests in favor of upgrading our build tooling. This would be a huge win for a lot less effort, and as a bonus it will become easier to implement tests.

Action Items

• [x] install Vite package
• [x] get MVP Vite dev server running
  • [x] rename .js files to .jsx if they contain JSX
    • [ ] write docs explaining the need for this convention moving forward
• [ ] share instructions for renaming the MAPBOX_TOKEN env var to VITE_MAPBOX_TOKEN
• [ ] port other webpack.config.js options to vite.config.js
• [ ] uninstall webpack/Babel-related packages
• [x] verify that vite build + vite serve builds and serves the site locally
• [ ] verify that the Vite-built site runs on GitHub Pages

Resources/Instructions

• https://vitejs.dev/

hot reloading demo

⌘S is shown in the lower left corner of my screen on save; you can see that changes to AcknowledgeModal.jsx are reflected in the browser in less than a second, without triggering a reload of the entire page

https://github.com/hackforla/311-data/assets/9038965/f2f2b6af-7e74-423c-a1fe-8dcce11d8680

[ryanfchase]

Assembling some notes on initial review of this ticket. ETA on notes: within the hour

[ryanfchase]

@aqandrew @Skydodle I'd like this ticket to move forward as a demo for the team. The deliverable will be a branch that members can check out and run locally themselves

Questions / Follow up on Action Items

• In what ways does Vite perform better than Webpack
  • you mentioned easier to set up tests
  • if overall build times / HMR times are better, perhaps a side-by-side comparison (either video, or timed metrics)
• verify that the Vite-built site runs on GitHub Pages
  • this should be the 1st step moving forward to ensure we don't hit a dead end
  • consider creating a fork and getting a GitHub Pages site running as proof of concept

Splitting up work on this ticket

• I'd say we should split up action items on this ticket
  • all action items related to just getting the demo and proof of concept can stay
  • everything related to docs / instructions for the team will go in follow up ticket(s)
• we can have this ticket and all follow up tickets belong to the testing epic: https://github.com/hackforla/311-data/issues/1768

Action Items for Ticket Author @aqandrew

If you're ok with the plan I've proposed...

• [ ] modify the ticket's action items as outlined above
• [ ] create tickets for the action items that are slated to come after we've demo'd this migration to the team
  • Labels will be draft, Role: Frontend, Size: Missing, Feature: Code Health
  • Add to 311 Data Project Board (it will automatically go to New Issue Approval)
  • Milestone: X - Technical Debt

Action for PM

Similar to above, we'll do the following once we've agreed on the plan:

• [ ] Add this ticket and all follow-up ticket(s) to the Testing and Code Coverage epic: https://github.com/hackforla/311-data/issues/1768

[ryanfchase]

Follow up on above comment

I've looked into Webpack's HMR capabilities, it seems like our webpack dev server behaves more like hot reloading rather than HMR.

If we look at our dev server configurations, we are using ..., { devServer: { ..., mode: hot } }, which technically should enable HMR according to Webpack's docs.

I also had a look at a different plugin, React Hot Loader, but it may take some more time before I understand how to get HMR working as intended.

if overall build times / HMR times are better, perhaps a side-by-side comparison (either video, or timed metrics)

Seeing as you got HMR working so quickly with Vite, I can consider this question answered 😄