Állítsa be a SvelteKit HMR-ét a Gitpoddal

SvelteKit és Gitpod

Ha teljes mértékben ki szeretné használni a SvelteKitet és annak „Hot Module Reloading”-ját a Gitpodban, egy kis változtatás szükséges a konfigurációban, hogy működjön. Ha nem, akkor valószínűleg néhány másodpercenként újratöltés történik, nem pedig csak a módosítások mentésekor.

Vite HMR-jének használata a Gitpodban

A következő kódrészlet egy egyszerű konfigurációt mutat be, ahol megváltoztatjuk a Vite működéséhez szükséges részt.

Alapvetően elmondjuk Vite-nak, hogyan néz ki az URL-ünk, és milyen protokollt kell használni, mivel a Gitpod kontextusában meg kell győződnünk arról, hogy a WebSocketet használjuk, és nem a HTTPS-t.

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;

Ezzel a kis változtatással a következő PWA fejlesztése a SvelteKittel tökéletesen működik Gitpodban!