Migrate from react-scripts to vite

To future prove our identifier webapp, this change abandons react-scripts and moves everything to vite as a near seamless transition from the create-react-app based approach when this app was created. Reference: https://vitejs.dev/ Related: reactjs/react.dev#5487
libregraph · Oct 23, 2023 · 47e6403 · 47e6403
1 parent 870212a
commit 47e6403
Show file tree

Hide file tree

Showing 15 changed files with 3,853 additions and 12,004 deletions.
diff --git a/identifier/.env b/identifier/.env
@@ -1,9 +1,2 @@
-PORT=3001
-HOST=127.0.0.1
 BROWSER=none
-ESLINT_NO_DEV_ERRORS=true
-REACT_APP_KOPANO_BUILD=0.0.0-dev-env
-INLINE_RUNTIME_CHUNK=false
-FAST_REFRESH=false
-WDS_SOCKET_HOST=0.0.0.0
-WDS_SOCKET_PORT=0
+VITE_KOPANO_BUILD=0.0.0-dev-env
diff --git a/identifier/Makefile b/identifier/Makefile
@@ -16,7 +16,7 @@ all: build
 build: vendor | src i18n ; $(info building identifier Webapp ...)	@
 	@rm -rf build
 
-	REACT_APP_KOPANO_BUILD="${VERSION}" CI=false $(YARN) run build
+	VITE_KOPANO_BUILD="${VERSION}" CI=false $(YARN) run build
 
 .PHONY: src
 src:

diff --git a/identifier/README.react.md b/identifier/README.react.md
diff --git a/identifier/api.go b/identifier/api.go
@@ -35,7 +35,7 @@ func (i *Identifier) writeWebappIndexHTML(rw http.ResponseWriter, req *http.Requ
 	// FIXME(longsleep): Set a secure CSP. Right now we need `data:` for images
 	// since it is used. Since `data:` URLs possibly could allow xss, a better
 	// way should be found for our early loading inline SVG stuff.
-	rw.Header().Set("Content-Security-Policy", fmt.Sprintf("default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'nonce-%s'; base-uri 'none'; frame-ancestors 'none';", nonce))
+	rw.Header().Set("Content-Security-Policy", fmt.Sprintf("default-src 'self'; img-src 'self' data:; font-src 'self' data:; script-src 'self'; style-src 'self' 'nonce-%s'; base-uri 'none'; frame-ancestors 'none';", nonce))
 
 	// Write index with random nonce to response.
 	index := bytes.Replace(i.webappIndexHTML, []byte("__CSP_NONCE__"), []byte(nonce), 1)

diff --git a/identifier/public/index.html → identifier/index.html b/identifier/public/index.html → identifier/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <html lang="en">
-  <head data-kopano-build="%REACT_APP_KOPANO_BUILD%">
+  <head data-kopano-build="%VITE_KOPANO_BUILD%">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#ffffff">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon.ico" type="image/x-icon">
+    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
     <meta property="csp-nonce" content="__CSP_NONCE__">
     <title>Sign in to your account</title>
   </head>
@@ -16,5 +16,6 @@
       <div></div>
     </div>
     <div id="root" data-path-prefix="__PATH_PREFIX__"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/identifier/package.json b/identifier/package.json
@@ -7,16 +7,6 @@
     "@fontsource/roboto": "^4.5.8",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
-    "@testing-library/dom": "^8.20.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
-    "@types/node": "^12.20.55",
-    "@types/react": "^17.0.59",
-    "@types/react-dom": "^17.0.20",
-    "@types/react-redux": "^7.1.25",
-    "@types/redux-logger": "^3.0.9",
     "axios": "^0.22.0",
     "classnames": "^2.3.2",
     "eslint": "^8.52.0",
@@ -32,31 +22,46 @@
     "react-redux": "^7.2.9",
     "react-router": "^5.3.4",
     "react-router-dom": "5.3.4",
-    "react-scripts": "5.0.1",
     "redux": "^4.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
     "render-if": "^0.1.1",
-    "typescript": "^4.9.5",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "if-node-version '>= 17' && react-scripts --openssl-legacy-provider start || react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
-    "lint": "eslint ./src/**/*.{tsx,ts,jsx,js}",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "test": "vitest",
+    "lint": "eslint --max-warnings=0 src",
     "licenses": "NODE_PATH=./node_modules node ../scripts/js-license-ranger.js",
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "devDependencies": {
+    "@testing-library/dom": "^8.20.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^28",
+    "@types/node": "^18",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-redux": "^7.1.25",
+    "@types/redux-logger": "^3.0.9",
     "@typescript-eslint/typescript-estree": "^6.8.0",
+    "@vitejs/plugin-react": "^4.1.0",
     "cldr": "^7.4.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-i18next": "^5.2.1",
     "i18next-conv": "^12.1.1",
     "i18next-parser": "^5.4.0",
     "if-node-version": "^1.1.1",
-    "source-map-explorer": "^1.8.0"
+    "jsdom": "^22.1.0",
+    "source-map-explorer": "^1.8.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^0.34.6"
   },
   "jest": {
     "collectCoverageFrom": [

diff --git a/identifier/src/components/Spinner.js → identifier/src/components/Spinner.jsx b/identifier/src/components/Spinner.js → identifier/src/components/Spinner.jsx
diff --git a/identifier/src/react-app-env.d.ts b/identifier/src/react-app-env.d.ts
diff --git a/identifier/src/version.js b/identifier/src/version.js
@@ -1,4 +1,4 @@
-const build = process.env.REACT_APP_KOPANO_BUILD || '0.0.0-no-proper-build';
+const build = import.meta.env.VITE_KOPANO_BUILD || '0.0.0-no-proper-build';
 
 export {
   build

diff --git a/identifier/src/vite-env.d.ts b/identifier/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/identifier/tests/setup.js b/identifier/tests/setup.js
@@ -0,0 +1,8 @@
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup();
+});
diff --git a/identifier/tsconfig.json b/identifier/tsconfig.json
@@ -1,20 +1,20 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
@@ -24,5 +24,10 @@
   },
   "include": [
     "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
   ]
 }
diff --git a/identifier/tsconfig.node.json b/identifier/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/identifier/vite.config.js b/identifier/vite.config.js
@@ -0,0 +1,30 @@
+import { defineConfig, splitVendorChunkPlugin } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(() => {
+  return {
+    build: {
+      outDir: 'build',
+      assetsDir: 'static/assets',
+      manifest: true,
+      sourcemap: true,
+    },
+    base: './',
+    server: {
+      port: 3001,
+      strictPort: true,
+      host: '127.0.0.1',
+      hmr: {
+        protocol: 'ws',
+        host: '127.0.0.1',
+        clientPort: 3001,
+      },
+    },
+    plugins: [react(), splitVendorChunkPlugin()],
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: './tests/setup.js',
+    },
+  };
+});