Skip to content

Commit 7d7db6b

Browse files
iOvergaardiOvergaard
authored
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
1 parent c3709de commit 7d7db6b

File tree

12 files changed

+150
-42
lines changed

12 files changed

+150
-42
lines changed

‎.github/workflows/azure-backoffice.yml

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
name: Backoffice Static Web Apps CI/CD
2+
3+
on:
4+
push:
5+
branches:
6+
- contrib
7+
- v*/dev
8+
paths:
9+
- src/Umbraco.Web.UI.Client/package.json
10+
- src/Umbraco.Web.UI.Client/package-lock.json
11+
- src/Umbraco.Web.UI.Client/src/**
12+
- .github/workflows/azure-backoffice.yml
13+
pull_request:
14+
types: [opened, synchronize, reopened, closed]
15+
branches:
16+
- contrib
17+
- v*/dev
18+
19+
jobs:
20+
build_and_deploy_job:
21+
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed' && (contains(github.event.pull_request.labels.*.name, 'preview/backoffice')))
22+
runs-on: ubuntu-latest
23+
name: Build and Deploy Job
24+
steps:
25+
- uses: actions/checkout@v4
26+
with:
27+
submodules: true
28+
- name: Build And Deploy
29+
id: builddeploy
30+
uses: Azure/static-web-apps-deploy@v1
31+
with:
32+
production_branch: contrib
33+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_GROUND_017B08103 }}
34+
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
35+
action: "upload"
36+
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
37+
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
38+
app_location: "src/Umbraco.Web.UI.Client" # App source code path
39+
app_build_command: "npm run build:for:static"
40+
output_location: "dist" # Built app content directory - optional
41+
skip_api_build: true # Set to true if you do not have an Azure Functions API in your repo
42+
###### End of Repository/Build Configurations ######
43+
44+
close_pull_request_job:
45+
if: github.event_name == 'pull_request' && github.event.action == 'closed'
46+
runs-on: ubuntu-latest
47+
name: Close Pull Request Job
48+
steps:
49+
- name: Close Pull Request
50+
id: closepullrequest
51+
uses: Azure/static-web-apps-deploy@v1
52+
with:
53+
app_location: "src/Umbraco.Web.UI.Client"
54+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_GROUND_017B08103 }}
55+
action: "close"

‎.github/workflows/azure-storybook.yml

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
name: Storybook CI/CD
2+
3+
on:
4+
push:
5+
branches:
6+
- contrib
7+
- v*/dev
8+
paths:
9+
- src/Umbraco.Web.UI.Client/package.json
10+
- src/Umbraco.Web.UI.Client/package-lock.json
11+
- src/Umbraco.Web.UI.Client/src/**
12+
- .github/workflows/azure-storybook.yml
13+
pull_request:
14+
types: [opened, synchronize, reopened, closed]
15+
branches:
16+
- contrib
17+
- v*/dev
18+
19+
env:
20+
NODE_OPTIONS: --max_old_space_size=16384
21+
22+
jobs:
23+
build_and_deploy_job:
24+
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed' && (contains(github.event.pull_request.labels.*.name, 'preview/storybook')))
25+
runs-on: ubuntu-latest
26+
name: Build and Deploy Job
27+
steps:
28+
- uses: actions/checkout@v4
29+
- name: Build And Deploy
30+
id: builddeploy
31+
uses: Azure/static-web-apps-deploy@v1
32+
with:
33+
production_branch: contrib
34+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_SEA_0C7411A03 }}
35+
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
36+
action: "upload"
37+
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
38+
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
39+
app_location: "src/Umbraco.Web.UI.Client" # App source code path
40+
app_build_command: "npm run storybook:build"
41+
output_location: "/storybook-static" # Built app content directory - optional
42+
skip_api_build: true # Set to true if you do not have an Azure Functions API in your repo
43+
###### End of Repository/Build Configurations ######
44+
45+
close_pull_request_job:
46+
if: github.event_name == 'pull_request' && github.event.action == 'closed'
47+
runs-on: ubuntu-latest
48+
name: Close Pull Request Job
49+
steps:
50+
- name: Close Pull Request
51+
id: closepullrequest
52+
uses: Azure/static-web-apps-deploy@v1
53+
with:
54+
app_location: "src/Umbraco.Web.UI.Client"
55+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_SEA_0C7411A03 }}
56+
action: "close"

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,4 @@
22
VITE_UMBRACO_USE_MSW=on # on = turns on MSW, off = disables all mock handlers
33
VITE_UMBRACO_API_URL=https://localhost:44339
44
VITE_UMBRACO_INSTALL_STATUS=running # running or must-install or must-upgrade
5-
VITE_MSW_QUIET=off # on = turns off MSW console logs, off = turns on MSW console logs
65
VITE_UMBRACO_EXTENSION_MOCKS=off # on = turns on extension mocks, off = turns off extension mocks

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,12 @@
33
<head>
44
<base href="/" />
55
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="umbraco/backoffice/assets/favicon.svg" />
76
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
87
<title>Umbraco</title>
9-
<script type="importmap">
10-
{
11-
"imports": {
12-
"@umbraco-cms/backoffice/block-rte": "/src/packages/block/block-rte/index.ts"
13-
}
14-
}
15-
</script>
16-
<script src="node_modules/msw/lib/iife/index.js"></script>
17-
<link rel="stylesheet" href="node_modules/@umbraco-ui/uui-css/dist/uui-css.css" />
8+
<link rel="icon" type="image/svg+xml" href="./umbraco/backoffice/assets/favicon.svg" />
189
<link rel="stylesheet" href="src/css/umb-css.css" />
10+
<link rel="stylesheet" href="./umbraco/backoffice/css/uui-css.css" />
11+
<script src="./umbraco/backoffice/msw/index.js"></script>
1912
<script type="module" src="index.ts"></script>
2013
</head>
2114

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

Lines changed: 12 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,21 @@
1-
import { UmbAppElement } from './src/apps/app/app.element.js';
21
import { startMockServiceWorker } from './src/mocks/index.js';
2+
import { UmbAppElement } from '@umbraco-cms/backoffice/app';
33
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
44

5-
if (import.meta.env.VITE_UMBRACO_USE_MSW === 'on') {
6-
startMockServiceWorker();
7-
}
8-
95
const appElement = new UmbAppElement();
10-
const isMocking = import.meta.env.VITE_UMBRACO_USE_MSW === 'on';
6+
appElement.backofficePath = '/';
117

12-
if (!isMocking) {
8+
//#region Vite Mock Setup
9+
if (import.meta.env.VITE_UMBRACO_USE_MSW === 'on') {
10+
appElement.bypassAuth = true;
11+
startMockServiceWorker();
12+
} else {
1313
appElement.serverUrl = import.meta.env.VITE_UMBRACO_API_URL;
1414
}
1515

16-
if (import.meta.env.DEV) {
17-
appElement.backofficePath = '/';
18-
}
19-
20-
appElement.bypassAuth = isMocking;
21-
22-
23-
document.body.appendChild(appElement);
24-
25-
2616
// Example injector:
27-
if(import.meta.env.VITE_EXAMPLE_PATH) {
28-
import(/* @vite-ignore */ './'+import.meta.env.VITE_EXAMPLE_PATH+'/index.ts').then((js) => {
17+
if (import.meta.env.VITE_EXAMPLE_PATH) {
18+
import(/* @vite-ignore */ './' + import.meta.env.VITE_EXAMPLE_PATH + '/index.ts').then((js) => {
2919
if (js) {
3020
Object.keys(js).forEach((key) => {
3121
const value = js[key];
@@ -38,5 +28,7 @@ if(import.meta.env.VITE_EXAMPLE_PATH) {
3828
});
3929
}
4030
});
41-
4231
}
32+
//#endregion
33+
34+
document.body.append(appElement);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@
152152
"build-storybook": "npm run wc-analyze && storybook build",
153153
"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",
154154
"build:for:npm": "npm run build -- --declaration && npm run generate:manifest && npm run package:validate",
155-
"build:for:static": "vite build",
155+
"build:for:static": "cross-env VITE_UMBRACO_USE_MSW=on vite build",
156156
"build:vite": "tsc && vite build --mode staging",
157157
"build:workspaces": "npm run build -ws --if-present",
158158
"build": "tsc --project ./src/tsconfig.build.json",

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
const { rest } = window.MockServiceWorker;
22
import { umbracoPath } from '@umbraco-cms/backoffice/utils';
33

4-
const logoUrl = './src/mocks/handlers/backoffice/assets/logo.svg';
5-
const logoAlternativeUrl = './src/mocks/handlers/backoffice/assets/logo_blue.svg';
6-
const loginLogoUrl = './src/mocks/handlers/backoffice/assets/logo_light.svg';
7-
const loginLogoAlternativeUrl = './src/mocks/handlers/backoffice/assets/logo_dark.svg';
8-
const loginBackgroundUrl = './src/mocks/handlers/backoffice/assets/login.jpg';
4+
const logoUrl = './umbraco/backoffice/assets/logo.svg';
5+
const logoAlternativeUrl = './umbraco/backoffice/assets/logo_blue.svg';
6+
const loginLogoUrl = './umbraco/backoffice/assets/logo_light.svg';
7+
const loginLogoAlternativeUrl = './umbraco/backoffice/assets/logo_dark.svg';
8+
const loginBackgroundUrl = './umbraco/backoffice/assets/login.jpg';
99

1010
export const handlers = [
1111
rest.get(umbracoPath('/security/back-office/graphics/logo'), async (req, res, ctx) => {

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ export const onUnhandledRequest = (req: MockedRequest) => {
1616
export const startMockServiceWorker = (config?: StartOptions) =>
1717
worker.start({
1818
onUnhandledRequest,
19-
// TODO: this can not rely on a VITE variable
20-
quiet: import.meta.env.VITE_MSW_QUIET === 'on',
2119
...config,
2220
});
2321

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
"allowImportingTsExtensions": false
1111
},
1212
"include": ["./**/*.ts", "./**/*.json", "./**/*.js"],
13-
"exclude": ["./**/*.test.ts", "./**/*.stories.ts", "tsconfig.json", "rollup.config.js"]
13+
"exclude": ["./**/*.test.ts", "./mocks/**", "./**/*.stories.ts", "tsconfig.json", "rollup.config.js"]
1414
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,5 @@ interface ImportMetaEnv {
44
VITE_UMBRACO_INSTALL_STATUS: 'running' | 'must-upgrade' | 'must-install';
55
VITE_UMBRACO_API_URL: string;
66
VITE_UMBRACO_USE_MSW: 'on' | 'off';
7-
VITE_MSW_QUIET: 'on' | 'off';
87
VITE_UMBRACO_EXTENSION_MOCKS: 'on' | 'off';
98
}

0 commit comments

Comments
 (0)