V16: Vite development optimizations (#18915)

* feat: resolve TODO by removing quiet option

* feat: exclude ./src/mocks from production build

* feat: load only msw when running through vite

* feat: optimise load order

* feat: handles mocked logos with virtual path

* feat: loads mocked service worker from virtual path

* feat: loads assets from virtual path

* feat: forces MSW=on for the static build

* build: adds storybook workflow copied over from the old backoffice repository

* build: limits where the build runs

* build: adds workflow to build a static version of the backoffice upon request

* build: excludes the `/umbraco/backoffice/assets` folder from navigation fallback just in case

* build: triggers run when the workflow file itself changes

* build: triggers run when package.json changes

* build: marks the 'contrib' branch as production

* build: activates static builds on preview/* labels

* build: bumps github checkout version

* build: updates key for backoffice web app

* build: updates key for storybook

* build: disables build for release branches to preseve on preview environments

.github/workflows/azure-backoffice.yml

@@ -0,0 +1,55 @@
+name: Backoffice Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - contrib
+      - v*/dev
+    paths:
+      - src/Umbraco.Web.UI.Client/package.json
+      - src/Umbraco.Web.UI.Client/package-lock.json
+      - src/Umbraco.Web.UI.Client/src/**
+      - .github/workflows/azure-backoffice.yml
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - contrib
+      - v*/dev
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed' && (contains(github.event.pull_request.labels.*.name, 'preview/backoffice')))
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          production_branch: contrib
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_GROUND_017B08103 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "src/Umbraco.Web.UI.Client" # App source code path
+          app_build_command: "npm run build:for:static"
+          output_location: "dist" # Built app content directory - optional
+          skip_api_build: true # Set to true if you do not have an Azure Functions API in your repo
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          app_location: "src/Umbraco.Web.UI.Client"
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_GROUND_017B08103 }}
+          action: "close"

.github/workflows/azure-storybook.yml

@@ -0,0 +1,56 @@
+name: Storybook CI/CD
+
+on:
+  push:
+    branches:
+      - contrib
+      - v*/dev
+    paths:
+      - src/Umbraco.Web.UI.Client/package.json
+      - src/Umbraco.Web.UI.Client/package-lock.json
+      - src/Umbraco.Web.UI.Client/src/**
+      - .github/workflows/azure-storybook.yml
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - contrib
+      - v*/dev
+
+env:
+  NODE_OPTIONS: --max_old_space_size=16384
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed' && (contains(github.event.pull_request.labels.*.name, 'preview/storybook')))
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v4
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          production_branch: contrib
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_SEA_0C7411A03 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "src/Umbraco.Web.UI.Client" # App source code path
+          app_build_command: "npm run storybook:build"
+          output_location: "/storybook-static" # Built app content directory - optional
+          skip_api_build: true # Set to true if you do not have an Azure Functions API in your repo
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          app_location: "src/Umbraco.Web.UI.Client"
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_SEA_0C7411A03 }}
+          action: "close"

src/Umbraco.Web.UI.Client/.env

@@ -2,5 +2,4 @@
 VITE_UMBRACO_USE_MSW=on # on = turns on MSW, off = disables all mock handlers
 VITE_UMBRACO_API_URL=https://localhost:44339
 VITE_UMBRACO_INSTALL_STATUS=running # running or must-install or must-upgrade
-VITE_MSW_QUIET=off # on = turns off MSW console logs, off = turns on MSW console logs
 VITE_UMBRACO_EXTENSION_MOCKS=off # on = turns on extension mocks, off = turns off extension mocks

src/Umbraco.Web.UI.Client/index.html

@@ -3,19 +3,12 @@
 	<head>
 		<base href="/" />
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="umbraco/backoffice/assets/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Umbraco</title>
-		<script type="importmap">
-			{
-				"imports": {
-					"@umbraco-cms/backoffice/block-rte": "/src/packages/block/block-rte/index.ts"
-				}
-			}
-		</script>
-		<script src="node_modules/msw/lib/iife/index.js"></script>
-		<link rel="stylesheet" href="node_modules/@umbraco-ui/uui-css/dist/uui-css.css" />
+		<link rel="icon" type="image/svg+xml" href="./umbraco/backoffice/assets/favicon.svg" />
 		<link rel="stylesheet" href="src/css/umb-css.css" />
+		<link rel="stylesheet" href="./umbraco/backoffice/css/uui-css.css" />
+		<script src="./umbraco/backoffice/msw/index.js"></script>
 		<script type="module" src="index.ts"></script>
 	</head>
 

src/Umbraco.Web.UI.Client/index.ts

@@ -1,28 +1,18 @@
-import { UmbAppElement } from './src/apps/app/app.element.js';
 import { startMockServiceWorker } from './src/mocks/index.js';
+import { UmbAppElement } from '@umbraco-cms/backoffice/app';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 
-if (import.meta.env.VITE_UMBRACO_USE_MSW === 'on') {
-	startMockServiceWorker();
-}
-
 const appElement = new UmbAppElement();
-const isMocking = import.meta.env.VITE_UMBRACO_USE_MSW === 'on';
+appElement.backofficePath = '/';
 
-if (!isMocking) {
+//#region Vite Mock Setup
+if (import.meta.env.VITE_UMBRACO_USE_MSW === 'on') {
+	appElement.bypassAuth = true;
+	startMockServiceWorker();
+} else {
 	appElement.serverUrl = import.meta.env.VITE_UMBRACO_API_URL;
 }
 
-if (import.meta.env.DEV) {
-	appElement.backofficePath = '/';
-}
-
-appElement.bypassAuth = isMocking;
-
-
-document.body.appendChild(appElement);
-
-
 // Example injector:
 if (import.meta.env.VITE_EXAMPLE_PATH) {
 	import(/* @vite-ignore */ './' + import.meta.env.VITE_EXAMPLE_PATH + '/index.ts').then((js) => {
@@ -38,5 +28,7 @@ if(import.meta.env.VITE_EXAMPLE_PATH) {
 			});
 		}
 	});
-
 }
+//#endregion
+
+document.body.append(appElement);

src/Umbraco.Web.UI.Client/package.json

@@ -152,7 +152,7 @@
 		"build-storybook": "npm run wc-analyze && storybook build",
 		"build:for:cms": "npm run build && npm run build:workspaces && npm run generate:manifest && npm run package:validate && node ./devops/build/copy-to-cms.js",
 		"build:for:npm": "npm run build -- --declaration && npm run generate:manifest && npm run package:validate",
-		"build:for:static": "vite build",
+		"build:for:static": "cross-env VITE_UMBRACO_USE_MSW=on vite build",
 		"build:vite": "tsc && vite build --mode staging",
 		"build:workspaces": "npm run build -ws --if-present",
 		"build": "tsc --project ./src/tsconfig.build.json",

src/Umbraco.Web.UI.Client/src/mocks/handlers/backoffice/backoffice.handlers.ts

@@ -1,11 +1,11 @@
 const { rest } = window.MockServiceWorker;
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
-const logoUrl = './src/mocks/handlers/backoffice/assets/logo.svg';
-const logoAlternativeUrl = './src/mocks/handlers/backoffice/assets/logo_blue.svg';
-const loginLogoUrl = './src/mocks/handlers/backoffice/assets/logo_light.svg';
-const loginLogoAlternativeUrl = './src/mocks/handlers/backoffice/assets/logo_dark.svg';
-const loginBackgroundUrl = './src/mocks/handlers/backoffice/assets/login.jpg';
+const logoUrl = './umbraco/backoffice/assets/logo.svg';
+const logoAlternativeUrl = './umbraco/backoffice/assets/logo_blue.svg';
+const loginLogoUrl = './umbraco/backoffice/assets/logo_light.svg';
+const loginLogoAlternativeUrl = './umbraco/backoffice/assets/logo_dark.svg';
+const loginBackgroundUrl = './umbraco/backoffice/assets/login.jpg';
 
 export const handlers = [
 	rest.get(umbracoPath('/security/back-office/graphics/logo'), async (req, res, ctx) => {

src/Umbraco.Web.UI.Client/src/mocks/index.ts

@@ -16,8 +16,6 @@ export const onUnhandledRequest = (req: MockedRequest) => {
 export const startMockServiceWorker = (config?: StartOptions) =>
 	worker.start({
 		onUnhandledRequest,
-		// TODO: this can not rely on a VITE variable
-		quiet: import.meta.env.VITE_MSW_QUIET === 'on',
 		...config,
 	});
 

src/Umbraco.Web.UI.Client/src/tsconfig.build.json

@@ -10,5 +10,5 @@
 		"allowImportingTsExtensions": false
 	},
 	"include": ["./**/*.ts", "./**/*.json", "./**/*.js"],
-	"exclude": ["./**/*.test.ts", "./**/*.stories.ts", "tsconfig.json", "rollup.config.js"]
+	"exclude": ["./**/*.test.ts", "./mocks/**", "./**/*.stories.ts", "tsconfig.json", "rollup.config.js"]
 }

src/Umbraco.Web.UI.Client/src/vite-env.d.ts

@@ -4,6 +4,5 @@ interface ImportMetaEnv {
 	VITE_UMBRACO_INSTALL_STATUS: 'running' | 'must-upgrade' | 'must-install';
 	VITE_UMBRACO_API_URL: string;
 	VITE_UMBRACO_USE_MSW: 'on' | 'off';
-	VITE_MSW_QUIET: 'on' | 'off';
 	VITE_UMBRACO_EXTENSION_MOCKS: 'on' | 'off';
 }

src/Umbraco.Web.UI.Client/staticwebapp.config.json

@@ -1,7 +1,11 @@
 {
 	"navigationFallback": {
 		"rewrite": "/index.html",
-		"exclude": ["*.{jpg,jpeg,gif,png,svg,css}", "/assets/*"]
+		"exclude": [
+			"*.{jpg,jpeg,gif,png,svg,css}",
+			"/assets/*",
+			"/umbraco/backoffice/assets/*"
+		]
 	},
 	"trailingSlash": "never"
 }

src/Umbraco.Web.UI.Client/vite.config.ts

@@ -17,10 +17,22 @@ export const plugins: PluginOption[] = [
 				src: 'src/css/*.css',
 				dest: 'umbraco/backoffice/css',
 			},
+			{
+				src: 'node_modules/@umbraco-ui/uui-css/dist/uui-css.css',
+				dest: 'umbraco/backoffice/css',
+			},
+			{
+				src: 'node_modules/@umbraco-ui/uui-css/assets/fonts/*',
+				dest: 'umbraco/backoffice/assets/fonts',
+			},
 			{
 				src: 'src/assets/*',
 				dest: 'umbraco/backoffice/assets',
 			},
+			{
+				src: 'src/mocks/handlers/backoffice/assets/*',
+				dest: 'umbraco/backoffice/assets',
+			},
 			{
 				src: 'node_modules/msw/lib/iife/**/*',
 				dest: 'umbraco/backoffice/msw',