Best way to do live-reload (aka hot reload) with Vike

[Sebastian1005]

Hello,

I am a total beginner with Vike and also quite a beginner for NPM, Vite, React

I was wondering what was the "recommended" way to enable live-reload so that my site rebuilds when I am changing the source code.

On google, I found several NPM packages doing this but luckily I found a way to do it with having to rely on a new NPM package

It's based on Vite, I added this server section in my vite.config.ts

Is this the proper way to do it ? (it works on my side, but just wanted to be sure it will not have bad side-effects)

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import vike from "vike/plugin";

export default defineConfig({
  plugins: [vike({}), react({})],
  server: {
    watch: {
      usePolling: true,
    }
  },
});

[brillout]

Are you under Windows and using Docker with WSL (Windows Subsystem for Linux)?

[Sebastian1005]

Yes exactly

[brillout]

https://vite.dev/config/server-options#server-watch:~:text=Using%20Vite%20on%20Windows%20Subsystem%20for%20Linux%20(WSL)%202

[Sebastian1005]

Thanks alot !

I understand that the offical "vike-way" to do "live-reload" is to activate the "server.watch" option in Vite.config.ts.

Additionally, when using Vike in Docker (and Window Host using WSL) it requires to add the usePolling: true option.

[brillout]

(Docker docs are now improved.)