Configura HMR per SvelteKit con Gitpod

SvelteKit e Gitpod

Se vuoi sfruttare appieno SvelteKit e il suo "Hot Module Reloading" in Gitpod, è necessaria una piccola modifica alla tua configurazione per farlo funzionare. In caso contrario, molto probabilmente sperimenterai un ricaricamento che si verifica ogni pochi secondi invece che solo quando salvi le modifiche.

Utilizzo dell'HMR di Vite in Gitpod

Il seguente frammento di codice mostra una configurazione semplice, in cui cambiamo la parte rilevante per il funzionamento di Vite.

Fondamentalmente diciamo a Vite come appare effettivamente il nostro URL e quale protocollo utilizzare, poiché dobbiamo assicurarci di utilizzare WebSocket e non HTTPS nel contesto di 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;

Con questa piccola modifica, lo sviluppo della tua prossima PWA con SvelteKit funziona perfettamente in Gitpod!