Agordu HMR por SvelteKit kun Gitpod

Kiel uzi Hot Module Reload kun SvelteKit kaj Gitpod

SvelteKit kaj Gitpod

Se vi volas plene uzi SvelteKit kaj ĝian "Varma Modula Reŝargado" en Gitpod, necesas malgranda ŝanĝo al via agordo por ke ĝi funkciu. Se ne, vi plej verŝajne spertos reŝargon okazantan ĉiujn kelkajn sekundojn anstataŭ nur kiam vi konservas ŝanĝojn.

Uzante la HMR de Vite en Gitpod

La sekva koda fragmento montras simplan agordon, kie ni ŝanĝas la parton, kiu gravas por ke Vite funkciu.

Ni esence rakontas al Vite kiel nia URL fakte aspektas kaj kian protokolon uzi, ĉar ni devas certigi uzi WebSocket kaj ne HTTPS en la kunteksto 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;

Kun ĉi tiu malgranda ŝanĝo, disvolvi vian sekvan PWA kun SvelteKit funkcias perfekte bone en Gitpod!