build: [M3-5912] - Vite

[bnussman-akamai]

Description 📝

• Uses Vite for
  • Cloud Manager dev server and production builds
  • Storybook dev server and production builds
  • Cypress Tests (preprocessor)
• Updates Storybook v7 (needed for Vite support)
• Improves Storybook branding, theming, and dark mode support
• Makes Cypress use a Vite preprocessor
  • Doing this so things like import.meta.env work

Todo ☑️

• Reintroduce New Relic
  • Maybe use the useScript hook or just put it in the index.html and let it run in dev?
• Fix SSH key fingerprints
  • We'll probably need some kind of crypto library. I'm unsure if the native web crypto functions can do what we need
• Fix algolia search
• Get Cypress tests to run (works but may be unstable)
• Get Storybook to run
  • Options include update to Storybook 7 and use vite builder or somehow define import.meta.env with current setup

Observations 👁️

• Cypress e2e tests run stably
  • They seem to take a bit more time to run compared to develop. I am pretty sure this is due to the fact that with vite development mode, loading the page can actually take a bit more time due to all of the modules the browser must load (vite works like this by design)
  • When we start e2e testing with our internal CI, maybe we will benefit from doing a production build of CLoud Manager, serving it with serve and testing against that. This may be faster... cc @jdamore-linode
• We should work to get our unit testing up to date. For now I am using swc to staticly define import.meta.env just to the tests can run. This is fine for the most part because unit tests really shouldn't need access to any environment variables

How to test 🧪

• Checkout this PR
• Before you run anything, I'd recommend running yarn from the repo's root just to get new dependencies installed and old ones removed
• Run full suite of e2e tests with yarn cy:run
• Generally test cloud manager's dev server using yarn up or yarn dev
• Verify a Cloud Manager production build works
  • If an internal preview link is generated, it is safe to assume this works
• Test storybook dev server with yarn storybook
• Test storybook production build with yarn build-storybook (run from packages/manager)

[jdamore-linode]

This is really, really exciting! Awesome work!

I don't have a ton of time to spend on this today, but just had a couple quick notes/observations:

• Running yarn up on this branch had Cloud Manager up and running in just shy of 30 seconds. Meanwhile, yarn up on develop took about 70 seconds (not including type checking). Really eager to see how fast it is on M1 devices.
• I branched off your work and put together a really quick POC to get Cypress running. It's not perfect (I may have observed this issue once or twice, for example), but the few tests that I ran seemed to generally pass with these changes.

[bnussman]

Here are the two PRs blocking us from the latest Vite version

• Test case for the fix regarding wildcard imports lukeed/resolve.exports#26
• fix(resolve): update resolve.exports to 2.0.1 to fix * resolution issue vitejs/vite#12314

[cpathipa]

Nice work! @bnussman Great addition to DX and improves productivity.

Here are my observations:

• Hot-reload is not working when changes made to serverHandler.ts (May be expected)

• Below three specs failed upon running E2E suite.

[bnussman-akamai]

@cpathipa

I found that reloading of serverHandler.ts works as I'd expect. The difference compared to webpack is that the page does not refresh anymore so data in the Redux / React Query store is the old data. Vite's reloading is working as expected, but good catch. This is a new behavior.

As for the e2e failures, I ran the tests that failed and they passed for me. I am hoping they were just flakey tests

[cpathipa]

Any reason for replacing axios with fetch here?

[bnussman-akamai]

I try to get rid of axios wherever possible. It offers little benefit over fetch and fetch is native to the runtime.

[jaalah-akamai]

Ok apart from the storybook issues we already talked about - I think this is good - Nice job 🚀

[mjac0bs]

• Running yarn up on this branch had Cloud Manager up and running in just shy of 30 seconds. Meanwhile, yarn up on develop took about 70 seconds (not including type checking). Really eager to see how fast it is on M1 devices.

On my M1: yarn up now takes about 7 seconds, which is very cool. On develop, it takes me about 40 seconds if we exclude type checking.

E2E tests and output of yarn commands looked good to me.

For the Storybook changes: New skin and dark mode toggle are looking nice. 🎉 I do think it feels a little cluttered/confusing for the side nav to contain links to both the Docs and the Canvas views of a story, especially when we include the ArgsTable at the bottom of so many Docs pages, but that's not a reason to hold up merging this PR.