मुख्य सामग्री पर जाएं

​
पूर्वावलोकन

जब आप कोई ऐप ड्राफ्ट खोलते हैं, तो Kazzle एक डेव सर्वर शुरू कर सकता है और लाइव पूर्वावलोकन दिखा सकता है।

​
यह कैसे काम करता है

  1. साइडबार से ड्राफ्ट टैब खोलें
  2. पूर्वावलोकन स्वचालित रूप से शुरू होता है (या “पूर्वावलोकन शुरू करें” पर क्लिक करें)
  3. Kazzle आपके kazzle.config.ts से lifecycle.dev पढ़ता है
  4. डेव कमांड असाइन किए गए पोर्ट पर चलता है
  5. पूर्वावलोकन URL ड्राफ्ट टैब में दिखाई देता है

​
डेव कमांड कॉन्फ़िगर करना

अपने UI कंपोनेंट पर lifecycle.dev सेट करें: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
यदि lifecycle.dev सेट नहीं है, तो पूर्वावलोकन सिस्टम सामान्य डेव सर्वर डिटेक्शन (Vite, Next.js, आदि) पर वापस आता है।

​
पूर्वावलोकन URL

प्रत्येक ऐप को अपने सैंडबॉक्स पर एक समर्पित पोर्ट मिलता है। पूर्वावलोकन URL इस पैटर्न का अनुसरण करता है: 
http://localhost:{PORT}
PORT पर्यावरण चर स्वचालित रूप से पूर्वावलोकन सिस्टम द्वारा सेट किया जाता है।

​
हॉट रीलोड

आपके कोड में परिवर्तन आपके डेव सर्वर के हॉट रीलोड (HMR) द्वारा उठाए जाते हैं। जैसे ही आप या AI फ़ाइलों को संपादित करते हैं, पूर्वावलोकन रीयल टाइम में अपडेट होता है।

​
मैनुअल नियंत्रण

  • पूर्वावलोकन शुरू करें — डेव सर्वर शुरू करता है यदि यह चल नहीं रहा है
  • पूर्वावलोकन बंद करें — डेव सर्वर प्रक्रिया को समाप्त करता है
  • पुनः शुरू करें — बंद करें + शुरू करें (कॉन्फ़िग परिवर्तन के बाद उपयोगी)

​
सत्यापन

एक पूर्वावलोकन तभी सत्यापित होता है जब ऐप-डेव टैब खुलता है और अपेक्षित UI दिखाता है। टाइमआउट, विफल टैब खुलना, रुकी हुई प्रक्रिया, या लापता पूर्वावलोकन URL का मतलब है कि पूर्वावलोकन अभी तक सत्यापित नहीं है। जब AI कोई ऐप बनाता है, तो इसे ड्राफ्ट शुरू करने या बदलने के बाद ऐप-डेव टैब खोलना चाहिए। इसे केवल कमांड आउटपुट से ऐप चल रहा है यह दावा नहीं करना चाहिए।