How to watch public directory in Vite project for hot-reload?

Issue

I have a react project configured with Vite.
Hot reload works great, but I use react-i18next for multiple language support and this is my structure:

public
  -> en
    -> translation.json
  -> ru
    -> translation.json

When I change the translation.json files, Vite doesn't watch it, and I have to refresh the page to see the changes.

Is there a way to tell Vite to watch all the files in the public directory?

Solution

You can achieve that with a plugin.

I made a mistake on my first answer, it should be a full-reload event and not a update event

export default function CustomHmr() {
    return {
      name: 'custom-hmr',
      enforce: 'post',
      // HMR
      handleHotUpdate({ file, server }) {
        if (file.endsWith('.json')) {
          console.log('reloading json file...');
  
          server.ws.send({
            type: 'full-reload',          
            path: '*'
          });
        }
      },
    }
}

then add the plugin in vite.config.js :

{
  plugins: [
    CustomHmr()   <---  custom plugin
  ]
}

💡 I made you a repo on Github with a working example:

• https://github.com/flydev-fr/vite-react-i18next

Result Illustration

Answered By - flydev