Setting Up Vite for Shopify Theme Development

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

/*
 * Vite config for Shopify themes
 * Key difference from standard React apps: we output directly to the theme folder
 * instead of a dist/ directory, so Shopify CLI can sync the files immediately
 */
export default defineConfig({
  plugins: [react()],

  build: {
    // Output directly to shopify-theme/assets - no intermediate folders
    // This is what makes the Shopify CLI workflow seamless
    outDir: 'shopify-theme/assets',

    // CRITICAL: Don't clear the folder! Other theme assets (images, fonts,
    // existing CSS) live here. Setting this to true would delete them.
    emptyOutDir: false,

    // Enable source maps so you can debug original .tsx files in browser DevTools
    sourcemap: true,

    rollupOptions: {
      // Single entry point - Vite will bundle everything this imports
      input: resolve(__dirname, 'src/main.tsx'),
      output: {
        // Fixed filename so Liquid can reference it reliably
        // (no hash = same URL on every build = easier caching management)
        entryFileNames: 'react-bundle.js',

        // CSS extracted to a separate file for better caching
        assetFileNames: (assetInfo) => {
          if (assetInfo.name?.endsWith('.css')) {
            return 'react-bundle.css';
          }
          return 'react-[name].[ext]';
        },

        // Disable code splitting - simpler for Shopify themes
        // One bundle loads on all pages, cached by the browser
        manualChunks: undefined,
      },
    },

    // Terser for smaller production bundles
    minify: 'terser',
    terserOptions: {
      compress: {
        // Remove console.log in production (saves ~2KB and cleans up DevTools)
        drop_console: process.env.NODE_ENV === 'production',
      },
    },
  },

  resolve: {
    // Path aliases for cleaner imports: '@/components/Button' vs '../../components/Button'
    // Must match paths in tsconfig.json for TypeScript to understand them
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@hooks': resolve(__dirname, 'src/hooks'),
      '@stores': resolve(__dirname, 'src/stores'),
      '@utils': resolve(__dirname, 'src/utils'),
      '@types': resolve(__dirname, 'src/types'),
    },
  },
});

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

// Global styles are bundled into react-bundle.css
import './styles/main.css';

/*
 * Component Registry Pattern
 * Maps DOM element IDs to React components. When the page loads,
 * we scan for these IDs and mount the corresponding components.
 * This allows Liquid to define mount points: <div id="product-form-root"></div>
 */
const COMPONENTS: Record<string, React.LazyExoticComponent<React.ComponentType>> = {
  // Components will be added here as we build them
  // Format: 'dom-element-id': lazy(() => import('./path/to/Component')),
  // 'product-form-root': lazy(() => import('./components/product/ProductForm')),
};

function mountComponents() {
  // For each registered component, find its mount point and render
  Object.entries(COMPONENTS).forEach(([elementId, Component]) => {
    const element = document.getElementById(elementId);
    if (element) {
      // createRoot is React 18's new API (replaces ReactDOM.render)
      const root = createRoot(element);
      root.render(
        // StrictMode helps catch common bugs during development
        // (double-renders components to detect side effects)
        <StrictMode>
          <Component />
        </StrictMode>
      );
    }
  });
}

// Handle both cases: script loaded before or after DOM is ready
if (document.readyState === 'loading') {
  // DOM not ready yet - wait for it
  document.addEventListener('DOMContentLoaded', mountComponents);
} else {
  // DOM already ready (script was deferred or loaded late)
  mountComponents();
}

// Development-only logging (stripped in production build)
if (import.meta.env.DEV) {
  console.log('🚀 React bundle initialized');
}

/*
 * React component styles
 * These are bundled into react-bundle.css
 */

/* CSS Variables (can be overridden by Liquid/theme settings) */
:root {
  --react-transition-fast: 150ms;
  --react-transition-normal: 300ms;
  --react-transition-slow: 500ms;
}

/* Base component resets */
.react-component {
  box-sizing: border-box;
}

.react-component *,
.react-component *::before,
.react-component *::after {
  box-sizing: inherit;
}

VITE_DEBUG=true

# .env.production
VITE_DEBUG=false

/*
 * Multiple Entry Points: Split code by page type
 * Useful for large themes where you don't want to load all React code on every page
 * Trade-off: More files to manage, but smaller per-page bundles
 */
export default defineConfig({
  build: {
    outDir: 'shopify-theme/assets',
    emptyOutDir: false,
    rollupOptions: {
      // Each entry creates a separate bundle
      input: {
        main: resolve(__dirname, 'src/main.tsx'),        // Shared components (header, cart)
        product: resolve(__dirname, 'src/entries/product.tsx'),      // Product page only
        collection: resolve(__dirname, 'src/entries/collection.tsx'), // Collection page only
      },
      output: {
        // [name] is replaced with the key from input (main, product, collection)
        entryFileNames: 'react-[name].js',
        assetFileNames: 'react-[name].[ext]',
      },
    },
  },
});

.button {
  padding: 1rem 2rem;
  background: var(--color-primary);
}

.button:hover {
  opacity: 0.9;
}

import styles from './Button.module.css';

export function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}

/*
 * Production Optimization Settings
 * Shopify themes benefit from smaller bundles since assets are served via CDN
 */
export default defineConfig({
  build: {
    // Assets smaller than 4KB are inlined as base64
    // Reduces HTTP requests for tiny icons/images
    assetsInlineLimit: 4096,

    // Warn if any chunk exceeds 50KB (Shopify best practice)
    // Large bundles = slower initial page load
    chunkSizeWarningLimit: 50,

    rollupOptions: {
      output: {
        // Remove whitespace and comments for smaller output
        compact: true,
      },
    },
  },

  esbuild: {
    // Strip console.log and debugger statements in production
    // Saves bytes and keeps DevTools clean for store visitors
    drop: process.env.NODE_ENV === 'production' ? ['console', 'debugger'] : [],
  },
});

resolve: {
  alias: {
    '@': resolve(__dirname, 'src'),
  },
}

"paths": {
  "@/*": ["src/*"]
}