फ्लास्क क्या है?
FLASK Python के लिए एक हल्का वेब फ्रेमवर्क है जो आपको जल्दी और न्यूनतम बॉयलरप्लेट कोड के साथ एक वेब ऐप बनाने की अनुमति देता है। चलिए कदम बढ़ाते हैं-.
आइए चरण-दर-चरण शुरू करें
आइए आवश्यक सेटअप बनाकर शुरुआत करें। Vite पर जाएं और इस कमांड को कॉपी करें:
npm create vite@latest
मैं केवल मैक का उपयोग करता हूं, इसलिए विन्डोज़ के लिए सेटअप थोड़ा अलग हो सकता है। इसके बाद, टर्मिनल खोलें और Vite वेबसाइट से कॉपी किए गए कोड को पेस्ट करें। एक बार जब आप कोड चलाएंगे तो आपको निम्नलिखित के लिए संकेत दिया जाएगा:
? Project name: › vite-project
विटे-प्रोजेक्ट को अपने प्रोजेक्ट नाम से बदलें। इसे एक नाम देने के बाद, आपको फ्रेमवर्क का चयन करने के लिए कहा जाता है, मेरे मामले में मैं अपने फ्रेमवर्क के रूप में REACT का चयन करूंगा, लेकिन आप अपने परिचित फ्रेमवर्क का चयन कर सकते हैं और एंटर दबा सकते हैं:
? Select a framework: › - Use arrow-keys. Return to submit. Vanilla Vue ❯ React Preact Lit Svelte Solid Qwik Others
एक बार जब आप अपना ढांचा चुन लेते हैं, तो अब आप अपनी पसंद का संस्करण (भाषा) चुन सकते हैं। मैं जावास्क्रिप्ट से परिचित हूं इसलिए मैं उसे चुनूंगा। याद रखें: आपको वह वैरिएंट चुनना होगा जिस पर आप अधिक हावी हैं और एंटर टैब दबाएं।
? Select a variant: › - Use arrow-keys. Return to submit. TypeScript TypeScript SWC ❯ JavaScript JavaScript SWC Remix ↗
इन संकेतों को चुनने के बाद, इन्हें चलाने के लिए आपको ये निम्नलिखित आदेश दिए गए हैं:
Scaffolding project in /Users/Marlon/Development/code/practice-phase-4/flask_app_dev/my-app... Done. Now run: cd my-app npm install npm run dev
यदि आपने उपरोक्त कोड को सफलतापूर्वक चलाया, तो आप अपने स्थानीय होस्ट पर पहुंच जाएंगे:
VITE v5.4.8 ready in 1455 ms ➜ Local: http://127.0.0.1:5555/ ➜ Network: use --host to expose ➜ press h enter to show help
आप http पते को कॉपी करके अपने ब्राउज़र में पेस्ट कर सकते हैं और आपको वाइट रिएक्ट पेज दिखाई देगा, जिसे अब आप अपने प्रोजेक्ट के लिए उपयोग कर सकते हैं।
अब अपना कोड संपादक खोलें, मैं अपने कोड संपादक के रूप में विजुअल स्टूडियो कोड का उपयोग कर रहा हूं। एक बार फिर, आप अपने पसंदीदा संपादक का उपयोग कर सकते हैं। इसके बाद, VSCode के एकीकृत टर्मिनल के अंदर, आपको अपना स्थानीय होस्ट पता प्राप्त करने, संपादित करने और अपना ऐप बनाना शुरू करने के लिए इन कमांड को अलग से चलाने की आवश्यकता है।
npm install npm run dev
आइए src के अंदर सीडी डालें और आपको निम्नलिखित फ़ाइलें दिखाई देंगी
src % tree . ├── App.css ├── App.jsx ├── assets │ └── react.svg ├── index.css └── main.jsx
'App.jsx' के अंदर आप उस फ़ाइल के अंदर के कोड को संपादित और/या मिटा सकते हैं और तदनुसार अपना कोड जोड़ सकते हैं। इस फ़ाइल में Vite और React लोगो शामिल है।
एक बार जब आप अपनी बनाई गई फ़ाइलों से परिचित हो जाते हैं, तो अब हम फ्रंटएंड और बैकएंड निर्देशिका सेट कर सकते हैं। आइए फिर इस कोड को चलाकर बनाएं:
mkdir backend; mkdir server; mkdir frontend
आइए अपना प्रोजेक्ट सेटअप कमोबेश इस तरह बनाएं:
my-app/ ├── backend/ | server/ │ ├── app.py │ ├── models.py │ ├── requirements.txt ├── frontend/ │ ├── src/ │ ├── public/ │ ├── package.json
दो टर्मिनल खोलें:
एक टर्मिनल बैकएंड/सर्वर के लिए होगा और दूसरा फ्रंटएंड/src के लिए होगा।
बैकएंड/सर्वर के अंदर निम्नलिखित कमांड चलाएँ:
pipenv install && pipenv shell
यह सुनिश्चित करने के लिए कि सभी निर्भरताएं स्थापित हैं और हमारी पिपफाइल बनाएं।
फ्रंटएंड/src के अंदर निम्नलिखित कमांड चलाएँ:
npm install npm run dev
यह सुनिश्चित करने के लिए कि हमारी package.json फ़ाइलें जैसी सभी आवश्यक फ़ाइलें बनाई गई हैं।
भाग 2 आ रहा है....
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3