Configurer HMR pour SvelteKit avec Gitpod

SvelteKit et Gitpod

Si vous souhaitez utiliser pleinement SvelteKit et son "Hot Module Reloading" dans Gitpod, une petite modification de votre configuration est nécessaire pour le faire fonctionner. Sinon, vous rencontrerez très probablement un rechargement toutes les quelques secondes au lieu de seulement lorsque vous enregistrez les modifications.

Utiliser le HMR de Vite dans Gitpod

L'extrait de code suivant montre une configuration simple, dans laquelle nous modifions la partie pertinente pour que Vite fonctionne.

Nous expliquons essentiellement à Vite à quoi ressemble réellement notre URL et quel protocole utiliser, car nous devons nous assurer d'utiliser WebSocket et non HTTPS dans le contexte de Gitpod.

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess(),
  kit: {
    adapter: adapter(),
    vite: {
      server: {
        // Configure Vite for HMR with Gitpod.
        hmr: process.env.GITPOD_WORKSPACE_URL
          ? {
              // Due to port fowarding, we have to replace
              // 'https' with the forwarded port, as this
              // is the URI created by Gitpod.
              host: process.env.GITPOD_WORKSPACE_URL.replace("https://", "3000-"),
              protocol: "wss",
              clientPort: 443
            }
          : true
      }
    }
  }
};

export default config;

Avec ce petit changement, développer votre prochaine PWA avec SvelteKit fonctionne parfaitement bien dans Gitpod !