refactor: replace react-scripts (cra) with vite, and make necessary c…

…hanges
soofstad · Nov 5, 2024 · 531aa74 · 531aa74
1 parent c3a3242
commit 531aa74
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <title>React App</title>
+</head>
+
+<body>
+  <script type="module" src="/src/index.jsx"></script>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -2,27 +2,28 @@
   "name": "package-development",
   "version": "0.1.0",
   "scripts": {
-    "start": "ESLINT_NO_DEV_ERRORS='true' react-scripts start",
-    "build": "react-scripts build",
+    "start": "vite",
+    "build": "vite build",
     "test": "jest --silent",
     "test:watch": "jest --silent --watch"
   },
   "dependencies": {
     "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-scripts": ">=5.0.1"
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/react": "18.3.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "18.3.12",
+    "@vitejs/plugin-react": "^4.3.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "ts-jest": "^29.1.2",
-    "typescript": "5.4.5"
+    "ts-jest": "^29.2.5",
+    "typescript": "5.6.3",
+    "vite": "^5.4.10"
   },
   "browserslist": {
     "production": [">0.2%", "not dead", "not op_mini all"],

diff --git a/public/index.html b/public/index.html
diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 // ##########################################
 // NOTE: This file is not part of the package.
 // It's only function is to help development in testing and debugging.
@@ -15,7 +17,7 @@ const authConfig = {
   authorizationEndpoint: 'https://keycloak.ofstad.xyz/realms/master/protocol/openid-connect/auth',
   tokenEndpoint: 'https://keycloak.ofstad.xyz/realms/master/protocol/openid-connect/token',
   logoutEndpoint: 'https://keycloak.ofstad.xyz/realms/master/protocol/openid-connect/logout',
-  redirectUri: 'http://localhost:3000/',
+  redirectUri: 'http://localhost:5173/',
   onRefreshTokenExpire: (event) => event.logIn('', {}, 'popup'),
   preLogin: () => console.log('Logging in...'),
   postLogin: () => console.log('Logged in!'),
@@ -45,10 +47,10 @@ function LoginInfo() {
       </>
       {token ? (
         <>
-          <button onClick={() => logOut('rememberThis', idTokenData.session_state)}>Log out</button>
+          <button onClick={() => logOut('rememberThis', idTokenData?.session_state)}>Log out</button>
           <span style={{ margin: '0 10px' }}>
             Access token will expire at:{' '}
-            {new Date(localStorage.getItem('ROCP_tokenExpire') * 1000).toLocaleTimeString()}
+            {new Date(Number(localStorage.getItem('ROCP_tokenExpire')) * 1000).toLocaleTimeString()}
           </span>
           <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             <div>
@@ -110,6 +112,7 @@ function LoginInfo() {
 }
 
 const container = document.getElementById('root')
+if (!container) throw new Error('No container found')
 const root = createRoot(container)
 
 root.render(

diff --git a/tests/auth-util.test.ts b/tests/auth-util.test.ts
@@ -10,7 +10,7 @@ const authConfig: TInternalConfig = {
   clientId: 'myClientID',
   authorizationEndpoint: 'myAuthEndpoint',
   tokenEndpoint: 'myTokenEndpoint',
-  redirectUri: 'http://localhost:3000/',
+  redirectUri: 'http://localhost:5173/',
   scope: 'someScope openid',
   clearURL: false,
   storage: 'local',

diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()],
+})