Created to be used alongside vite-plugin-shopify, for those who need to watch static assets, keeping the Shopify theme assets folder always in sync.
This plugin is not yet stable, so use at your own risk.
Please give your feedback, and send me any questions. A better documentation is in progress.
npm i -D vite-plugin-shopify-assets # npm
yarn add -D vite-plugin-shopify-assets # yarnAssumptions for the basic usage example:
- Your Shopify theme folders are located in the root.
- Your Vite
publicDirconfig option is not set (will default to 'public'). - You have a
public/folder, which holds all your static files, located in the root. - You have not added custom configuration to vite-plugin-shopify.
- You have not added custom configuration to vite-plugin-shopify-assets.
In your vite.config.js file, you need to import the plugin:
// vite.config.js
import shopify from 'vite-plugin-shopify';
import shopifyAssets from 'vite-plugin-shopify-assets';
export default defineConfig({
plugins: [shopify(), shopifyAssets()],
});Based on the folder structure below...
my-shopify-project/
├── public/
│ ├── static-script.js
│ └── static-style.css
├── frontend/
│ └── entrypoints/
│ ├── main.ts
│ └── style.css
├── assets/
├── config/
├── layout/
├── locales/
├── sections/
├── snippets/
└── templates/
... Your assets folder when running vite build will look like this:
assets/
├── .vite/manifest.json
├── main-[HASH].js
├── style-[HASH].css
├── static-script.js
└── static-style.css
It works on dev, watch and build.
{
"name": "my-shopify-project",
"scripts": {
"dev": "vite",
"watch": "vite build --watch",
"build": "vite build"
}
}npm run dev
# yarn watch
# pnpm buildIn your vite.config.js file, you can add custom configuration options:
// vite.config.js
import shopify from 'vite-plugin-shopify';
import shopifyAssets from 'vite-plugin-shopify-assets';
export default defineConfig({
plugins: [
// Barrel's vite-plugin-shopify
shopify({
themeRoot: 'theme',
sourceCodeDir: 'frontend',
}),
// This plugin
shopifyAssets({
themeRoot: 'theme',
publicDir: 'frontend/assets',
targets: [
// when targets are passed as strings, all target options use the default
// Note: target sources are relative to publicDir
'fonts/*.{woff,woff2,ttf,otf,svg}',
'images/*.{jpg,jpeg,gif,png,webp,svg}',
// when targets are passed as objects, you can specify options
{
// glob pattern for source assets
src: '**/*.{js,liquid,text,md,json,css}',
// glob patterns to ignore
ignore: ['other-ignored/**/*', 'icons/**/*', 'images/**/*'],
},
{
// when a non-static asset (eg: used in js) also needs to be copied as a static asset,
// you can tell the plugin to find it elsewhere. Note: relative to publicDir
src: '../icons/icon-*.svg',
// the default destination is {themeRoot}/assets, but you can specify
// a different source (relative to themeRoot)
dest: 'snippets',
// rename function, useful for making liquid snippets out of svg files for example
rename: (file, ext, src) => `${file}.liquid`,
// cleanMatch - USE WITH CAUTION:
// glob pattern, relative to the dest folder, of files that should be cleaned/deleted
// useful when the dest folder is not the default `{themeRoot}/assets` to avoid unused asset files
// being shipped with the theme
//
// Only use this when you are certain that ALL files matching the pattern
// have their source elsewhere and thus can be safely deleted
cleanMatch: 'icon-*.liquid',
},
],
}),
],
});The above configuration assumes the below folder structure:
my-shopify-project/
├── frontend/
│ ├── assets/
│ │ ├── fonts/
│ │ │ └── static-font.woff
│ │ ├── images/
│ │ │ └── static-image.png
│ │ ├── other/
│ │ │ └── static-script-1.js
│ │ └── static-script-2.js
│ └── icons/
│ └── icon-arrow.svg
└── theme/
├── assets/
├── config/
├── layout/
├── locales/
├── sections/
├── snippets/
└── templates/
- Vite Plugin Shopify by Barrel/NY (Thanks for the amazing plugins!)
- Vite Plugin Static Copy