vite-plugin-static-sync

Sync static files during Vite development with file watching and full-page reloads.

Vite's built-in publicDir copies everything to the same place. This plugin maps multiple source directories to different destinations, watches for changes with chokidar, and triggers a browser reload on each update. Works well for Craft CMS projects in DDEV, where files need to land in specific output directories.

Installation

npm i -D vite-plugin-static-sync

or

bun add -d vite-plugin-static-sync

Usage

import { defineConfig } from "vite";
import { staticSync } from "vite-plugin-static-sync";

export default defineConfig({
  publicDir: false,
  plugins: [
    staticSync({
      targets: [
        {
          src: "src/static",
          dest: "web/dist",
          name: "Static files",
          maintainStructure: true,
        },
        {
          src: "src/favicons",
          dest: "web",
          name: "Favicons",
          maintainStructure: false,
        },
      ],
    }),
  ],
});

The plugin ships with Craft CMS defaults targeting src/static, src/favicons, and src/icon-picker. Call it without arguments to use them:

staticSync();

Options

| Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | targets | StaticSyncTarget[] | Craft CMS defaults | Directories to copy and watch. |

Target options

| Option | Type | Default | Description | | ------ | ---- | ------- | ----------- | | src | string | - | Source directory to watch and copy. | | dest | string | - | Destination directory to sync files into. | | name | string | - | Human-readable label used in console output. | | emoji | string | "📁" | Prefix used in console output. | | maintainStructure | boolean | true | Preserve source directory structure under the destination. | | usePolling | boolean | true | Use polling for file watching. | | interval | number | 1000 | Polling interval in milliseconds. |

Local development

npm install
npm run typecheck
npm run build

Publishing

npm publish --access public