फ्लास्क क्या है?
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 आ रहा है....