Stel HMR vir SvelteKit op met Gitpod

Hoe om Hot Module Reload met SvelteKit en Gitpod te gebruik

SvelteKit en Gitpod

As jy ten volle wil gebruik maak van SvelteKit en sy "Hot Module Reloading" in Gitpod, is 'n klein verandering aan jou konfigurasie nodig om dit te laat werk. Indien nie, sal jy heel waarskynlik ervaar dat 'n herlaai elke paar sekondes plaasvind in plaas van net wanneer jy veranderinge stoor.

Gebruik Vite se HMR in Gitpod

Die volgende kodebrokkie wys 'n eenvoudige konfigurasie, waar ons die deel wat relevant is vir Vite verander om te werk.

Ons vertel basies vir Vite hoe ons URL eintlik lyk en watter protokol om te gebruik, aangesien ons seker moet maak dat ons WebSocket en nie HTTPS in die konteks van Gitpod gebruik nie.

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;

Met hierdie klein verandering werk die ontwikkeling van jou volgende PWA met SvelteKit perfek in Gitpod!