Richten Sie HMR für SvelteKit mit Gitpod ein

SvelteKit und Gitpod

Wenn Sie SvelteKit und sein „Hot Module Reloading“ in Gitpod voll nutzen möchten, ist eine kleine Änderung an Ihrer Konfiguration erforderlich, damit es funktioniert. Wenn nicht, werden Sie höchstwahrscheinlich alle paar Sekunden ein Neuladen erleben, anstatt nur, wenn Sie Änderungen speichern.

Verwenden von Vites HMR in Gitpod

Das folgende Code-Snippet zeigt eine einfache Konfiguration, bei der wir den Teil ändern, der für Vite relevant ist, damit er funktioniert.

Wir teilen Vite im Grunde mit, wie unsere URL tatsächlich aussieht und welches Protokoll verwendet werden soll, da wir sicherstellen müssen, dass wir WebSocket und nicht HTTPS im Kontext von Gitpod verwenden.

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;

Mit dieser kleinen Änderung funktioniert die Entwicklung Ihrer nächsten PWA mit SvelteKit in Gitpod einwandfrei!