Gitpod ile SvelteKit için HMR Kurulumu

SvelteKit ve Gitpod ile Hot Module Reload nasıl kullanılır?

SvelteKit ve Gitpod

Gitpod'da SvelteKit ve "Hot Module Reloading" özelliğinden tam olarak yararlanmak istiyorsanız, çalışması için yapılandırmanızda küçük bir değişiklik yapmanız gerekir. Değilse, büyük olasılıkla yalnızca değişiklikleri kaydettiğinizde değil, birkaç saniyede bir yeniden yükleme gerçekleşir.

Gitpod'da Vite'ın HMR'sini Kullanma

Aşağıdaki kod parçacığı, Vite'ın çalışması için ilgili kısmı değiştirdiğimiz basit bir yapılandırmayı göstermektedir.

Gitpod bağlamında HTTPS'yi değil WebSocket'ı kullandığımızdan emin olmamız gerektiğinden, temel olarak Vite'a URL'mizin gerçekte nasıl göründüğünü ve hangi protokolün kullanılacağını söyleriz.

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;

Bu küçük değişiklikle, bir sonraki PWA'nızı SvelteKit ile geliştirmek Gitpod'da gayet iyi çalışıyor!