V16: Vite development optimizations #18915

iOvergaard · 2025-04-02T14:33:50Z

Descriptions

Removes src/mocks/* from the production output
Adds missing static files for Vite using viteStaticCopy
Resolves a TODO in the dev/static build output
Adds workflow to publish Backoffice Storybook
Adds workflow to publish Backoffice Static app

How to test

Test that npm run dev:mock works
Test that npm run dev:server works
Test that npm run build:for:cms works, and you can browse the backoffice on the backend
Test that npm run storybook works
Test that npm run storybook:build works and you can serve the files npx serve storybook-static
Test that npm run build:for:static works, and you can serve the files npx serve dist

…pository

… request

github-actions · 2025-04-02T14:35:55Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://ashy-bay-09f36a803-18915.westeurope.1.azurestaticapps.net

github-actions · 2025-04-02T14:36:26Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://ambitious-stone-0033b3603-18915.westeurope.1.azurestaticapps.net

…on fallback just in case

github-actions · 2025-04-02T14:47:45Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://ashy-bay-09f36a803-18915.westeurope.1.azurestaticapps.net

github-actions · 2025-04-02T14:48:07Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://ambitious-stone-0033b3603-18915.westeurope.1.azurestaticapps.net

github-actions · 2025-04-02T14:50:30Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://ashy-bay-09f36a803-18915.westeurope.1.azurestaticapps.net

github-actions · 2025-04-02T14:50:36Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://ambitious-stone-0033b3603-18915.westeurope.1.azurestaticapps.net

github-actions · 2025-04-02T14:53:37Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://ashy-bay-09f36a803-18915.westeurope.1.azurestaticapps.net

github-actions · 2025-04-02T14:53:46Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://ambitious-stone-0033b3603-18915.westeurope.1.azurestaticapps.net

Copilot

Pull Request Overview

This PR optimizes the Vite development workflow by updating static asset configurations, refactoring mock service worker settings, and adding CI/CD workflows for deploying Backoffice Storybook and Static apps.

Updated asset paths and copy configurations in production builds
Refactored mock service worker initialization
Added deployment workflows for Backoffice Storybook and Static apps

Reviewed Changes

Copilot reviewed 7 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/vite.config.ts	Revised static file copy configuration including relocating asset files from mocks to intended production paths
src/Umbraco.Web.UI.Client/src/mocks/index.ts	Removed the VITE_MSW_QUIET configuration from the mock service worker initialization
src/Umbraco.Web.UI.Client/src/mocks/handlers/backoffice/backoffice.handlers.ts	Updated asset path references to point to production assets
src/Umbraco.Web.UI.Client/index.ts	Adjusted the mock setup logic and updated the import path for UmbAppElement
.github/workflows/azure-storybook.yml	Added CI/CD workflow for Backoffice Storybook deployment
.github/workflows/azure-backoffice.yml	Added CI/CD workflow for Backoffice Static Web Apps deployment

Files not reviewed (5)

src/Umbraco.Web.UI.Client/.env: Language not supported
src/Umbraco.Web.UI.Client/index.html: Language not supported
src/Umbraco.Web.UI.Client/package.json: Language not supported
src/Umbraco.Web.UI.Client/src/tsconfig.build.json: Language not supported
src/Umbraco.Web.UI.Client/staticwebapp.config.json: Language not supported

Comments suppressed due to low confidence (1)

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

[nitpick] The source path 'src/mocks/handlers/backoffice/assets/*' still references 'mocks', which may be misleading for production assets. Consider renaming or relocating these assets to clearly indicate their production usage.

Copilot

Pull Request Overview

This pull request introduces Vite development optimizations by reconfiguring static asset management and refining mock service worker handling, along with adding CI/CD workflows for Backoffice Storybook and Static app deployments.

Updates Vite configuration to use viteStaticCopy for asset management and adjust asset paths.
Adjusts mock service worker initialization and asset URL references via changes in the mocks and backoffice handler files.
Adds new GitHub workflows to build and deploy Backoffice Storybook and Static Backoffice app.

Reviewed Changes

Copilot reviewed 7 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/vite.config.ts	Adds new static asset copy rules for CSS, fonts, and backoffice assets (previously under mocks).
src/Umbraco.Web.UI.Client/src/mocks/index.ts	Removes a TODO comment and simplifies the mock service worker configuration.
src/Umbraco.Web.UI.Client/src/mocks/handlers/backoffice/backoffice.handlers.ts	Updates asset URLs to point to production asset locations.
src/Umbraco.Web.UI.Client/index.ts	Refactors the App element import and mock service worker conditional initialization.
.github/workflows/azure-storybook.yml	Introduces a workflow for building and deploying Backoffice Storybook.
.github/workflows/azure-backoffice.yml	Introduces a workflow for building and deploying the Backoffice Static app.

Files not reviewed (5)

src/Umbraco.Web.UI.Client/.env: Language not supported
src/Umbraco.Web.UI.Client/index.html: Language not supported
src/Umbraco.Web.UI.Client/package.json: Language not supported
src/Umbraco.Web.UI.Client/src/tsconfig.build.json: Language not supported
src/Umbraco.Web.UI.Client/staticwebapp.config.json: Language not supported

Comments suppressed due to low confidence (1)

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

Including assets from the 'src/mocks' folder in the production output seems to contradict the PR description of removing mocks from production. Please confirm if these assets should indeed be copied or if this rule should be adjusted.

{ src: 'src/mocks/handlers/backoffice/assets/*', dest: 'umbraco/backoffice/assets' },

…ronments

github-actions · 2025-04-03T07:10:03Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-18915.westeurope.6.azurestaticapps.net

github-actions · 2025-04-03T07:10:32Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://orange-sea-0c7411a03-18915.westeurope.6.azurestaticapps.net

github-actions · 2025-04-03T07:11:33Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-18915.westeurope.6.azurestaticapps.net

github-actions · 2025-04-03T07:11:48Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://orange-sea-0c7411a03-18915.westeurope.6.azurestaticapps.net

leekelleher

All tested out, looking great! 🚀

iOvergaard added 11 commits April 2, 2025 09:50

feat: resolve TODO by removing quiet option

7df69cf

feat: exclude ./src/mocks from production build

731077a

feat: load only msw when running through vite

a04b5c3

feat: optimise load order

14e8c1e

feat: handles mocked logos with virtual path

c9714a6

feat: loads mocked service worker from virtual path

b545ab1

feat: loads assets from virtual path

ccbdd3c

feat: forces MSW=on for the static build

1f54caf

build: adds storybook workflow copied over from the old backoffice re…

6d84ff6

…pository

build: limits where the build runs

7b36a6b

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

c77cabe

… request

iOvergaard added the category/ux User experience label Apr 2, 2025

iOvergaard added 2 commits April 2, 2025 16:45

build: excludes the /umbraco/backoffice/assets folder from navigati…

089307b

…on fallback just in case

build: triggers run when the workflow file itself changes

02fe335

build: triggers run when package.json changes

8e0f100

build: marks the 'contrib' branch as production

8229230

iOvergaard marked this pull request as ready for review April 2, 2025 15:02

Copilot bot review requested due to automatic review settings April 2, 2025 15:02

Copilot AI reviewed Apr 2, 2025

View reviewed changes

iOvergaard requested a review from Copilot April 2, 2025 15:16

Copilot AI reviewed Apr 2, 2025

View reviewed changes

iOvergaard added the release/16.0.0 label Apr 2, 2025

iOvergaard added category/dx Developer experience type/feature labels Apr 2, 2025

iOvergaard requested a review from leekelleher April 2, 2025 15:29

Merge branch 'v16/dev' into v16/feature/vite-dev-setup

8ea9bdf

iOvergaard added preview/storybook Pull requests that can be previewed through Storybook preview/backoffice Pull requests that can be previewed in a static version of the Backoffice and removed category/ux User experience labels Apr 3, 2025

iOvergaard added 5 commits April 3, 2025 08:45

build: activates static builds on preview/* labels

582af1e

build: bumps github checkout version

218e1ea

build: updates key for backoffice web app

150113c

build: updates key for storybook

201f860

build: disables build for release branches to preseve on preview envi…

09cf0e3

…ronments

leekelleher approved these changes Apr 3, 2025

View reviewed changes

leekelleher merged commit 7d7db6b into v16/dev Apr 3, 2025
27 checks passed

leekelleher deleted the v16/feature/vite-dev-setup branch April 3, 2025 14:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

V16: Vite development optimizations #18915

V16: Vite development optimizations #18915

iOvergaard commented Apr 2, 2025 •

edited

Loading

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

Copilot AI left a comment

Copilot AI left a comment

github-actions bot commented Apr 3, 2025

github-actions bot commented Apr 3, 2025

github-actions bot commented Apr 3, 2025

github-actions bot commented Apr 3, 2025

leekelleher left a comment

V16: Vite development optimizations #18915

V16: Vite development optimizations #18915

Conversation

iOvergaard commented Apr 2, 2025 • edited Loading

Descriptions

How to test

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

github-actions bot commented Apr 2, 2025

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

github-actions bot commented Apr 3, 2025

github-actions bot commented Apr 3, 2025

github-actions bot commented Apr 3, 2025

github-actions bot commented Apr 3, 2025

leekelleher left a comment

Choose a reason for hiding this comment

iOvergaard commented Apr 2, 2025 •

edited

Loading