Volt

https://shopify-vite.barrelny.com
Admin
Volt is a Vite plugin for Shopify theme development that provides seamless integration with...
Tokens:3,872
Snippets:36
Trust Score:10
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Node.js and NPM Versions

Source: https://shopify-vite.barrelny.com/guide

Checks if Node.js (16+) and NPM are installed. These are prerequisites for running Vite and the Shopify plugin. Installation can be done via official graphical installers.

```bash
node -v
npm -v
```

--------------------------------

### Run Vite Development Server and Build Commands

Source: https://shopify-vite.barrelny.com/guide

Commands to start the Vite development server for local development and to build versioned, bundled assets for production deployment. These scripts are typically added to the `package.json` file.

```bash
# Run the Vite development server...
npm run dev

# Build and version the assets for production...
npm run build
```

--------------------------------

### Install Vite and Shopify Plugin via NPM

Source: https://shopify-vite.barrelny.com/guide

Installs Vite and the vite-plugin-shopify as development dependencies. Requires Node.js (16+). Ensure your project is configured for ES modules.

```bash
npm i -D vite vite-plugin-shopify
```

--------------------------------

### Install Shopify Vite Plugin for Asset Cleanup

Source: https://shopify-vite.barrelny.com/guide/troubleshooting

Installs the `@by-association-only/vite-plugin-shopify-clean` plugin as a development dependency. This plugin is used to manage the cleanup of the `assets/` folder during the build process, preserving non-Vite generated files.

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

--------------------------------

### Apply Shopify Vite Preset with CLI

Source: https://shopify-vite.barrelny.com/guide

Installs Vite and Tailwind CSS in a fresh Shopify theme using the preset CLI. Customizable with flags like `--no-base` or `--no-tailwindcss` to skip specific installations.

```bash
npx @preset/cli apply barrel/shopify-vite --path preset
```

--------------------------------

### Basic Vite Configuration with Volt Shopify Plugin

Source: https://shopify-vite.barrelny.com/guide/configuration

This snippet shows the fundamental setup for integrating the Volt Shopify plugin into your Vite configuration file (vite.config.js). It demonstrates how to import the plugin and include it in the Vite plugins array, allowing for basic Shopify theme development with Vite.

```javascript
import shopify from 'vite-plugin-shopify'

export default {
  plugins: [
    shopify({
      // your configuration options here...
    })
  ]
}
```

--------------------------------

### Integrate React Plugin with Vite Shopify

Source: https://shopify-vite.barrelny.com/guide

Installs and configures the `@vitejs/plugin-react` for using React with Vite in a Shopify theme. It ensures JSX files are handled correctly and enables React Fast Refresh during development.

```bash
npm i -D @vitejs/plugin-react
```

```js
import { defineConfig } from 'vite'
import shopify from 'vite-plugin-shopify'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    shopify(),
    react()
  ]
})
```

--------------------------------

### Launch Shopify and Vite Servers in Parallel using npm-run-all

Source: https://shopify-vite.barrelny.com/guide/troubleshooting

Launches both the Vite development server and the Shopify theme development server concurrently using npm scripts defined in `package.json`. This utilizes `npm-run-all` for managing parallel script execution, enabling a streamlined development workflow.

```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"
  }
```

--------------------------------

### Configure Vite with Shopify Plugin

Source: https://shopify-vite.barrelny.com/guide

Creates a Vite configuration file (`vite.config.js`) and integrates the `vite-plugin-shopify`. By default, it processes entry points from the `frontend/entrypoints` directory.

```javascript
import shopify from 'vite-plugin-shopify'

export default {
  plugins: [
    shopify()
  ]
}
```

--------------------------------

### Configure Additional Entrypoints for Shopify Vite

Source: https://shopify-vite.barrelny.com/guide

Defines additional JavaScript or CSS entry points for the Vite build process within a Shopify theme. These can be relative to the theme's source code directory or the project root. The `vite-tag` Liquid snippet is used to render these entries.

```liquid
{% liquid
  # Relative to sourceCodeDir
  render 'vite-tag', entry: '@/foo.ts'
  render 'vite-tag', entry: '~/foo.ts'

  # Relative to project root
  render 'vite-tag', entry: '/bar.ts' # leading slash is required
%}
```

```js
import shopify from 'vite-plugin-shopify'

export default {
  plugins: [
    shopify({
      additionalEntrypoints: [
        'frontend/foo.ts', // Relative to sourceCodeDir
        'bar.ts' // Relative to project root
      ]
    })
  ]
}
```

--------------------------------

### Run Vite Dev Server with Shopify Flags

Source: https://shopify-vite.barrelny.com/guide/troubleshooting

Executes the Vite development server with specific flags for Shopify, including the store name and live reload configuration. This command is typically used in conjunction with parallel script execution for theme development.

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

--------------------------------

### Configure JavaScript Aliases for Vite

Source: https://shopify-vite.barrelny.com/guide

Sets up convenient aliases `~/` and `@/` that point to the theme's `sourceCodeDir`. This simplifies import paths for JavaScript modules and stylesheets within the project.

```js
import App from '@/components/App.vue'
import '@/styles/my_styles.css'
```

--------------------------------

### Render Vite Assets with vite-tag Snippet (Legacy Syntax)

Source: https://shopify-vite.barrelny.com/guide

Loads compiled JavaScript and CSS assets using the older `render 'vite-tag' with 'entry'` syntax. Supported for backward compatibility but the new syntax is preferred for future updates.

```liquid
{% liquid
  # Old syntax - still works for backward compatibility
  render 'vite-tag' with 'theme.scss'
  render 'vite-tag' with 'theme.ts'
%}
```

--------------------------------

### Configure Vite Tunnel for Shopify Assets using ngrok

Source: https://shopify-vite.barrelny.com/guide/troubleshooting

Sets up a tunnel for accessing local assets during Shopify theme development using ngrok. The `tunnel` option in `vite-plugin-shopify` is configured with the ngrok URL to bypass Cloudflare tunnel errors and ensure theme editor accessibility.

```javascript
import shopify from 'vite-plugin-shopify'

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

--------------------------------

### Render Vite Assets with vite-tag Snippet (New Syntax)

Source: https://shopify-vite.barrelny.com/guide

Loads compiled JavaScript and CSS assets generated by Vite within a Shopify theme. Uses the recommended `render` tag with named parameters for compatibility with Shopify's strict Liquid parser.

```liquid
{% liquid
  # Recommended: New syntax compatible with Shopify's strict Liquid parser
  render 'vite-tag', entry: 'theme.scss'
  render 'vite-tag', entry: 'theme.ts'
%}
```

--------------------------------

### Configure PostCSS for Vite Shopify

Source: https://shopify-vite.barrelny.com/guide

Sets up PostCSS processing for stylesheets, enabling plugins like Tailwind CSS and Autoprefixer. A `postcss.config.js` file in the project root is automatically detected by Vite.

```js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}
```

--------------------------------

### Configure package.json for ESM and Scripts

Source: https://shopify-vite.barrelny.com/guide

Sets the package to use ES modules ('type': 'module') and adds npm scripts for Vite development ('dev') and building ('build'). Essential for using the ESM-only Shopify plugin.

```json
{
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite dev",
    "build": "vite build"
  },
  "keywords": [],
  "author": ""
}
```

--------------------------------

### Preload Stylesheets with Vite Shopify

Source: https://shopify-vite.barrelny.com/guide

Enables the `preload` parameter for stylesheet tags using the `preload_stylesheet: true` option within the `vite-tag` Liquid snippet. This is useful for render-blocking stylesheets but should be used judiciously.

```liquid
{% render 'vite-tag', entry: 'theme.scss', preload_stylesheet: true %}

**Legacy syntax (still supported):**
{% render 'vite-tag' with 'theme.scss', preload_stylesheet: true %}
```

--------------------------------

### Configure Vite for Asset Cleanup with shopify-clean plugin

Source: https://shopify-vite.barrelny.com/guide/troubleshooting

Configures Vite to disable its default behavior of emptying the output directory (`emptyOutDir: false`) and enables the `vite-plugin-shopify-clean` plugin. This ensures that only Vite-generated files are removed, preserving other assets.

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

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

--------------------------------

### Configure Dev Server CORS Origin in Vite

Source: https://shopify-vite.barrelny.com/guide/troubleshooting

Allows assets from the Vite dev server to be fetched when facing CORS issues. Specify multiple origins in the `server.cors.origin` option within your `vite.config.js` file. This configuration is essential for custom domains and local development environments.

```javascript
import shopify from 'vite-plugin-shopify'

export default {
  plugins: [
    shopify()
  ],
  server: {
    cors: {
      origin: [
        /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/,
        'https://johns-apparel.myshopify.com',
        'https://johnsapparel.com'
      ]
    }
  }
}
```

--------------------------------

### Enable Vite Tunnel Feature for Chrome Local Network Access Fix

Source: https://shopify-vite.barrelny.com/guide/troubleshooting

Enables the `tunnel` feature directly within the `vite-plugin-shopify` configuration to address Chrome's Local Network Access update. This creates a public HTTPS connection, allowing the Shopify Theme Editor to access local assets and bypass security restrictions. Additionally, `allowedHosts` is configured for Cloudflare tunnel compatibility.

```diff
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [shopify(), tailwindcss()],
+  plugins: [shopify({ tunnel: true }), tailwindcss()],
   server: {
     cors: {
       origin: [defaultAllowedOrigins, /\.myshopify\.com$/]
-    }
+    },
+    allowedHosts: ['.trycloudflare.com']
   },
   build: {
     rollupOptions: {

```
Tokens:
Raw