Gitpodを使用してSvelteKitのHMRを設定する

SvelteKitとGitpod

SvelteKitとGitpodの「ホットモジュールリロード」を最大限に活用したい場合は、構成を少し変更して機能させる必要があります。そうでない場合は、変更を保存するときだけでなく、数秒ごとにリロードが発生する可能性があります。

GitpodでViteのHMRを使用する

次のコードスニペットは、Viteに関連する部分を機能するように変更する簡単な構成を示しています。

GitpodのコンテキストではHTTPSではなくWebSocketを使用する必要があるため、基本的にViteにURLが実際にどのように表示され、どのプロトコルを使用するかを指示します。

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;

この小さな変更により、SvelteKitを使用した次のPWAの開発は、Gitpodで完全に機能します。