Troubleshooting

If the suggestions here don't work, please try posting questions on GitHub Discussions.

How to launch the Shopify and Vite servers in parallel?

You can use concurrently or npm-run-all and script commands to launch Vite and Shopify servers in parallel.

package.json

  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite", 
    "dev": "run-p -sr \"shopify:dev -- {@}\" \"vite:dev\" --", 
    "deploy": "run-s \"build\" \"shopify:push -- {@}\" --", 
    "shopify:dev": "shopify theme dev", 
    "vite:dev": "vite", 
    "shopify:push": "shopify theme push", 
    "build": "vite build"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5", 
    "vite": "^4.2.1",
    "vite-plugin-shopify": "^2.0.2"
  }
}

$ npm run dev -- --store johns-apparel --live-reload full-page

How to cleanup the assets/ folder?

To clean up the assets/ folder, you can disable the default behavior of Vite emptying the outDir directory on build. Instead, use the vite-plugin-shopify-clean plugin developed by the BAO engineering team. This plugin allows you to remove only the files generated by Vite, while preserving any code added by third-party apps in the assets/ folder.

$ npm i -D @by-association-only/vite-plugin-shopify-clean

vite.config.js

import shopify from 'vite-plugin-shopify'
import cleanup from '@by-association-only/vite-plugin-shopify-clean'

export default {
  build: { 
    emptyOutDir: false
  }, 
  plugins: [
    cleanup(), 
    shopify()
  ]
}

Use ngrok for tunneling during theme development

If you are experiencing Cloudflare tunnel errors with the Shopify Vite Plugin, you can use ngrok as a workaround. First, create an ngrok account and install the ngrok CLI, then follow their instructions to set up your access token. Next, run the command ngrok http 3000 (or any other port number you prefer) and take note of the URL provided by ngrok, which ends with ngrok-free.app. Keep ngrok running. Finally, configure the plugin.

vite.config.js

vite.config.js

import shopify from 'vite-plugin-shopify'

export default {
  plugins: [
    shopify({
      tunnel: 'https://123abc.ngrok-free.app:3000'
    })
  ]
}