Skip to content

Build and Deployment

Jump to bottom
Anthony Baggett edited this page Nov 21, 2025 · 2 revisions

Build and Deployment

Complete guide to building VAST for production and deploying to Shopify.

Building for Production

npm run build

This command performs two key tasks:

  1. Runs Vite build - Compiles and minifies JavaScript and CSS
  2. Runs Schematic - Compiles all schema files from src/schema/ to section files

Build Output

After running the build command, you'll find:

  • JavaScript: assets/[name].[hash].min.js
  • CSS: assets/[name].[hash].min.css
  • Vite snippet: snippets/vite.liquid (auto-generated, gitignored)

The hashed filenames ensure proper cache busting in production. The vite.liquid snippet dynamically references the correct hashed asset files in your Liquid templates.

Deployment Commands

Development Environment

npm run deploy:dev

Builds and pushes to your development environment (requires shopify.theme.toml configuration).

Staging Environment

npm run deploy:staging

Builds and pushes to your staging environment (requires shopify.theme.toml configuration).

Production Environment

npm run deploy

Interactive deployment to production. This command will prompt you to select which theme to update.

⚠️ Warning: This can overwrite your live theme. Always double-check your selection before confirming.

New Theme

npm run deploy:new

Creates a new unpublished theme on Shopify. This is the safest option for testing, as it won't affect any existing themes.

Configuration Files

shopify.theme.toml

This file configures your Shopify CLI environments. This file is gitignored to protect your store credentials.

Example configuration (auto-create mode):

[environments.development]
store = "your-store-name"
# No theme ID - Shopify CLI creates development theme automatically

Example configuration (with specific theme IDs):

[environments.development]
store = "your-store-name"
theme = "123456789"  # Your development theme ID

[environments.staging]
store = "your-store-name"
theme = "987654321"  # Your staging theme ID
ignore = ["templates/*", "config/*"]

[environments.production]
store = "your-store-name"
theme = "111222333"  # Your production theme ID
ignore = ["templates/*", "config/*"]

Setup Options:

The npm run setup wizard offers three ways to configure your development environment:

  1. Auto-create (recommended): Omits theme ID, letting Shopify CLI automatically create a development theme
  2. Use existing: Adds a specific theme ID from your store
  3. Create new: Creates a new unpublished theme and adds its ID

For detailed information about these options, see Getting Started.

Getting theme IDs manually:

You can find theme IDs by running:

shopify theme list

Or in Shopify Admin: Online Store → Themes (theme ID is in the URL when editing a theme).

vite.config.js

Main Vite configuration including:

  • Shopify Vite plugin setup - Entrypoints and asset generation
  • SSL configuration - Self-signed certificates for local HTTPS
  • CORS settings - Allow localhost and myshopify.com domains
  • Tailwind v4 plugin - CSS processing
  • Public directory syncing - Watches public/ and syncs to assets/
  • Liquid file change detection - Triggers page reload on Liquid file changes

tailwind.config.js

Tailwind v4 no longer requires extensive configuration. Most settings are now CSS-based via @theme in your CSS files.

You may still use this file for:

  • Plugin configuration
  • Custom content paths (if needed beyond defaults)
  • Preset extensions

jsconfig.json / tsconfig.json

JavaScript and TypeScript configurations for better IDE support and module resolution.

These files provide:

  • Path aliases - Simplify imports with @/ shortcuts
  • IntelliSense - Better autocomplete in your editor
  • Type checking - Catch errors before runtime (TypeScript only)

Deployment Best Practices

1. Test Before Deploying

Always test your build locally before deploying:

npm run build
npm run dev

This ensures your production build works correctly in the Shopify environment.

2. Use Environments

Set up development, staging, and production environments in shopify.theme.toml to avoid accidentally overwriting the wrong theme.

3. Backup Before Production

Before deploying to production, consider:

  • Creating a duplicate of your live theme as backup
  • Using npm run deploy:new to create a new theme, then publishing it manually
  • Testing on staging first

4. Check Git Status

Ensure all your changes are committed before deploying:

git status
git add .
git commit -m "Your commit message"

This makes it easy to roll back if needed.

5. Monitor After Deployment

After deploying to production:

  • Check your live site immediately
  • Test critical features (cart, checkout, search)
  • Monitor for JavaScript errors in browser console
  • Verify all assets loaded correctly (no 404s in Network tab)

Deployment Strategies

VAST supports two deployment approaches—choose whichever fits your workflow best, or use both!

GitHub Integration (Automatic)

Connect your theme to a GitHub repository for automatic deployment when you push changes.

How it works:

  • Push code to GitHub → Shopify automatically syncs changes to your theme
  • Great for teams, CI/CD workflows, and version control-first development
  • .gitignore is configured to work with Shopify's GitHub integration

Setup:

  1. Push your theme to a GitHub repository
  2. In Shopify Admin: Online Store → Themes → Add theme → Connect from GitHub
  3. Select your repository and branch
  4. Shopify will automatically deploy on every push

Learn more about Shopify GitHub integration

CLI Push (Manual)

Use CLI commands for direct deployment from your local machine.

How it works:

  • Run deployment commands → Theme pushed directly to Shopify
  • Great for solo developers, manual control, and testing before deploy
  • Uses shopify.theme.toml for environment configuration

When to use:

  • Quick manual testing
  • Solo development without CI/CD
  • Deploying to multiple environments with different configurations

Using Both

These approaches aren't mutually exclusive! Many developers use:

  • GitHub integration for staging/production (automatic deploys)
  • CLI push for development (quick manual testing)

Next Steps

← Back to Home

Clone this wiki locally