Add to existing craft site

[billymedia]

Question

I have an existing craft cms site that is mid development, and i would like to add vite and the vite plugin. I installed the plugin, then installed the vite and vite-plugin-restart packages. I created a vite.php config file using your example, and created a vite.config.js file with the following:

import ViteRestart from 'vite-plugin-restart'
export default ({ command }) => ({
  base: command === 'serve' ? '' : '/dist/',
  publicDir: '',
  build: {
    manifest: true,
    outDir: './web/dist/',
    rollupOptions: {
      input: {
        app: './src/scripts/main.js',
      },
    },
  },
  server: {
    host: '0.0.0.0',
    port: 3000,
    strictPort: true,
    https: true,
    hmr: {
      host: 'localhost',
      port: 3000,
      path: '/',
    }
  },
  plugins: [
    ViteRestart({
      reload: ['./templates/**/*'],
    }),
  ],
})

I also added the scripts commands to package.json for dev, build and preview.

My files are organised with the js/css are inside a src folder at the project root. With this in my layouts template. {{ craft.vite.script("/src/scripts/main.js") }}

When i run npm run dev, i get the hosts vite is running at with no errors, but i cannot get it to reload changes to the templates and src folder.

Is there something i have missed? Does a guide somewhere exist which describes how to add vite and the vite plugin to a fresh craft install rather than using your starter project?

[khalwat]

This is unlikely to be an issue with the Vite plugin itself, but rather with Vite and potentially your local development environment.

The Vite plugin just is a connector between Craft CMS and Vite; once you're accessing the Vite dev server, that's 100% Vite code and any interactions it may have with your local dev environment.