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()
  ]
}