Vite + टनल: HMR जो सचमुच काम करता है

Vite dev server को टनल करना ठीक काम करता है — सिवाय दो चीज़ों के जो पहली बार आपको उलझा देंगी। पेज लोड होता है पर HMR नहीं। या पेज बिल्कुल लोड नहीं होता क्योंकि Vite आपके टनल hostname को अस्वीकार कर देता है। जब आप जानते हैं कि कहाँ देखना है, दोनों config की एक-लाइन के समाधान हैं।

समस्या 1: "Blocked request. This host is not allowed."

Vite 5+ ने डिफ़ॉल्ट रूप से host-check सुरक्षा जोड़ी। यदि आप अपनी टनल URL खोलते हैं और Blocked request. This host is not allowed देखते हैं, तो वह यही जाँच आपके *.portpreview.dev hostname को अस्वीकार कर रही है।

vite.config.ts में ठीक करें:

export default defineConfig({
  server: {
    host: true,                            // listen on 0.0.0.0
    allowedHosts: ['.portpreview.dev'],   // accept any subdomain
  },
});

शुरुआती बिंदु इसे suffix मिलान बनाता है। यदि आप कड़े रहना चाहें तो वहाँ अपना विशिष्ट टनल hostname डाल सकते हैं, पर रोज़ के विकास के लिए suffix सुविधाजनक है — टनल सेशन URL बदलते रहते हैं।

समस्या 2: HMR लोड होता है, फिर चुपचाप मर जाता है

HMR WebSocket पर चलता है। जब Vite localhost:5173 पर सर्व करता है पर आपका ब्राउज़र https://abc123.portpreview.dev से लोड करता है, तो HMR क्लाइंट उस URL से जुड़ने की कोशिश करता है जो सर्वर ने बताया — यानी लोकल वाला। टनल उसे फ़ॉरवर्ड नहीं करता, इसलिए WebSocket विफल होता है और HMR चुपचाप रुक जाता है।

HMR config ठीक करें:

export default defineConfig({
  server: {
    host: true,
    allowedHosts: ['.portpreview.dev'],
    hmr: {
      clientPort: 443,            // browser connects on 443 (HTTPS)
      protocol: 'wss',            // secure WebSocket through the tunnel
    },
  },
});

अब HMR क्लाइंट wss://abc123.portpreview.dev (पोर्ट 443) से जुड़ता है, टनल upgrade फ़ॉरवर्ड करता है, और संपादन अपेक्षानुसार फैलते हैं। यदि आपको सिर्फ़ static reload चाहिए और टनल पर HMR की परवाह नहीं, तो इसे छोड़ सकते हैं — पर आप cmd-R खूब दबाएँगे।

आख़िर Vite को टनल क्यों करें

तीन असली कारण:

• मोबाइल टेस्टिंग। फ़ोन पर URL खोलें, HMR सहित वही build देखें। स्क्रीन शेयरिंग या प्रति-डिवाइस एमुलेटर से बेहतर। पूरा पैटर्न टनल से मोबाइल टेस्टिंग में देखें।
• चल रहे काम को साझा करना। किसी डिज़ाइनर या PM को लिंक भेजें, वे आपकी branch लाइव देखेंगे। कोई deploy चरण नहीं।
• HTTPS चाहने वाले OAuth और वेबहुक फ़्लो। Vite-सर्व्ड फ़्रंटएंड जो Stripe (केवल redirect), Auth0 आदि से बात करते हैं। चुनाव mkcert बनाम टनल में कवर है।

SvelteKit, Astro, SolidStart सभी Vite इस्तेमाल करते हैं

ऊपर के config किसी भी ऐसे फ़्रेमवर्क पर लागू होते हैं जो Vite को dev server के रूप में देता है। SvelteKit का vite.config.js उसी आकार का है। Astro के पास vite sub-object वाला अपना astro.config.mjs है — वही server विकल्प वहाँ रखें। SolidStart, Nuxt 3 (Vite के ज़रिए) और Qwik City: वही पैटर्न।

प्रोडक्शन build अलग कहानी है

ऊपर सब dev server config है। जब आप vite preview चलाते हैं या एक build किया हुआ bundle सर्व करते हैं, इनमें से कुछ मायने नहीं रखता क्योंकि न HMR है न host-check मिडलवेयर। उस समय टनल बस static फ़ाइलें फ़ॉरवर्ड कर रहा होता है।

कुछ छोटी बातें

• सख़्त host CORS। यदि आपका फ़्रंटएंड किसी दूसरे origin (अलग localhost पोर्ट, या अलग API टनल) पर API को हिट करता है, तो API साइड पर CORS सेट करें। Vite डिफ़ॉल्ट रूप से proxy नहीं करता जब तक आप server.proxy से न कहें।
• WebSocket-भारी ऐप। Vite HMR एक WebSocket है। यदि आपका ऐप गेम स्टेट, चैट या लाइव डेटा के लिए दूसरा WebSocket इस्तेमाल करता है, वह अलग है और उसे भी आपके क्लाइंट कोड में टनल URL इस्तेमाल करने हेतु कॉन्फ़िगर करना होगा।
• env फ़ाइलों में टनल URL। जब फ़्रंटएंड को अपना सार्वजनिक पता जानना हो, तो हम सक्रिय टनल URL को .env.local में VITE_PUBLIC_URL के रूप में डालते हैं। import.meta.env.VITE_PUBLIC_URL इसे क्लाइंट में पढ़ता है।

चरण-दर-चरण

1. अपने Vite config में server.host, allowedHosts और hmr ब्लॉक जोड़ें।
2. dev server पुनः आरंभ करें।
3. npx portpreview 5173 चलाएँ (या जो भी पोर्ट Vite इस्तेमाल करता है)।
4. ब्राउज़र में या फ़ोन पर HTTPS URL खोलें।
5. एक component संपादित करें। पुष्टि करें कि HMR बिना पूर्ण reload के पेज अपडेट करता है।

यदि HMR अपडेट नहीं करता, तो ब्राउज़र console खोलें — Vite WebSocket कनेक्शन प्रयास को log करता है और आप वह URL देखेंगे जो उसने आज़माई। इससे पता चलता है कि hmr.clientPort/protocol बदलाव असर कर पाया या नहीं।

ऐसे टनल के लिए जो WebSocket upgrade डिफ़ॉल्ट रूप से सुरक्षित रखते हैं, PortPreview की वेटलिस्ट में शामिल हों।