अपने ऐप्लिकेशन की झलक देखना

Project IDX की मदद से, अपने कोड एडिटर के साथ अपने ऐप्लिकेशन का लाइव व्यू रेंडर करके, अपने काम की झलक देखी जा सकती है. IDX वेब झलक, ऐप्लिकेशन के वेब सर्वर और क्लाउड-आधारित Android एम्युलेटर के इनलाइन फ़्रेम (iFrame) को रेंडर करती हैं.

प्रीव्यू एनवायरमेंट को चालू और कॉन्फ़िगर करें

अपने फ़ाइल फ़ोल्डर में अपने ऐप्लिकेशन की झलक देखने के लिए, आपको अपने झलक के माहौल को कॉन्फ़िगर करना होगा.

1. अपनी .idx/dev.nix कॉन्फ़िगरेशन फ़ाइल में झलक देखने की सुविधा चालू करें. नया फ़ाइल फ़ोल्डर बनाने पर, IDX अपने-आप यह फ़ाइल जनरेट करता है. साथ ही, इसमें आपके चुने गए टेंप्लेट के आधार पर, लागू होने वाले प्रीव्यू एनवायरमेंट शामिल होते हैं. अगर फ़ाइल आपके IDX कोड रिपॉज़िटरी में नहीं है, तो उसे बनाएं. idx.previews एट्रिब्यूट को true पर सेट करें और कॉन्फ़िगरेशन एट्रिब्यूट जोड़ें, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

   { pkgs, ... }: {
   
   # NOTE: This is an excerpt of a complete Nix configuration example.
   # For more information about the dev.nix file in IDX, see
   # https://developers.google.com/idx/guides/customize-idx-env
   
   # Enable previews and customize configuration
   idx.previews = {
     enable = true;
     previews = {
       # The following object sets web previews
       web = {
         command = [
           "npm"
           "run"
           "start"
           "--"
           "--port"
           "$PORT"
           "--host"
           "0.0.0.0"
           "--disable-host-check"
         ];
         manager = "web";
       };
       # The following object sets Android previews
       # Note that this is supported only on FLutter workspaces
   
       android = {
         manager = "flutter";
       };
     };
   };
   
   

   IDX में Nix एट्रिब्यूट की पूरी सूची के लिए, Nix + IDX देखें.

2. अपना एनवायरमेंट फिर से बनाएं:

   • कमांड पैलेट से प्रोजेक्ट आईडीX: हार्ड रीस्टार्ट कमांड चलाएं (Cmd+Shift+P/Ctrl+Shift+P).
   • एनवायरमेंट कॉन्फ़िगरेशन अपडेट किया गया सूचना में जाकर, एनवायरमेंट फिर से बनाएं पर क्लिक करें.

   जब अपनी dev.nix फ़ाइल में बदलाव करने के बाद एनवायरमेंट को फिर से बनाया जाता है, तो आपके फ़ाइल फ़ोल्डर में झलक पैनल दिखता है. इसमें Android और वेब टैब दिखते हैं. यह इस पर निर्भर करता है कि आपने क्या चालू किया है. हालांकि, एनवायरमेंट को फिर से बनाने के लिए, आपको कुछ देर इंतज़ार करना पड़ सकता है. फ़ाइल फ़ोल्डर को बंद करके, IDX डैशबोर्ड पर जाकर फिर से खोलें.

अहम जानकारी: झलक विंडो टूलबार में नई विंडो में खोलें आइकॉन पर क्लिक करके, एक अलग ब्राउज़र टैब में अपने ऐप्लिकेशन की झलक देखी जा सकती है. इस पॉप-आउट लिंक से, वर्कस्पेस शेयर करने की सुविधा की मदद से, अपने किसी दोस्त या सहकर्मी को, अपने मौजूदा काम का डेमो दिखाने में भी मदद मिलती है.

ऐप्लिकेशन की झलक का इस्तेमाल करना

IDX की मदद से, Chrome और Android एम्युलेटर (फ़्लटर वर्कस्पेस पर) पर ऐसी वेब झलक देखी जा सकती हैं जो आपके ऐप्लिकेशन को झलक वाले एनवायरमेंट में इंस्टॉल करती हैं. इससे, सीधे तौर पर आपके वर्कस्पेस में, आखिर से लेकर अंत तक, ऐप्लिकेशन की पूरी तरह से जांच की जा सकती है.

वेब और Android के लिए, झलक रीफ़्रेश करें

IDX, बुनियादी फ़्रेमवर्क (जैसे कि npm run start और flutter hot-reload) की हॉट रीलोड सुविधाओं को जोड़ता है, ताकि आपको अंदर के डेवलपमेंट लूप का बेहतर अनुभव मिल सके. इस सेक्शन में फिर से लोड करने के अलग-अलग तरीकों के बारे में बताया गया है. अगर IDX का डिफ़ॉल्ट तरीका आपके इस्तेमाल के उदाहरण के लिए ठीक से काम नहीं करता, तो समस्या हल करें.

• अपने-आप हॉट रीलोड: जब कोई फ़ाइल सेव की जाती है, तो हॉट फिर से लोड अपने-आप हो जाते हैं. इसे हॉट मॉड्यूल रिप्लेसमेंट (या HMR) भी कहा जाता है. एक हॉट रीलोड, पेज को रीलोड किए बिना (वेब ऐप्लिकेशन के लिए) या ऐप्लिकेशन को रीस्टार्ट या फिर से इंस्टॉल किए बिना (एमुलेटर के लिए), ऐप्लिकेशन को अपडेट कर देता है. यह तरीका आपके ऐप्लिकेशन की लाइव स्थिति को बनाए रखने के लिए बेहतरीन है. हालांकि, हो सकता है कि कभी-कभी यह सही से काम न करे.

• मैन्युअल तरीके से पूरा फिर से लोड करना: यह विकल्प, पेज रीफ़्रेश करने (वेब ऐप्लिकेशन के लिए) या ऐप्लिकेशन को एम्युलेटर के लिए, रीस्टार्ट करने की तरह है. हमारा सुझाव है कि आप अपने सोर्स कोड में बड़े बदलावों को कैप्चर करने के लिए, पेज को पूरी तरह से फिर से लोड करें. जैसे, कोड के बड़े हिस्सों को रीफ़ैक्टर करते समय.

• मैन्युअल हार्ड रीस्टार्ट: यह विकल्प IDX के प्रीव्यू सिस्टम को पूरी तरह से रीस्टार्ट करता है. इसमें ऐप्लिकेशन के वेब सर्वर को रोकना और रीस्टार्ट करना शामिल है.

फिर से लोड करने के सभी विकल्प या तो झलक टूलबार या कमांड पैलेट (Mac पर Cmd+Shift+P या ChromeOS, Windows या Linux पर Ctrl+Shift+P) का इस्तेमाल करके उपलब्ध होते हैं. यह विकल्प IDX कैटगरी में मौजूद होता है.

झलक टूलबार का इस्तेमाल करने के लिए, यह तरीका अपनाएं:

1. पेज को रीफ़्रेश करने के लिए, फिर से लोड करें आइकॉन पर क्लिक करें. इसका मतलब है कि पेज को पूरी तरह से फिर से लोड करना होगा. अलग तरह के रीफ़्रेश के लिए, मेन्यू को बड़ा करने के लिए 'फिर से लोड करें' आइकॉन के आगे मौजूद ऐरो पर क्लिक करें.

2. मेन्यू से रीफ़्रेश करने का मनपसंद विकल्प चुनें: हॉट रीलोड, फ़ुल रीलोड या हार्ड रीस्टार्ट.

   

अपने-आप सेव होने और हॉट रीलोड को कॉन्फ़िगर करें

डिफ़ॉल्ट रूप से, टाइप करना बंद करने के एक सेकंड बाद IDX अपने-आप आपका काम सेव कर लेता है. इससे, अपने-आप हॉट फिर से लोड होने लगता है. अगर आपको IDX की मदद से, अपने काम को अलग-अलग इंटरवल में सेव करना है, तो अपने-आप सेव होने की सेटिंग बदलें. आपके पास, अपने-आप सेव होने की सुविधा को बंद करने का भी विकल्प है.

अपने-आप सेव होने की सुविधा कॉन्फ़िगर करें

1. Project IDX खोलें.
2. सेटिंग आइकॉन पर क्लिक करें. सेटिंग विंडो दिखाई देती है.
3. Files: AutoSave खोजें और पुष्टि करें कि फ़ील्ड को `afterDelay` पर सेट किया गया है.
4. फ़ाइलें: अपने-आप सेव होने में देरी खोजें. आपको ऑटो सेव 'देरी से अपने-आप अपडेट होने की सुविधा' फ़ील्ड दिखेगा.
5. अपने-आप सेव होने में देरी वाला नया इंटरवल डालें. यह मिलीसेकंड में बताया जाता है. वीडियो अपने-आप सेव होने में देरी की नई सेटिंग के आधार पर, आपके काम में किए गए बदलाव अब अपने-आप सेव हो जाते हैं.

अपने-आप सेव होने की सुविधा बंद करें

1. Project IDX खोलें.
2. सेटिंग आइकॉन पर क्लिक करें. सेटिंग विंडो दिखाई देती है.
3. Files: अपने-आप सेव होने की सुविधा खोजें.
4. ड्रॉप-डाउन पर क्लिक करके बंद करें चुनें. अपने-आप सेव होने की सुविधा अब बंद हो गई है.