Настройка HMR для SvelteKit с Gitpod

SvelteKit и Gitpod

Если вы хотите в полной мере использовать SvelteKit и его «горячую перезагрузку модуля» в Gitpod, для его работы требуется небольшое изменение в вашей конфигурации. Если нет, то, скорее всего, перезагрузка будет происходить каждые несколько секунд, а не только при сохранении изменений.

Использование HMR Vite в Gitpod

В следующем фрагменте кода показана простая конфигурация, в которой мы меняем часть, необходимую для работы Vite.

В основном мы сообщаем Vite, как на самом деле выглядит наш URL-адрес и какой протокол использовать, поскольку нам нужно убедиться, что мы используем WebSocket, а не HTTPS в контексте 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;

С этим небольшим изменением разработка вашего следующего PWA с помощью SvelteKit отлично работает в Gitpod!