Live Dev - हर सेव अपने फ़ोन पर देखें

1Live Dev क्या है#

Live Dev आपके अपने फ़ोन के लिए एक डेव ऐप बनाता है। आपकी फ़ाइलें APK के अंदर रखने के बजाय, ऐप उन्हें आपके पीसी पर चल रहे डेव सर्वर से लोड करता है - इसलिए फ़ाइल सेव करते ही बदलाव फ़ोन पर दिख जाता है। न दोबारा बिल्ड, न दोबारा इंस्टॉल, न ZIP कॉपी करना।

यह असली AppMint शेल है, ब्राउज़र टैब नहीं: कैमरा, लोकेशन, नोटिफ़िकेशन, विज्ञापन, बैक बटन, साइड मेन्यू और हर AppMint ब्रिज बिल्कुल वैसे ही काम करते हैं जैसे आपके तैयार ऐप में करेंगे।

इसे आप एक बार बनाते हैं। उसके बाद आप AppMint पर तभी लौटते हैं जब कोई नेटिव चीज़ बदलनी हो - अनुमति, आइकन, स्प्लैश, विज्ञापन ID।

2डेव ऐप बनाएँ (एक बार)#

1. होम स्क्रीन पर 'Live Dev' दबाएँ (या Create APK → 'Live Dev' टाइल)।
2. अपने डेव सर्वर का पोर्ट चुनें। आम टूल्स के लिए एक टैप: Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321। 1024 से ऊपर का कोई भी पोर्ट चलता है।
3. वैकल्पिक: /admin/index.html जैसा स्टार्ट पेज, और आपके पीसी का पता। पता खाली छोड़ दें - ऐप आपका पीसी अपने आप ढूँढ लेता है।
4. इसे .dev पर ख़त्म होने वाला पैकेज नाम दें (जैसे com.myshop.dev), ताकि यह बाद में आपके असली ऐप के साथ रह सके।
5. Access चरण में वे अनुमतियाँ चुनें जिन्हें आप टेस्ट करना चाहते हैं (कैमरा, लोकेशन, नोटिफ़िकेशन…)। ये नेटिव हैं, इसलिए बिल्ड के समय तय हो जाती हैं।
6. APK बिल्ड करें और अपने फ़ोन पर इंस्टॉल करें।

Live Dev बिल्ड कभी Play बंडल (AAB) नहीं बनाता: यह सिर्फ़ आपके पीसी के साथ चलता है, इसलिए इसे कभी प्रकाशित नहीं करना चाहिए।

3अपना डेव सर्वर शुरू करें ताकि फ़ोन उस तक पहुँच सके#

डिफ़ॉल्ट रूप से ज़्यादातर डेव सर्वर सिर्फ़ पीसी को ही सुनते हैं। 'host' स्विच जोड़ें ताकि आपके Wi-Fi के दूसरे डिवाइस जुड़ सकें:

• Vite (React, Vue, Svelte, Astro): npm run dev -- --host
• Next.js: npx next dev -H 0.0.0.0
• Angular: ng serve --host 0.0.0.0
• Create React App / Vue CLI: ये पहले से नेटवर्क पर सुनते हैं

सिर्फ़ HTML फ़ाइलों का फ़ोल्डर है? इनमें से कोई भी उसे सर्वर बना देता है - इसे फ़ोल्डर के अंदर चलाएँ:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: 'Live Server' इंस्टॉल करें, फिर 'Go Live' दबाएँ

Windows एक बार पूछता है कि सर्वर को फ़ायरवॉल से गुज़रने दें या नहीं - 'Private networks' पर निशान लगाएँ और अनुमति दें। अगर आपने Cancel दबा दिया, तो जब तक आप Windows Security → Firewall → Allow an app में Node (या Python) को अनुमति नहीं देते, फ़ोन कनेक्ट नहीं हो पाएगा।

npm run dev -- --host

4Wi-Fi से कनेक्ट करें - न केबल, न कुछ इंस्टॉल करना#

1. फ़ोन को पीसी वाले ही Wi-Fi से जोड़ें।
2. अपना Live Dev ऐप खोलें।

बस इतना ही। ऐप आपके चुने पोर्ट पर आपका डेव सर्वर ढूँढता है, आपका पीसी पहचानता है और पेज लोड करता है। यह अगली बार के लिए पीसी को याद रखता है। अगर आपका सर्वर किसी दूसरे पोर्ट पर है, या कई पीसी जवाब दें, तो ऐप उन्हें दिखाता है और आप अपना वाला दबाते हैं।

कुछ नहीं मिला? कनेक्ट स्क्रीन हर दो सेकंड में कोशिश करती रहती है और आपका सर्वर पहुँच में आते ही पेज अपने आप खोल देती है - सर्वर शुरू करें और देखें। 'Find my PC' दूसरे आम पोर्ट भी जाँचता है। Vite 'Network:' के नीचे जो पता दिखाता है, उसे आप हमेशा 'Enter it yourself' में खुद डाल सकते हैं।

यह किसी वेबसाइट ऐप में http://192.168.1.5:5173 डालने से बेहतर क्यों है: पेज फ़ोन पर अब भी http://localhost:PORT की तरह चलता है (ऐप उसे आपके पीसी तक टनल करता है)। localhost एक सुरक्षित संदर्भ (SECURE CONTEXT) है, इसलिए कैमरा, माइक्रोफ़ोन, लोकेशन, क्लिपबोर्ड, service workers और passkeys चलते हैं। सादे 192.168… पते पर ब्राउज़र इंजन इन सबको रोक देता है।

5USB से कनेक्ट करें - बिना Wi-Fi के भी चलता है#

इसे तब इस्तेमाल करें जब पीसी और फ़ोन अलग नेटवर्क पर हों, गेस्ट Wi-Fi पर जो डिवाइसों को एक-दूसरे को देखने नहीं देता, या कोई नेटवर्क ही न हो।

1. फ़ोन पर: Settings → About phone → 'Build number' पर सात बार टैप करें, फिर Developer options → 'USB debugging' चालू करें।
2. फ़ोन को पीसी से जोड़ें और 'Allow USB debugging' वाले संदेश को स्वीकार करें।
3. पीसी पर नीचे दिया कमांड चलाएँ (अपना पोर्ट इस्तेमाल करें)। adb Android Studio के साथ आता है, या Google से 'SDK Platform-Tools' डाउनलोड करें - यह एक छोटी ZIP है।
4. अपना Live Dev ऐप खोलें। यह USB कनेक्शन पहचानता है और Wi-Fi से पहले उसे इस्तेमाल करता है।

केबल निकालने या फ़ोन रीस्टार्ट करने के बाद कमांड फिर चलाएँ। USB के साथ आपको चरण 3 वाले 'host' स्विच की ज़रूरत नहीं है।

अगर कनेक्ट स्क्रीन कहे 'USB link is up, but nothing answers on your PC's port' - तो केबल वाला हिस्सा ठीक है और आपका डेव सर्वर बस चल नहीं रहा है।

adb reverse tcp:5173 tcp:5173

SDK Platform-Tools (adb) डाउनलोड करें →

6DEV बटन#

ऐप के किनारे पर एक छोटा DEV बटन तैरता रहता है - उसे कहीं भी खींचें। जब आपका पेज कोई त्रुटि लॉग करता है तो वह नंबर के साथ लाल हो जाता है। इसे दबाने पर:

• रीलोड - हमेशा हर फ़ाइल की ताज़ा कॉपी लाता है, कभी कैश्ड नहीं।
• कंसोल - आपका पेज जो कुछ भी लॉग करता है, त्रुटियाँ और चेतावनियाँ रंगों में, फ़ाइल और लाइन के साथ (src/App.tsx:42)। 'Errors' फ़िल्टर करता है, 'Copy' पूरा लॉग क्लिपबोर्ड पर रख देता है - उसे चैट या बग रिपोर्ट में चिपकाएँ।
• JavaScript चलाएँ - कंसोल के नीचे एक लाइन। कोई भी एक्सप्रेशन लिखें और नतीजा सीधे फ़ोन पर देखें। Promises का इंतज़ार किया जाता है और उन्हें लॉग किया जाता है।
• सेव करने पर रीफ़्रेश - अगला चरण देखें।
• सर्वर बदलें - बिना दोबारा बिल्ड किए दूसरा पीसी या दूसरा पोर्ट।
• साइट डेटा साफ़ करें और रीलोड करें - साफ़ पहली बार चलाने के टेस्ट के लिए कुकीज़, localStorage और IndexedDB मिटा देता है।
• कनेक्शन जानकारी - पता, USB या Wi-Fi, और इस फ़ोन का IP।

पूरे DevTools (एलिमेंट्स, नेटवर्क, ब्रेकपॉइंट्स) के लिए केबल लगाएँ, पीसी पर Chrome में chrome://inspect खोलें और अपना ऐप चुनें।

7सेव पर रीफ़्रेश - सादे HTML के लिए भी#

Vite, Next, Angular और webpack आपके बदलाव अपने आप पेज में पहुँचा देते हैं (hot reload)। ऐप इसे पहचानता है और बीच में नहीं आता।

python, 'npx serve' या किसी भी स्टैटिक सर्वर से चलाए गए सादे फ़ोल्डर में हॉट रीलोड नहीं होता - आम तौर पर आपको हर बार सेव करके फिर खींचकर रिफ़्रेश करना पड़ता। Live Dev यह आपके लिए करता है: वह याद रखता है कि पेज ने कौन-सी फ़ाइलें लोड कीं, आपके सर्वर से हर सेकंड पूछता है कि उनमें से कोई बदली या नहीं, और बदलने पर रिफ़्रेश कर देता है। बदली हुई .css फ़ाइल बिना रीलोड किए अपनी जगह बदल दी जाती है, ताकि स्टाइल करते समय आपकी स्क्रॉल जगह और फ़ॉर्म में भरा हुआ डेटा बना रहे।

पीसी पर कुछ इंस्टॉल करने की ज़रूरत नहीं। अगर कभी खुद नियंत्रण चाहिए तो DEV बटन से इसे बंद करें। Live Dev ऐप खुला रहने तक स्क्रीन भी जागी रहती है।

8काम पूरा होने पर: असली ऐप बनाएँ#

Live Dev ऐप सिर्फ़ आपके पीसी के साथ चलता है - इसे कभी उपयोगकर्ताओं को न दें। जब प्रोजेक्ट तैयार हो:

• फ़्रेमवर्क प्रोजेक्ट (Vite, React, Vue…): 'npm run build' चलाएँ, dist फ़ोल्डर की ZIP बनाएँ (या पूरे सोर्स प्रोजेक्ट की ZIP), और उसे Create APK → Offline ZIP में बिल्ड करें।
• सादा HTML फ़ोल्डर: उसकी ZIP बनाएँ जिसमें index.html सबसे ऊपर हो → Offline ZIP। सिर्फ़ एक फ़ाइल है? HTML टाइल इस्तेमाल करें।
• पहले से असली https:// पते पर डिप्लॉय है: Create APK → Website।

उस बिल्ड के लिए अपना असली पैकेज नाम इस्तेमाल करें। डेव ऐप का पैकेज .dev पर ख़त्म होता है, इसलिए दोनों साथ-साथ इंस्टॉल रह सकते हैं।

9अगर कनेक्ट न हो#

• Wi-Fi: 'Waiting for your dev server' हमेशा दिखता रहे → सर्वर सिर्फ़ पीसी को ही सुन रहा है। उसे चरण 3 के host स्विच के साथ दोबारा शुरू करें (सही होने पर Vite 'Network:' लाइन दिखाता है)।

• Wi-Fi: फिर भी कुछ नहीं → Windows फ़ायरवॉल उसे रोक रहा है (चरण 3), या राउटर डिवाइसों को अलग रखता है (गेस्ट, ऑफ़िस और होटल के Wi-Fi में आम है)। USB इस्तेमाल करें, या फ़ोन का हॉटस्पॉट चालू करके पीसी को उससे जोड़ें।

• USB: 'adb' is not recognised → Platform-Tools इंस्टॉल करें और कमांड उसी फ़ोल्डर से चलाएँ। 'no devices' → फ़ोन पर USB debugging का संदेश स्वीकार करें, या दूसरी केबल आज़माएँ (कई केबल सिर्फ़ चार्जिंग वाली होती हैं)।

• 'Port … is busy on this phone' → फ़ोन का कोई दूसरा ऐप उस पोर्ट का इस्तेमाल कर रहा है। अपना डेव सर्वर किसी दूसरे पोर्ट पर चलाएँ और उसे 'Enter it yourself' में डालें।

• Vite में 'Blocked request. This host is not allowed' दिखे → आपने पीसी का पता किसी सामान्य ब्राउज़र या वेबसाइट ऐप में खोला है। Live Dev ऐप में ऐसा कभी नहीं होता, क्योंकि वह हमेशा localhost माँगता है।

• पेज लोड होता है पर आपके API कॉल फ़ेल होते हैं → आपके बैकएंड की CORS सूची में http://localhost:PORT की अनुमति होनी चाहिए (ज़्यादातर डेव सेटअप में पहले से होती है), और http://localhost:4000 जैसे API URL का मतलब फ़ोन होता है। उस पोर्ट को भी फ़ॉरवर्ड करें (adb reverse tcp:4000 tcp:4000) या API के लिए पीसी का पता इस्तेमाल करें।

• उसी पोर्ट पर प्रोजेक्ट बदलने के बाद खाली पेज → DEV → साइट डेटा साफ़ करें और रीलोड करें (कोई पुराना service worker जवाब दे रहा है)।