Configurar HMR para SvelteKit con Gitpod

SvelteKit y Gitpod

Si desea hacer un uso completo de SvelteKit y su "Recarga de módulo en caliente" en Gitpod, se requiere un pequeño cambio en su configuración para que funcione. De lo contrario, lo más probable es que experimente una recarga cada pocos segundos en lugar de solo cuando guarde los cambios.

Usando el HMR de Vite en Gitpod

El siguiente fragmento de código muestra una configuración simple, donde cambiamos la parte que es relevante para que Vite funcione.

Básicamente, le decimos a Vite cómo se ve realmente nuestra URL y qué protocolo usar, ya que debemos asegurarnos de usar WebSocket y no HTTPS en el contexto 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;

Con este pequeño cambio, ¡desarrollar tu próxima PWA con SvelteKit funciona perfectamente bien en Gitpod!