yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V16: Vite development optimizations (#18915)

Browse Source 
* 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
This commit is contained in:
Jacob Overgaard
2025-04-03 16:15:04 +02:00
committed by GitHub
parent c3709de1d3
commit 7d7db6bb2b
12 changed files with 150 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/.env
View File

@@ -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

13
src/Umbraco.Web.UI.Client/index.html
View File

@@ -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>

32
src/Umbraco.Web.UI.Client/index.ts
View File

@@ -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);

2
src/Umbraco.Web.UI.Client/package.json
View File

@@ -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",

10
src/Umbraco.Web.UI.Client/src/mocks/handlers/backoffice/backoffice.handlers.ts
View File

@@ -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) => {

2
src/Umbraco.Web.UI.Client/src/mocks/index.ts
View File

@@ -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,
});

2
src/Umbraco.Web.UI.Client/src/tsconfig.build.json
View File

@@ -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"]
}

1
src/Umbraco.Web.UI.Client/src/vite-env.d.ts vendored
View File

@@ -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';
}

6
src/Umbraco.Web.UI.Client/staticwebapp.config.json
View File

@@ -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"
}

12
src/Umbraco.Web.UI.Client/vite.config.ts
View File

@@ -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',