From 7d7db6bb2bcef22d8eea83282cebee90cfc4f837 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 3 Apr 2025 16:15:04 +0200 Subject: [PATCH] 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 | 55 ++++++++++++++++++ .github/workflows/azure-storybook.yml | 56 +++++++++++++++++++ src/Umbraco.Web.UI.Client/.env | 1 - src/Umbraco.Web.UI.Client/index.html | 13 +---- src/Umbraco.Web.UI.Client/index.ts | 32 ++++------- src/Umbraco.Web.UI.Client/package.json | 2 +- .../backoffice/backoffice.handlers.ts | 10 ++-- src/Umbraco.Web.UI.Client/src/mocks/index.ts | 2 - .../src/tsconfig.build.json | 2 +- src/Umbraco.Web.UI.Client/src/vite-env.d.ts | 1 - .../staticwebapp.config.json | 6 +- src/Umbraco.Web.UI.Client/vite.config.ts | 12 ++++ 12 files changed, 150 insertions(+), 42 deletions(-) create mode 100644 .github/workflows/azure-backoffice.yml create mode 100644 .github/workflows/azure-storybook.yml diff --git a/.github/workflows/azure-backoffice.yml b/.github/workflows/azure-backoffice.yml new file mode 100644 index 0000000000..46597a42fd --- /dev/null +++ b/.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" diff --git a/.github/workflows/azure-storybook.yml b/.github/workflows/azure-storybook.yml new file mode 100644 index 0000000000..6702a443cb --- /dev/null +++ b/.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" diff --git a/src/Umbraco.Web.UI.Client/.env b/src/Umbraco.Web.UI.Client/.env index 2863beab6e..a0d8f68a13 100644 --- a/src/Umbraco.Web.UI.Client/.env +++ b/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 diff --git a/src/Umbraco.Web.UI.Client/index.html b/src/Umbraco.Web.UI.Client/index.html index 5b7473a4d2..e254fba600 100644 --- a/src/Umbraco.Web.UI.Client/index.html +++ b/src/Umbraco.Web.UI.Client/index.html @@ -3,19 +3,12 @@ - Umbraco - - - + + + diff --git a/src/Umbraco.Web.UI.Client/index.ts b/src/Umbraco.Web.UI.Client/index.ts index ecb0f617cf..841103f1bc 100644 --- a/src/Umbraco.Web.UI.Client/index.ts +++ b/src/Umbraco.Web.UI.Client/index.ts @@ -1,31 +1,21 @@ -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) => { +if (import.meta.env.VITE_EXAMPLE_PATH) { + import(/* @vite-ignore */ './' + import.meta.env.VITE_EXAMPLE_PATH + '/index.ts').then((js) => { if (js) { Object.keys(js).forEach((key) => { const value = js[key]; @@ -38,5 +28,7 @@ if(import.meta.env.VITE_EXAMPLE_PATH) { }); } }); - } +//#endregion + +document.body.append(appElement); diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index dd899bb926..f12e4f31c6 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/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", diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/backoffice/backoffice.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/backoffice/backoffice.handlers.ts index b1760e7bec..ca9576003e 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/backoffice/backoffice.handlers.ts +++ b/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) => { diff --git a/src/Umbraco.Web.UI.Client/src/mocks/index.ts b/src/Umbraco.Web.UI.Client/src/mocks/index.ts index 89943d7863..52f338914f 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/index.ts +++ b/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, }); diff --git a/src/Umbraco.Web.UI.Client/src/tsconfig.build.json b/src/Umbraco.Web.UI.Client/src/tsconfig.build.json index 600705db7e..f6ab4c9c91 100644 --- a/src/Umbraco.Web.UI.Client/src/tsconfig.build.json +++ b/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"] } diff --git a/src/Umbraco.Web.UI.Client/src/vite-env.d.ts b/src/Umbraco.Web.UI.Client/src/vite-env.d.ts index d91f137aea..ff0a27896b 100644 --- a/src/Umbraco.Web.UI.Client/src/vite-env.d.ts +++ b/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'; } diff --git a/src/Umbraco.Web.UI.Client/staticwebapp.config.json b/src/Umbraco.Web.UI.Client/staticwebapp.config.json index 4ff06b6140..9d61d4df29 100644 --- a/src/Umbraco.Web.UI.Client/staticwebapp.config.json +++ b/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" } diff --git a/src/Umbraco.Web.UI.Client/vite.config.ts b/src/Umbraco.Web.UI.Client/vite.config.ts index 72104c6283..0b7fe072d6 100644 --- a/src/Umbraco.Web.UI.Client/vite.config.ts +++ b/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',