Gitpod के साथ SvelteKit के लिए HMR सेटअप करें

SvelteKit और Gitpod के साथ हॉट मॉड्यूल रीलोड का उपयोग कैसे करें

SvelteKit और Gitpod

यदि आप Gitpod में SvelteKit और इसके "हॉट मॉड्यूल रीलोडिंग" का पूरा उपयोग करना चाहते हैं, तो इसे काम करने के लिए आपके कॉन्फ़िगरेशन में एक छोटा सा बदलाव आवश्यक है। यदि नहीं, तो संभव है कि आप केवल परिवर्तनों को सहेजने के बजाय हर कुछ सेकंड में एक पुनः लोड होने का अनुभव करेंगे।

Gitpod . में Vite के HMR का उपयोग करना

निम्नलिखित कोड स्निपेट एक साधारण कॉन्फ़िगरेशन दिखाता है, जहां हम उस हिस्से को बदलते हैं जो Vite के काम करने के लिए प्रासंगिक है।

हम मूल रूप से Vite को बताते हैं कि हमारा URL वास्तव में कैसा दिखता है और किस प्रोटोकॉल का उपयोग करना है, क्योंकि हमें Gitpod के संदर्भ में WebSocket का उपयोग करना सुनिश्चित करने की आवश्यकता है, HTTPS की नहीं।

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 में पूरी तरह से ठीक काम करता है!

सुझाव

संबंधित

परिशिष्ट

भाषाएँ