How can I exclude "src" folder from the watch list of Shopify CLI while working with theme app extension

Extensions
1

Context:

  • Working on theme app extension
  • Created small vite project that combine all the code from src folder and create main.js inside the assets folder. Check the attached image for my folder structure.

image
image1544×2380 226 KB

The Problem(imo):

  • I see some errors in the log while Shopify CLI is updating the preview. The file it says missing is always their in the assets folder.

image
image2658×402 84.1 KB

I think the issue may be due to Shopify CLI and my vite setup both are working together, CLI react as soon as I make some changes in some of the files in src folder, but ideally, it should not, because vite is supposed to watch those changes and create main.jsfile inside the assets folder. And the CLI should take those changes and update the preview. I believe there is some race condition on updating the preview and it might resolved if I can ignore the src folder being watched for extension preview update.

I tried to add src inside the .shopifyignore but seems its not helpful.

Thanks.

2

There might be a better answer for this, but I’d recommend putting the unbuilt packages outside of the extensions folder. For example, create a packages folder, put your unbuilt JS packages in there, and update your build process to dump the built files into the assets folder of the theme extension. That way, you’ll get the benefit of your own build process AND the CLI’s hot-reloading etc.

1 Like
3

Thanks @bkspace

I tried that and it worked.

Here are some insights.

I observed that Shopify CLI is hot-reloading the extension for each change it observe(I wish we have some setting to add delay before CLI pickup the changes, kind of debounce). In my case it was FOUR changes at the same time.

  1. (one from) Code changes by me
  2. (three from) Code changes by Vite (transpile all .ts files to main.js and update it in the assets folder), I am using manualChunks to keep each js file below 500kb(I have three such files)

all these changes at the same time, which creates some issues with Hot Reload.

I was able to reduce the updates to only “one“ by doing following changes.

  • move the src folder outside the extension folder.
  • remove manualChunks related setting from vite.config.ts

It looks good so far… Will update here if I encounter any issue with this setup.