Shopify Dev CLI Update 01/2025

Introduction

Our current dev flow requires effort publishing, pushing or using Resource Override to show the frontend app using Shopify Theme App Extension on the local development store. This is a time-consuming process and not efficient.

Previous, since the fact that pushing the Theme App Extension along with npm run dev causes performance issues because the CLI use git to push the content to the Shopify development store. So, in previous version of @avada/shopify-cli and @avada/shopify-app, we remove pushing the Theme App Extension online.

However, with the increase computing power, we can bring this back to improve the development experience for team. With this, we can see the frontend app in the local development store without the need of pushing the Theme App Extension.

Update the version

Now, let’s update the new dev flow.

Update packages

First, update the @avada/shopify-cli and @avada/shopify-app to the latest version:

"@avada/shopify-app": "3.58.3-alpha.4",
"@avada/shopify-cli": "3.58.2-alpha.3"

Then yarn install again. It is best to remove your node_modules with find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + and yarn install again.

Update vite.config.js

Update this function to your vite.config.js, this will help you replace the CDN_URL with the local cloudflare (or ngrok) URL:

// change your file name accordingly, place it just like the part which we update the .env
updateThemeAppExtFile('../../extensions/theme-extension/assets/avada-embed.js');

/**
 *
 * @param file
 */
function updateThemeAppExtFile(file) {
  const fileContent = fs.readFileSync(file, 'utf8');
  const regex = /const BASE_URL\s*=\s*(['"`])(.*?)\1/;
  const url = `${process.env.HOST}/scripttag`;
  const updatedContent = fileContent.replace(regex, `const BASE_URL = '${url}'`);
  // write everything back to the file system
  fs.writeFileSync(file, updatedContent);
}

Configure git

As we said, it use git to push the theme code, so it may encounter crashing on npm run dev if you have not configured the git limit, make sure to do this:

git config --global http.version HTTP/1.1 && git config http.postBuffer 524288000

If not, you will encounter something like this:

error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1)

Update the dev commands

No you should have two versions of dev commands, one with the Theme App Extension and one without. You can add this to your package.json:

"dev": "shopify app dev --skip-dependencies-installation",
"dev:no-theme": "shopify app dev --skip-dependencies-installation --theme=",

Experience it

Now, you can run npm run dev to see the frontend app in the local development store without the need of pushing the Theme App Extension. It should require more time to start the dev server, but it should be faster than pushing the Theme App Extension over and over again.

If you see like below, you are good to go:

Pushing theme...     0%
15:38:54 │ extensions   │ Pushing theme...    20%
15:38:57 │ extensions   │ Pushing theme...    30%
15:38:58 │ extensions   │ Pushing theme...    40%
15:39:02 │ extensions   │ Pushing theme...    50%
15:39:18 │ extensions   │ Pushing theme...    60%
15:39:19 │ extensions   │ Pushing theme...    70%
15:39:20 │ extensions   │ Pushing theme...    80%
15:39:21 │ extensions   │ Pushing theme...    90%
15:39:26 │ extensions   │ Pushing theme...   100%

Sample app

This is already updated with the app template, you can create a new avada app to see example app:

avada app:create app-name

Others

On the npm run dev terminal, you can press a to quickly open the app in the Shopify partner instead of open the browser and search the app. This is a small feature but it should help you save some time.