Move to Vite build engine

microsoft · Feb 12, 2025 · a920e31 · a920e31
1 parent 5824ed0
commit a920e31
Show file tree

Hide file tree

Showing 9 changed files with 1,299 additions and 7,897 deletions.
diff --git a/docs/tre-developers/ui.md b/docs/tre-developers/ui.md
@@ -4,7 +4,7 @@ This project contains a React-based web UI which covers the core aspects of a TR
 
 ## Chosen UI Stack + Components
 The UI is built upon several popular web frameworks:
-- React v18 (created via create-react-app, with all build configurations left as defaults)
+- React v18 (with Vite)
   - Typescript
   - React Router v6 for client side routing
 - Fluent UI [Fluent UI Docs](https://developer.microsoft.com/en-us/fluentui#/controls/web)
@@ -55,3 +55,44 @@ To re-deploy _just_ the UI (after an initial deploy), run `make build-and-deploy
 - Use the environment variables from your deployment to create a `config.json` file for the UI
 - Build the source code, via `yarn build`
 - Deploy the code to Azure blob storage, where it will be statically served behind the App Gateway that also fronts the APi.
+
+## Run the UI
+- Ensure `deploy_ui=false` is not set in your `./config.yaml` file
+- In the root of the repo, run `make tre-deploy`. This will provision the necessary resources in Azure, build and deploy the UI to Azure blob storage, behind the App Gateway used for the API. The deployment process will also create the necessary `config.json`, using the `config.source.json` as a template.
+- In Microsoft Entra ID, locate the TRE Client Apps app (possibly called Swagger App). In the Authentication section add reply URIs for:
+  - `http://localhost:3000` (if wanting to run locally)
+  - Your deployed App Url - `https://{TRE_ID}.{LOCATION}.cloudapp.azure.com`.
+
+At this point you should be able to navigate to the web app in Azure, log in, and see your workspaces.
+
+## Available Scripts
+
+In the UI directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br>
+
+### `yarn run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+### `yarn run serve`
+
+Serves the production build from the `build` folder.<br>
+
+### `yarn run test:coverage`
+
+Runs the tests and generates a coverage report.<br>
diff --git a/ui/README.md b/ui/README.md
diff --git a/ui/app/README.md b/ui/app/README.md
diff --git a/ui/app/index.html b/ui/app/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      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="/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.
+    -->
+    <link rel="icon" href="/favicon.ico" />
+    <title>Azure TRE</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/ui/app/package.json b/ui/app/package.json
@@ -20,6 +20,7 @@
     "@types/node": "^20.17.14",
     "@types/react": "^18.3.16",
     "@types/react-dom": "^18.2.6",
+    "@vitejs/plugin-react-swc": "latest",
     "moment": "^2.29.4",
     "node-sass": "^8.0.0",
     "react": "^18.3.1",
@@ -29,20 +30,31 @@
     "react-router-dom": "6.28.2",
     "remark-gfm": "^3.0.1",
     "typescript": "^5.6.3",
+    "vite": "latest",
+    "vite-plugin-svgr": "latest",
+    "vite-tsconfig-paths": "latest",
     "web-vitals": "^3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-flow": "^7.23.3",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "react-scripts": "5.0.1"
+    "@types/jest": "^29.5.0",
+    "@types/node": "^20.17.14",
+    "@types/react": "^18.3.16",
+    "@types/react-dom": "^18.2.6",
+    "@vitest/coverage-v8": "latest",
+    "jsdom": "latest",
+    "sass-embedded": "^1.83.4",
+    "vitest": "latest"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage --watch=false"
   },
   "eslintConfig": {
     "extends": [

diff --git a/ui/app/src/vite-env.d.ts b/ui/app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/ui/app/tsconfig.json b/ui/app/tsconfig.json
@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
       "esnext"
     ],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -19,9 +19,10 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "paths": {
-      "react": [ "./node_modules/@types/react" ]
-    }
+    "types": [
+      "vite/client",
+      "vite-plugin-svgr/client"
+    ]
   },
   "include": [
     "src"

diff --git a/ui/app/vite.config.ts b/ui/app/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import svgr from 'vite-plugin-svgr'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [react(), tsconfigPaths(), svgr()],
+  server: {
+    port: 3000,
+  }
+})