Refactor, move from react-scripts to vite

[mihirsamdarshi]

This PR introduces a number of changes.

React no longer maintains create-react-app, and a number of the packages that the frontend were using have long been deprecated

Here are all the changes introduced by this PR:

react-scripts -> vite refactor

• Replaced react-scripts with vite
  • react-scripts has long been deprecated in favor of full-stack frameworks like Gatsby, NextJS, or Remix
  • Vite is the clear replacement, being among the top downloaded non-framework bundlers
  • Vite brought build time of this project down from 120s to 5s on my machine (without vite-plugin-image-optimizer)
  • HMR is even faster
  • These changes position us well for future Server-sider rendering (SSR) efforts, especially when combined with the React Router changes below. Transitioning from react-router v6 to Remix with Vite is extremely easy, and immediately provides us SSR capabilities
• Replaced react-scripts package.json scripts with vite commands
• Environment variable changes:
  • Change environment variables from process.env accessor to import.meta
  • REACT_APP_ style environment variables supported by create-react-app to VITE_ style environment variables supported by vite
• Added vite.config.js, using react-swc React compiler plugin.
• Added bundle visualizer in order to see how much space various packages take
• Added vite-plugin-image-optimizer for optimizing images

react-router v5 to v6 upgrade

• Replaced Redirect component with Navigate component
• Replaced withTracking HOC with a wrapper layout router with the same functionality
• Replaced PrivateRoute with a new AuthWrapper necessitated by direct-rendering changes in v6
• Add lazy loading of routes, to allow for better code-splitting
  • See React's lazy docs to see how code splitting works
  • See the lazy docs on React Router for how lazy loading routes works
  • Note that this requires a <Suspense> element (located in App.js, which currently renders a blank <div> instead of any loading views

Replace jest with vitest

• The removal of react-scripts necessitates the introduction of a test framework
• vitest is a drop-in replacement for jest that works for the vite framework

Code Split CSS

• Use Vite-native PostCSS integration for SCSS compilation
• Removed page styles from main.scss SCSS
  • Added SCSS imports to individual pages
  • Separate variables/base layers, and replace @import with @use or @forward, ahead of deprecation of @import

Misc changes

• Updated storybook to latest
• Updated ESlint to v8

Regressions

• CircleCI will continue to fail until the REACT_APP_-styled env vars are replaced by VITE_ style env vars

[mihirsamdarshi]

Hey @jimmyzhen this PR is ready for a review

[mihirsamdarshi]

I deployed this PR to our Kubernetes testing website. You can verify that there are no regressions on this website.

This PR significantly improves Lighthouse scores, and since Lighthouse is one aspect used by Google to determine search rankings, this should help with SEO as well.

Lighthouse Before

Lighthouse With Refactor

Additionally, notice the DOMContentLoaded time and amount of data transferred when throttling to 4G speeds. Mobile users on cellular networks will have better experiences.

Loading Time Before

Loading Time With Refactor