⚡How to - vite-plugin-watch-and-run

Installation

If you have @kitql/all-in you don't need to install this manually.

If you want to install it stand alone, please do

yarn add -D vite-plugin-watch-and-run

Configuration

Add watchAndRun plugin with the following configuration:

• watch: a glob pattern to watch for changes. This will be matched against the absolute path for altered files.
• run: a command to trigger when a file change is detected (You can be very creative 🥳!)

import path from 'path'
import watchAndRun from 'vite-plugin-watch-and-run'
 
/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    watchAndRun([
      {
        name: 'gen',
        watchKind: ['add', 'change', 'unlink'],
        watch: path.resolve('src/**/*.(gql|svelte)'),
        run: 'npm run gen',
        delay: 300
      }
    ])
  ]
}
 
export default config

Side Notes

• Full list of watchKind can be found here: https://github.com/paulmillr/chokidar#api (opens in a new tab)

• delay is good in case you have 200 files added realy fast! Like this the cmd is executed only once.

• For the run command we recommend to use npm run xxx as it will work for npm, yarn and pnpm 🙃

Go back to Get Started.