הגדר את HMR עבור SvelteKit עם Gitpod

SvelteKit ו-Gitpod

אם אתה רוצה לעשות שימוש מלא ב-SvelteKit וב-"Hot Module Reload" שלו ב-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!