equinor · Eddasol · Dec 20, 2024 · Dec 18, 2024 · Dec 18, 2024 · Dec 18, 2024
diff --git a/.github/workflows/frontend_lint_and_test.yml b/.github/workflows/frontend_lint_and_test.yml
@@ -33,13 +33,13 @@ jobs:
       - run: npm test
         env:
           PORT: 3001
-          REACT_APP_AI_CONNECTION_STRING: ""
-          REACT_APP_BACKEND_URL: https://localhost:8000
-          REACT_APP_BACKEND_API_SCOPE: api://ea4c7b92-47b3-45fb-bd25-a8070f0c495c/user_impersonation
-          REACT_APP_FRONTEND_URL: http://localhost:3001
-          REACT_APP_FRONTEND_BASE_ROUTE: ""
-          REACT_APP_AD_CLIENT_ID: f5993820-b7e2-4791-886f-f9f5027dc7be
-          REACT_APP_AD_TENANT_ID: 3aa4a235-b6e2-48d5-9195-7fcf05b459b0
+          VITE_AI_CONNECTION_STRING: ""
+          VITE_BACKEND_URL: https://localhost:8000
+          VITE_BACKEND_API_SCOPE: api://ea4c7b92-47b3-45fb-bd25-a8070f0c495c/user_impersonation
+          VITE_FRONTEND_URL: http://localhost:3001
+          VITE_FRONTEND_BASE_ROUTE: ""
+          VITE_AD_CLIENT_ID: f5993820-b7e2-4791-886f-f9f5027dc7be
+          VITE_AD_TENANT_ID: 3aa4a235-b6e2-48d5-9195-7fcf05b459b0
 
   check_formatting:
     runs-on: ubuntu-latest
@@ -63,7 +63,7 @@ jobs:
       - name: Install modules
         run: npm ci
       - name: Run ESLint
-        run: npx eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0
+        run: npx eslint src
 
   check_exports:
     runs-on: ubuntu-latest

diff --git a/frontend/.env.example b/frontend/.env.example
@@ -1,8 +1,8 @@
 PORT=3001
-REACT_APP_AI_CONNECTION_STRING=""
-REACT_APP_BACKEND_URL=https://localhost:8000
-REACT_APP_BACKEND_API_SCOPE=api://ea4c7b92-47b3-45fb-bd25-a8070f0c495c/user_impersonation
-REACT_APP_FRONTEND_URL=http://localhost:3001
-REACT_APP_FRONTEND_BASE_ROUTE=""
-REACT_APP_AD_CLIENT_ID=f5993820-b7e2-4791-886f-f9f5027dc7be
-REACT_APP_AD_TENANT_ID=3aa4a235-b6e2-48d5-9195-7fcf05b459b0
+VITE_AI_CONNECTION_STRING=""
+VITE_BACKEND_URL=https://localhost:8000
+VITE_BACKEND_API_SCOPE=api://ea4c7b92-47b3-45fb-bd25-a8070f0c495c/user_impersonation
+VITE_FRONTEND_URL=http://localhost:3001
+VITE_FRONTEND_BASE_ROUTE=""
+VITE_AD_CLIENT_ID=f5993820-b7e2-4791-886f-f9f5027dc7be
+VITE_AD_TENANT_ID=3aa4a235-b6e2-48d5-9195-7fcf05b459b0
diff --git a/frontend/README.md b/frontend/README.md
@@ -73,7 +73,7 @@ You can do this by going to `File` -> `Preferences` -> `Settings` and then searc
 
 ## Config
 
-The application reads custom environment variables from the `.env` file on startup. The files need to be prefixed `REACT_APP_` to be included in the application.
+The application reads custom environment variables from the `.env` file on startup. The files need to be prefixed `VITE_` to be included in the application.
 These are parsed and defined in [config.ts](./src/config.ts).
 
 ## Run locally with Staging and Prod Databases
@@ -82,4 +82,4 @@ To run locally towards the databases follow the steps below:
 
 1. Change UseInMemoryDatabase to false on appsettings.Local and set ASPNETCORE_ENVIRONMENT to the correct environment on launchSettings.json.
 2. Update AZURE_CLIENT_ID and AZURE_CLIENT_SECRET in the .env located in backend/api folder.
-3. Update REACT_APP_BACKEND_API_SCOPE in the .env located in the frontend folder.
+3. Update VITE_BACKEND_API_SCOPE in the .env located in the frontend folder.
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -0,0 +1,23 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "react/no-unescaped-entities": "off",
+      "react/display-name": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    }
+  }
+];
diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -2,32 +2,24 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
-        <meta name="description" content="Web site created using create-react-app" />
-        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+        <meta name="description" content="Web site created using vite" />
+        <link rel="apple-touch-icon" href="/logo192.png" />
         <link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font.css" />
         <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-        <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+        <link rel="manifest" href="/manifest.json" />
         <title>Flotilla</title>
     </head>
 
     <body leftmargin="0px" topmargin="0px">
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
         <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -39,12 +31,12 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     --></body>
     <script>
-        window.REACT_APP_AI_CONNECTION_STRING = '${REACT_APP_AI_CONNECTION_STRING}'
-        window.REACT_APP_BACKEND_URL = '${REACT_APP_BACKEND_URL}'
-        window.REACT_APP_BACKEND_API_SCOPE = '${REACT_APP_BACKEND_API_SCOPE}'
-        window.REACT_APP_FRONTEND_URL = '${REACT_APP_FRONTEND_URL}'
-        window.REACT_APP_FRONTEND_BASE_ROUTE = '${REACT_APP_FRONTEND_BASE_ROUTE}'
-        window.REACT_APP_AD_CLIENT_ID = '${REACT_APP_AD_CLIENT_ID}'
-        window.REACT_APP_AD_TENANT_ID = '${REACT_APP_AD_TENANT_ID}'
+        window.VITE_AI_CONNECTION_STRING = '${VITE_AI_CONNECTION_STRING}'
+        window.VITE_BACKEND_URL = '${VITE_BACKEND_URL}'
+        window.VITE_BACKEND_API_SCOPE = '${VITE_BACKEND_API_SCOPE}'
+        window.VITE_FRONTEND_URL = '${VITE_FRONTEND_URL}'
+        window.VITE_FRONTEND_BASE_ROUTE = '${VITE_FRONTEND_BASE_ROUTE}'
+        window.VITE_AD_CLIENT_ID = '${VITE_AD_CLIENT_ID}'
+        window.VITE_AD_TENANT_ID = '${VITE_AD_TENANT_ID}'
     </script>
 </html>