build: Replace CRACO Build/Serve with Vite

[ashtonG]

Description

This swaps out the utility used to run the dev server and build for the react webapp from craco to vite. Vite has a better track record of keeping up with its underlying dependencies than Craco/Create React App,, and it's build times and dev server startup times are shorter.

Test Plan

all app functionality should be unchanged.

Commentary (optional)

Changes to the source code that were made in order to get vite running and building:

• Monaco syntax highlighters and plugins are now directly imported in the codebase rather than managed by plugin
• stray require calls are removed
• Notebookjs is now wrapped in a module and imported as a node package
• Custom plugin that fixes a faulty import in the generated swagger api

Checklist

• Changes have been manually QA'd

Ticket

WEB-815

[netlify]

✅ Deploy Preview for determined-ui ready!

Name	Link
🔨 Latest commit	b65ed36
🔍 Latest deploy log	https://app.netlify.com/sites/determined-ui/deploys/63e3e9dbedc6bd000806e3b0
😎 Deploy Preview	https://deploy-preview-5926--determined-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[keita-determined]

Thats a cool change. Vite is pretty fast, but i found some issues.

• i couldnt launch jupyter with This 127.0.0.1 page can’t be found error.
• Every time i run npm i, packages-lock is modified. npm version is 9.3.1

also, i want somebody else from @determined-ai/web to review as well since its a significant change

[keita-determined]

im not very familiar with csp code. Could you take a look at this, @mapmeld as an craco CSP author?

[ashtonG]

@keita-determined I'm unable to reproduce either issue locally or on the netlify build. Can you please verify your setup?

[keita-determined]

@keita-determined I'm unable to reproduce either issue locally or on the netlify build. Can you please verify your setup?

• i couldnt launch jupyter with This 127.0.0.1 page can’t be found error.
  • This one is fixed with this change
• Every time i run npm i, packages-lock is modified. npm version is 9.3.1
  • I still get this one. I just ran the npm i. node version is v16.16.0 , npm version is 9.3.1
• Also, make live opens http://127.0.0.1:3000, but preferably localhost:3000 is ideal.

[hkang1]

Overall looked great! Sprinkled comments throughout based on the changes, but I'll run this branch once I have everything setup properly on my machine to actually run these changes.

[hkang1]

Tested:

• make live - works as expected, but noticed that I generally had to refresh a couple of times before it took me to the login page? Jupyterlab does not run as it can't resolve via localhost:. Not sure if this ever ran properly via webdevserver though.
• make build - works as expected locally (via devclusteer), jupyterlab runs perfectly
• make test - still on craco (should this be migrated too, to vitest?)

[ashtonG]

@hkang1 when you say jupyterlab doesn't work, do you mean that it's stuck on queued or that the interactive page serves a 404? I just pushed a change that seems to prevent the popup url from being malformed. Can you try it out?

@keita-determined i think this might be the same issue you pointed out earlier.

[hkang1]

All the comments and questions I had have been addressed. Conditional approval pending other folks' inquiries and comments.

[keita-determined]

overall LGTM too

few notes:

• make live opens http://127.0.0.1:3000/det instead of localhost. According to this, its intended, so i think its good with http://127.0.0.1:3000/det. if there is an issue with this, we can change it in the future.

---

• I still get the packages-lock.json change after npm i with node v16.16.0 and npm 9.3.1, but i can easily revert this change, so its ok.

Diff I got

diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json
index 47ae0321f..e95e161f3 100644
--- a/webui/react/package-lock.json
+++ b/webui/react/package-lock.json
@@ -17999,8 +17999,13 @@
       }
     },
     "node_modules/notebook": {
-      "resolved": "src/vendor/notebook",
-      "link": true
+      "version": "0.7.0",
+      "resolved": "file:src/vendor/notebook",
+      "dependencies": {
+        "ansi_up": "^5.1.0",
+        "dompurify": "^2.4.0",
+        "marked": "^4.1.1"
+      }
     },
     "node_modules/npm-force-resolutions": {
       "version": "0.0.10",
@@ -28572,14 +28577,6 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
-    },
-    "src/vendor/notebook": {
-      "version": "0.7.0",
-      "dependencies": {
-        "ansi_up": "^5.1.0",
-        "dompurify": "^2.4.0",
-        "marked": "^4.1.1"
-      }
     }
   },
   "dependencies": {
@@ -40950,7 +40947,7 @@
       }
     },
     "notebook": {
-      "version": "file:src/vendor/notebook",
+      "version": "0.7.0",
       "requires": {
         "ansi_up": "^5.1.0",
         "dompurify": "^2.4.0",

---

nit: npm run analyze is not working on my local. i wonder how many ppl use this command
this issue can be fixed in diff PR

[ashtonG]

thanks, @keita-determined! i did a little digging and found this issue with nodejs/npm: nodejs/node#46542 -- this seems to be affecting us because we now install notebookjs as a local package instead of importing it directly. I think this has been fixed in later versions of npm as I'm unable to reproduce on npm 9.4.2. In addition, checking in the package-lock.json from 9.3.1 wouldn't be the right solution because our ci builds use the version of npm that ships with the version of node we use, and using the new lockfiles with the old versions causes npm to throw an error.