Migrate to Vite by bcotrim · Pull Request #1794 · Automattic/studio

bcotrim · 2025-09-18T09:58:59Z

Related issues

Fixes STU-761 STU-784

Proposed Changes

Migrate from Webpack to Vite for running Studio locally and building

Testing Instructions

npm install
npm start
npm run make
Run Studio smoke tests locally
Download artifacts from CI for macOS and Windows and test Studio

Pre-merge Checklist

Have you checked for TypeScript, React or other console errors?

epeicher

Thanks @bcotrim for doing this massive change! I have tested on Windows and most of the features work, but I have found an issue creating sites using blueprints.

First, let me describe the tests on Windows:

✅ npm install
✅ npm start
✅ Adding a site
✅ Logging in to WordPress.com
✅ Connect a WordPress.com site
✅ Creating preview sites
✅ Using the AI assistant

But when creating a site using Blueprints, I get the following (I think is a known error):

Permissions requested to delete the folder	Error

The following is the error trace:

[2025-09-22T11:24:51.737Z][erro][main] Failed to setup WordPress site: Error: Could not start server: Error: Error when executing the blueprint step #2 ({"step":"installPlugin","pluginData":{"resource":"wordpress.org/plugins","slug":"akismet"},"options":{"activate":true}}) : Could not create directory "/wordpress/wp-content/AD/[j*)YTGBA^-&yrk#S9[+)jyyN+f(1[xl": Invalid argument.
    at C:\Users\robertoaranda\github\studio\dist\main\index.js:12938:28
    at ForkUtilityProcess.<anonymous> (C:\Users\robertoaranda\github\studio\node_modules\@sentry\electron\main\utility-processes.js:67:40)
    at ForkUtilityProcess.emit (node:events:530:35)
    at ForkUtilityProcess.a.emit (node:electron/js2c/browser_init:2:73957)
[2025-09-22T11:25:06.415Z][erro][main] Error occurred in handler for 'createSite': Error: Failed to perform delete operation
[2025-09-22T11:25:06.418Z][erro][ren1] Failed to create site

I have the error using the development version executed with npm start, and with the artifact generated by the CI build for Windows

gcsecsey

Thanks for making these chages @bcotrim. I tested the changes on Mac:

npm install ✅
npm start ✅
npm run make ✅
npm test ✅

The builds are also significantly faster than using webpack. 🎉

In both the dev build or when using the packaged build, I can

Start Studio
Create a new site using either the Quickstart/Developer Blueprints
Delete a site
Log in/log out of WP.com
Create preview sites

I encountered an issue when trying to create a site using the Commerce Blueprint, I consistently see this error, and I didn't encounter the same on trunk:

[playground-cli] Running the Blueprint...
Activating woocommerce-services – 85%Failed to setup WordPress site: Error: Timeout waiting for response to message 0
    at Timeout._onTimeout (/Users/gcsecsey/a8c-projects/studio/dist/main/index.js:13010:18)
    at listOnTimeout (node:internal/timers:594:17)
    at process.processTimers (node:internal/timers:529:7)
Error occurred in handler for 'createSite': Error: Timeout waiting for response to message 0
    at Timeout._onTimeout (/Users/gcsecsey/a8c-projects/studio/dist/main/index.js:13010:18)
    at listOnTimeout (node:internal/timers:594:17)
    at process.processTimers (node:internal/timers:529:7)
[playground-cli] Error: ENOENT: no such file or directory, lstat '/Users/gcsecsey/Studio/my-fresh-website'
    at lstatSync (node:fs:1716:25)
    at t.lstatSync (node:electron/js2c/node_init:2:4546)
    at /Users/gcsecsey/a8c-projects/studio/node_modules/@php-wasm/node/index.cjs:446680:46
    at PHP.mount (/Users/gcsecsey/a8c-projects/studio/node_modules/@php-wasm/universal/index.cjs:57:3839)
    at Object.m [as mountResources] (/Users/gcsecsey/a8c-projects/studio/node_modules/@wp-playground/cli/mounts-BJFrPHGW.cjs:4:553)
    at async Object.onPHPInstanceCreated (/Users/gcsecsey/a8c-projects/studio/node_modules/@wp-playground/cli/worker-thread-v1.cjs:2:236)
    at async n (/Users/gcsecsey/a8c-projects/studio/node_modules/@wp-playground/wordpress/index.cjs:355:2274)
    at async PHPProcessManager.phpFactory (/Users/gcsecsey/a8c-projects/studio/node_modules/@php-wasm/universal/index.cjs:89:3705)
    at async PHPProcessManager.doSpawn (/Users/gcsecsey/a8c-projects/studio/node_modules/@php-wasm/universal/index.cjs:83:3025) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'lstat',
  path: '/Users/gcsecsey/Studio/my-fresh-website'
}
[playground-cli] Worker 0 exited with code 1

I'm not sure if this might be related to STU-804.

epeicher · 2025-09-22T13:55:40Z

Additional testing on Windows, when trying to Pull a site from WordPress.com I get the always a Timeout error:

Error with Pull	After completion

With the following error in the logs:

[2025-09-22T13:50:39.253Z][erro][main] Error occurred in handler for 'startServer': Error: Timeout waiting for response to message 0
    at Timeout._onTimeout (C:\Users\roberto\github\studio\dist\main\index.js:13014:18)
    at listOnTimeout (node:internal/timers:594:17)
    at process.processTimers (node:internal/timers:529:7)

The same site can be connected and Pulled on Mac, so this seems to be related to Windows

sejas

@bcotrim, Great work migrating from webpack to Vite ! 🥳
I tested it on Mac using the built app in Buildkite and I confirm the main blockers are solved.

I was able to create a site using the wp-cli blueprint that downloads an image
I was able to see the plugins from .org and install a plugin
I also tested creating a preview site, pulling a wpcom site, talking to the assistant and running wp-cli command from the assistant, and everything worked as expected.

I just noticed two minor things:

Some RTL styles are gone, for example the What's new modal.
The Studio CLI returns a warning/error message [0922/160239.105499:ERROR:node_main.cc(142)] Node.js environment variables are disabled because this process is invoked by other apps.
The thumbnail images on the blueprint screen blink when you select a file. (I'm not sure if this is related to this PR, but it's the first time I've noticed it.)

blueprint-thumbnails-reloading-when-selecting-or-removing-blueprint-file.mp4

Although it seems the ENV variables work as expected:

sejas · 2025-09-22T14:58:48Z

-			<DynamicStylesheet
-				id="wordpress-components-style"
-				href={
-					i18n?.isRTL()
-						? '../main_window/styles/wordpress-components-style-rtl.css'
-						: '../main_window/styles/wordpress-components-style.css'
-				}
-			/>
-			<DynamicStylesheet id="main-window-style" href={ '../main_window.css' } />


I think we need to be able to load the RTL dynamically. Without this rtl.css, some components are a bit mixed up. For example, the "What's New" modal:

I could replicate that issue in trunk and added a attempted fix: #1805

Hey @bcotrim 👋🏼 I have came across more components that have RTL styling broken: STU-885.

I think we may need to reconsider loading component styles dynamically. We can continue the discussion in that related Linear issue.

sejas

I am approving it as I think my findings can be addressed as follow-ups.

bcotrim · 2025-09-22T18:27:20Z

I encountered an issue when trying to create a site using the Commerce Blueprint, I consistently see this error, and I didn't encounter the same on trunk:

@gcsecsey could you test again please? I pushed some changes from trunk and I could not replicate the issue. Can you confirm it was fixed?

The thumbnail images on the blueprint screen blink when you select a file. (I'm not sure if this is related to this PR, but it's the first time I've noticed it.)

@sejas regarding the images blinking I think it's unrelated to this change, and added another PR with a tentative fix: #1806 as I couldn't replicate it locally.

The Studio CLI returns a warning/error message [0922/160239.105499:ERROR:node_main.cc(142)] Node.js environment variables are disabled because this process is invoked by other apps.

I am not able to replicate this cli issue, can you give me a step by step? @epeicher @gcsecsey can you try to it on your end to confirm, please?

I am approving it as I think my findings can be addressed as follow-ups.

@epeicher @gcsecsey @sejas would you all agree to take this approach? That way we can split different issues and avoid me being the blocker.

epeicher · 2025-09-23T09:28:19Z

I have done some additional testing. These are my findings:

I encountered an issue when trying to create a site using the Commerce Blueprint, I consistently see this error, and I didn't encounter the same on trunk:

I have been able to successfully create a site using Commerce Blueprint so it seems this issue is fixed

The Studio CLI returns a warning/error message [0922/160239.105499:ERROR:node_main.cc(142)] Node.js environment variables are disabled because this process is invoked by other apps.

I have tested the CLI to create and list preview sites and I have not found this error

I am approving it as I think my findings can be addressed as follow-ups.

@epeicher @gcsecsey @sejas would you all agree to take this approach? That way we can split different issues and avoid me being the blocker.

I agree with this approach. I think the issues found can be addressed as follow-ups and deploy these changes

sejas · 2025-09-23T10:19:39Z

The Studio CLI returns a warning/error message [0922/160239.105499:ERROR:node_main.cc(142)] Node.js environment variables are disabled because this process is invoked by other apps.

I am not able to replicate this cli issue, can you give me a step by step? @epeicher @gcsecsey can you try to it on your end to confirm, please?

My steps were:

Download the .dmg from buildkite
Install the app on my Mac
Start Studio
Click on Studio > Install CLI
Try the studio commands like studio -h

gcsecsey

@gcsecsey could you test again please? I pushed some changes from trunk and I could not replicate the issue. Can you confirm it was fixed?

I cleared node_modules and did a fresh install, but I'm still getting the same issue on the latest 3c0b506 version. I'm seeing the same error a bit later in the Blueprint installation process:

[playground-cli] Running the Blueprint...
Activating woocommerce-payments – 87%Sentry Logger [log]: Captured error event `Timeout waiting for response to message 0`
Sentry Logger [error]: Transport disabled
Error occurred in handler for 'startServer': Error: Timeout waiting for response to message 0
    at Timeout._onTimeout (/Users/gcsecsey/a8c-projects/studio/dist/main/index.js:13002:18)
    at listOnTimeout (node:internal/timers:588:17)
    at process.processTimers (node:internal/timers:523:7)
Stopping server with ID 202af4a9-5d07-49ba-bfa6-67edc7c3a910

I suspect it might be something related to my environment though, if others can't reproduce it. 🤔 I'll try looking into this more separately.

The Studio CLI returns a warning/error message [0922/160239.105499:ERROR:node_main.cc(142)] Node.js environment variables are disabled because this process is invoked by other apps.

I also tested listing sites and previews using the CLI but couldn't reproduce this anymore. 👍

@epeicher @gcsecsey @sejas would you all agree to take this approach? That way we can split different issues and avoid me being the blocker.

I agree too, approving it as I think the latest findings are not blockers and can be addressed separately if needed. 👍 🚢

youknowriad · 2025-10-07T14:14:21Z

I was looking at the performance graphs of Studio https://www.codevitals.run/project/studio/site-editor-load
and I'm wondering whether this PR maybe made the site editor load metric slower. Can't tell why.

wojtekn · 2025-10-07T14:20:37Z

I was looking at the performance graphs of Studio https://www.codevitals.run/project/studio/site-editor-load
and I'm wondering whether this PR maybe made the site editor load metric slower. Can't tell why.

It was rather related to introducing Playground CLI in place of wp-now, and using the start logic twice to match the wp-now behavior. We fixed it under another PR where you noticed that performance is back on track.

youknowriad · 2025-10-07T14:25:24Z

Indeed, it seems that the big spike is back to normal but there's still another "diff" that is not back to original entirely.

Now, If I look at the graph, it is possible that it's the "electron upgrade", in which case I'm not sure there's much we can do

wojtekn · 2025-10-07T14:29:44Z

@youknowriad I think that another "diff" may be a drop caused by switching from wp-now to Playground CLI, and the whole huge spike was caused by an issue with how Studio implemented Playground CLI. It was fixed under #1840, and we are collaborating with the Playground team to identify another "diff".

bcotrim mentioned this pull request Sep 18, 2025

add variables to cli process #1771

Closed

1 task

bcotrim self-assigned this Sep 18, 2025

bcotrim requested a review from a team September 19, 2025 17:06

bcotrim marked this pull request as ready for review September 19, 2025 17:09

epeicher reviewed Sep 22, 2025

View reviewed changes

gcsecsey reviewed Sep 22, 2025

View reviewed changes

sejas reviewed Sep 22, 2025

View reviewed changes

sejas approved these changes Sep 22, 2025

View reviewed changes

bcotrim added 21 commits September 22, 2025 17:00

run dev with vite

c5826c4

add watch

08e2af7

run build

6fb1543

vite build

c717498

fix CI builds

f3bfac2

fix CI builds

3429058

fix CI builds

e97c9f2

fix unit tests

0a258b4

fix CI builds

25fea1b

fix e2e tests

647deb4

fix CI builds

8a543f0

fix production build

fccb913

add missing plugins

db47e89

adjust ts

3fa4972

fix styles

5c25df1

fix build

6d5f928

more fixes

a187002

fix lint

1adff25

fix cli build

7165320

fix cli

561e69d

fix cli build

b24a648

update versions

3c0b506

bcotrim force-pushed the chore/vite_build branch from 1d4daec to 3c0b506 Compare September 22, 2025 16:00

This was referenced Sep 22, 2025

Fix What's New close button color #1805

Merged

blueprints optimize datafiels render #1806

Merged

gcsecsey approved these changes Sep 23, 2025

View reviewed changes

bcotrim merged commit 6128d17 into trunk Sep 23, 2025
12 checks passed

bcotrim deleted the chore/vite_build branch September 23, 2025 10:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Migrate to Vite - #1794

Migrate to Vite#1794
bcotrim merged 22 commits into
trunkfrom
chore/vite_build

bcotrim commented Sep 18, 2025 •

edited

Loading

epeicher left a comment •

edited

Loading

gcsecsey left a comment •

edited

Loading

epeicher commented Sep 22, 2025

sejas left a comment •

edited

Loading

sejas Sep 22, 2025

bcotrim Sep 22, 2025

ivan-ottinger Oct 21, 2025

sejas left a comment

bcotrim commented Sep 22, 2025

epeicher commented Sep 23, 2025 •

edited

Loading

sejas commented Sep 23, 2025

gcsecsey left a comment

Uh oh!

youknowriad commented Oct 7, 2025

wojtekn commented Oct 7, 2025

youknowriad commented Oct 7, 2025

wojtekn commented Oct 7, 2025

Labels

7 participants

Uh oh!

Conversation

bcotrim commented Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Proposed Changes

Testing Instructions

Pre-merge Checklist

epeicher left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

gcsecsey left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

epeicher commented Sep 22, 2025

sejas left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

sejas Sep 22, 2025

Choose a reason for hiding this comment

bcotrim Sep 22, 2025

Choose a reason for hiding this comment

ivan-ottinger Oct 21, 2025

Choose a reason for hiding this comment

sejas left a comment

Choose a reason for hiding this comment

bcotrim commented Sep 22, 2025

epeicher commented Sep 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

sejas commented Sep 23, 2025

gcsecsey left a comment

Choose a reason for hiding this comment

Uh oh!

youknowriad commented Oct 7, 2025

wojtekn commented Oct 7, 2025

youknowriad commented Oct 7, 2025

wojtekn commented Oct 7, 2025

Labels

7 participants

bcotrim commented Sep 18, 2025 •

edited

Loading

epeicher left a comment •

edited

Loading

gcsecsey left a comment •

edited

Loading

sejas left a comment •

edited

Loading

epeicher commented Sep 23, 2025 •

edited

Loading