0
198
VistasHow to watch public directory in Vite project for hot-reload?
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?
2 Respuestas
Responde la pregunta0
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:
Result Illustration
0
I've modified flydev's answer so that it can hot-reload the i18n-dependent components without reloading the whole page. (Currently using in a typescript project)
import { PluginOption } from "vite";
export default function I18nHotReload(): PluginOption {
return {
name: 'i18n-hot-reload',
handleHotUpdate({ file, server }) {
if (file.includes('locales') && file.endsWith('.json')) {
console.log('Locale file updated')
server.ws.send({
type: "custom",
event: "locales-update",
});
}
},
}
}
Then adding it to the vite's plugins:
plugins: [
...,
i18nHotReload(),
]
And then adding the listener anywhere your code can reach (I'm using it in the i18n initial config file)
if (import.meta.hot) {
import.meta.hot.on('locales-update', () => {
i18n.reloadResources().then(() => {
i18n.changeLanguage(i18n.language)
})
})
}
i18n.reloadResources()alone doesn't trigger the translations hot reload