Vite Plugin Shopify Assets

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.

Please give your feedback, and send me any questions. A better documentation is in progress.

Installation

1npm i -D vite-plugin-shopify-assets # npm
2yarn add -D vite-plugin-shopify-assets # yarn

Basic Usage

Assumptions for the basic usage example:

• Your Shopify theme folders are located in the root.
• Your Vite publicDir config 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:

1// vite.config.js
2import shopify from 'vite-plugin-shopify';
3import shopifyAssets from 'vite-plugin-shopify-assets';
4
5export default defineConfig({
6  plugins: [shopify(), shopifyAssets()],
7});

Based on the folder structure below...

1my-shopify-project/
2  ├── public/
3  │   ├── static-script.js
4  │   └── static-style.css
5  ├── frontend/
6  │   └── entrypoints/
7  │       ├── main.ts
8  │       └── style.css
9  ├── assets/
10  ├── config/
11  ├── layout/
12  ├── locales/
13  ├── sections/
14  ├── snippets/
15  └── templates/

... Your assets folder when running vite build will look like this:

1assets/
2├── .vite/manifest.json
3├── main-[HASH].js
4├── style-[HASH].css
5├── static-script.js
6└── static-style.css

It works on dev, watch and build.

1{
2  "name": "my-shopify-project",
3  "scripts": {
4    "dev": "vite",
5    "watch": "vite build --watch",
6    "build": "vite build"
7  }
8}

1npm run dev
2# yarn watch
3# pnpm build

Advanced usage

In your vite.config.js file, you can add custom configuration options:

1// vite.config.js
2import shopify from 'vite-plugin-shopify';
3import shopifyAssets from 'vite-plugin-shopify-assets';
4
5export default defineConfig({
6  plugins: [
7    // Barrel's vite-plugin-shopify
8    shopify({
9      themeRoot: 'theme',
10      sourceCodeDir: 'frontend',
11    }),
12
13    // This plugin
14    shopifyAssets({
15      themeRoot: 'theme',
16      publicDir: 'frontend/assets',
17      targets: [
18        // when targets are passed as strings, all target options use the default
19        // Note: target sources are relative to publicDir
20        'fonts/*.{woff,woff2,ttf,otf,svg}',
21        'images/*.{jpg,jpeg,gif,png,webp,svg}',
22
23        // when targets are passed as objects, you can specify options
24        {
25          // glob pattern for source assets
26          src: '**/*.{js,liquid,text,md,json,css}',
27
28          // glob patterns to ignore
29          ignore: ['other-ignored/**/*', 'icons/**/*', 'images/**/*'],
30        },
31
32        {
33          // when a non-static asset (eg: used in js) also needs to be copied as a static asset,
34          // you can tell the plugin to find it elsewhere. Note: relative to publicDir
35          src: '../icons/icon-*.svg',
36
37          // the default destination is {themeRoot}/assets, but you can specify
38          // a different source (relative to themeRoot)
39          dest: 'snippets',
40
41          // rename function, useful for making liquid snippets out of svg files for example
42          rename: (file, ext, src) => `${file}.liquid`,
43
44          // cleanMatch - USE WITH CAUTION:
45          // glob pattern, relative to the dest folder, of files that should be cleaned/deleted
46          // useful when the dest folder is not the default `{themeRoot}/assets` to avoid unused asset files
47          // being shipped with the theme
48          //
49          // Only use this when you are certain that ALL files matching the pattern
50          // have their source elsewhere and thus can be safely deleted
51          cleanMatch: 'icon-*.liquid',
52        },
53      ],
54    }),
55  ],
56});

The above configuration assumes the below folder structure:

1my-shopify-project/
2  ├── frontend/
3  │   ├── assets/
4  │   │   ├── fonts/
5  │   │   │   └── static-font.woff
6  │   │   ├── images/
7  │   │   │   └── static-image.png
8  │   │   ├── other/
9  │   │   │   └── static-script-1.js
10  │   │   └── static-script-2.js
11  │   └── icons/
12  │       └── icon-arrow.svg
13  └── theme/
14      ├── assets/
15      ├── config/
16      ├── layout/
17      ├── locales/
18      ├── sections/
19      ├── snippets/
20      └── templates/

Acknowledgements

• Vite Plugin Shopify by Barrel/NY (Thanks for the amazing plugins!)
• Vite Plugin Static Copy