Ρύθμιση HMR για SvelteKit με Gitpod

SvelteKit και Gitpod

Εάν θέλετε να χρησιμοποιήσετε πλήρως το SvelteKit και την «Επαναφόρτωση Hot Module» του στο 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!