ServBay में Angular प्रोजेक्ट बनाना और चलाना

परिचय

यह दस्तावेज़ आपको ServBay लोकल वेब डेवेलपमेंट एनवायरनमेंट में एक Angular प्रोजेक्ट बनाने, कॉन्फ़िगर करने और चलाने की प्रक्रिया की गाइड देता है। हम ServBay द्वारा प्रदान किए गए शक्तिशाली Node.js एनवायरनमेंट और लचीली वेबसाइट (पूर्व में "होस्ट") मैनेजमेंट फीचर्स के माध्यम से डेवलप और प्रोडक्शन एनवायरनमेंट को आसानी से सेट करेंगे, साथ ही कस्टम डोमेन और SSL सर्टिफिकेट्स के जरिए सुरक्षित एक्सेस सुनिश्चित करेंगे। ServBay में कई डेवेलपमेंट आवश्यक पैकेजेज (पूर्व में "सेवाएं") इनबिल्ट हैं, जैसे Node.js, PHP, Python, Go, Java, डेटाबेस आदि, जिससे यह फुल-स्टैक लोकल डेवेलपमेंट के लिए आदर्श साधन है।

Angular क्या है?

Angular गूगल द्वारा मेंटेन किया गया एक ओपन सोर्स फ्रंटएंड फ्रेमवर्क है, जिसका प्रयोग उच्च प्रदर्शन और डायनामिक सिंगल पेज एप्लिकेशन (SPA) बनाने के लिए किया जाता है। यह TypeScript पर आधारित है और एक व्यापक टूलसेट के साथ स्ट्रक्चर्ड डेवेलपमेंट का तरीका प्रदान करता है, जिससे बड़े और जटिल एंटरप्राइज़ ऐप्लिकेशन्स तैयार करना आसान होता है।

Angular की मुख्य खूबियां एवं फायदे

• कंपोनेंट-बेस्ड आर्किटेक्चर: पुनःप्रयोग योग्य कंपोनेंट्स के माध्यम से यूज़र इंटरफेस बनाएं, जिससे कोड का रखरखाव और विस्तार आसान हो।
• TypeScript सपोर्ट: स्थैतिक टाइप जांच और पूर्ण ऑब्जेक्ट-ओरियंटेड फीचर्स के साथ कोड क्वालिटी और डेवेलपमेंट एफिशिएंसी बढ़ाएं।
• डिपेंडेंसी इन्जेक्शन: अपने कंपोनेंट्स का परीक्षण और डिपेंडेन्सियों का प्रबंधन सरल बनाएं।
• मजबूत CLI (कमांड लाइन इंटरफेस): प्रोजेक्ट क्रिएशन, कंपोनेंट/सर्विस/मॉड्यूल जेनरेशन, बिल्ड, टेस्टिंग आदि कार्यों को आसान और तेज़ बनाएं।
• इनबिल्ट सॉल्यूशन्स: राउटिंग, फॉर्म हैंडलिंग, HTTP क्लाइंट आदि के लिए रेडीमेड मॉड्यूल उपलब्ध।
• परफॉर्मेंस ऑप्टिमाइज़ेशन: AOT (Ahead-of-Time) कंपाइलिंग, ट्री-शेकिंग जैसी तकनीकों से एप्लिकेशन के प्रदर्शन को बेहतर बनाएं।

Angular और ServBay के स्थिर डेवेलपमेंट एनवायरनमेंट का मिलता-जुलता फायदा यह है कि डेवलपर्स अपनी व्यावसायिक लॉजिक पर अधिक ध्यान केंद्रित कर सकते हैं।

पूर्व शर्तें

शुरू करने से पहले सुनिश्चित करें कि आपने निम्नलिखित तैयारियां पूरी कर ली हैं:

1. ServBay इंस्टॉल करें: आपने macOS पर सफलतापूर्वक ServBay को इंस्टॉल और स्टार्ट कर लिया है।
2. Node.js पैकेज इनेबल करें: ServBay कंट्रोल पैनल में वांछित Node.js वर्शन पैकेज इंस्टॉल और एक्टिवेट किया है। ServBay में आप कई Node.js वर्शन एक क्लिक में इंस्टॉल और स्विच कर सकते हैं।

ServBay के जरिए Angular प्रोजेक्ट सेटअप और रन करें

हम ServBay के Node.js एनवायरनमेंट में Angular प्रोजेक्ट को बनाएंगे और चलाएंगे। डेवेलपमेंट मोड में, हम ServBay की वेबसाइट फीचर से रिवर्स प्रॉक्सी कंफ़िगर करेंगे जो Angular डेवलपमेंट सर्वर की ओर इंगित करेगा; प्रोडक्शन मोड में, प्रोजेक्ट को बिल्ड कर स्टैटिक फाइल सर्विस ServBay से सेटअप करेंगे।

1. Angular प्रोजेक्ट बनाएं

सबसे पहले, Angular CLI की मदद से नया प्रोजेक्ट बनाएंगे।

1. Angular CLI इंस्टॉल करें: अपना टर्मिनल खोलें और ServBay के Node.js एनवायरनमेंट का उपयोग करते हुए Angular CLI ग्लोबली इंस्टॉल करें। अगर ServBay का Node.js एनवायरनमेंट अपने-आप PATH में नहीं जुड़ा है, तो पहले आपको ServBay के Node.js वातावरण में स्विच करना पड़ सकता है। सामान्यतः ServBay PATH मैनेज कर देता है।

   npm install -g @angular/cli

   यह ng कमांड को आपके सिस्टम में इंस्टॉल कर देगा, जिससे आप Angular CLI को कहीं से भी चला सकते हैं।

2. नया Angular प्रोजेक्ट बनाएं: ServBay के सुझाए वेबसाइट रूट डायरेक्टरी /Applications/ServBay/www में जाएं, और ng new कमांड से एक नया प्रोजेक्ट बनाएं। सलाह है कि प्रोजेक्ट नेम में ServBay ब्रांडिंग शामिल करें, जैसे servbay-angular-app।

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Angular CLI आपसे कुछ प्रोजेक्ट सेटिंग्स पूछेगा। विकल्पों का चयन अपनी पसंद और जरूरत के हिसाब से करें:

   ? Would you like to add Angular routing? Yes  # राउटिंग फीचर जोड़ना है या नहीं, सलाह है 'Yes'
   ? Which stylesheet format would you like to use? CSS # स्टाइलशीट फॉर्मेट चुनें, जैसे CSS

   प्रक्रिया पूर्ण होने पर, /Applications/ServBay/www में servbay-angular-app नामक एक नई फोल्डर बन जाएगी जिसमें प्रोजेक्ट की बेसिक संरचना होगी।

3. प्रोजेक्ट डिपेंडेंसी इंस्टॉल करें: बने हुए प्रोजेक्ट डायरेक्टरी में जाएं और डिपेंडेंसीज़ इंस्टॉल करें।

   cd servbay-angular-app
   npm install

   npm install आपके package.json में दर्शाई गई सभी निर्भरताओं को node_modules फोल्डर में इंस्टॉल कर देगा।

2. Angular प्रोजेक्ट आउटपुट मॉडिफाय करें (वैकल्पिक)

प्रोजेक्ट सफलतापूर्वक चल रहा है या नहीं, यह सत्यापित करने के लिए आप होमपेज का कंटेंट बदल सकते हैं।

1. src/app/app.component.html फाइल में संपादन करें: अपने पसंदीदा कोड एडिटर में servbay-angular-app/src/app/app.component.html खोलें। उसका सारा कंटेंट हटाएं या एडिट करें; केवल एक सिंपल टाइटल रखें, उदाहरण के लिए "Hello ServBay!" दिखाएं।

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>यह आपका Angular ऐप है जो ServBay के जरिए चलता है!</p>
   </div>

3. डेवेलपमेंट मोड में प्रोजेक्ट रन करें

डेवलपमेंट के दौरान, हम आमतौर पर Angular CLI का डेवेलपमेंट सर्वर (ng serve) ही चलाते हैं, जो हॉट रीलोडिंग जैसे फीचर्स सपोर्ट करता है। इसके बाद, ServBay की रिवर्स प्रॉक्सी के जरिए स्थानीय डोमेन से इस सर्वर को एक्सेस किया जाएगा।

1. Angular डेवेलपमेंट सर्वर की शुरुआत करें: प्रोजेक्ट की रूट डायरेक्टरी (/Applications/ServBay/www/servbay-angular-app) में नीचे दिया गया कमांड चलाएं। एक पोर्ट (जैसे 8585) चुनें ताकि वह ServBay के डिफ़ॉल्ट वेब सर्वर से न टकराए।

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   यह आपके Angular प्रोजेक्ट को कंपाइल करके http://localhost:8585/ पर वेब सर्वर शुरू कर देगा। जब तक टर्मिनल खुला रहेगा, सर्वर चलता रहेगा।

2. ServBay वेबसाइट कॉन्फ़िगरेशन करें (रिवर्स प्रॉक्सी): ServBay कंट्रोल पैनल खोलें, "वेबसाइट" मेनू में जाएं। नई वेबसाइट जोड़ें, जिसमें रिवर्स प्रॉक्सी के जरिए एक लोकल डोमेन को ng serve द्वारा शुरू किए गए सर्वर से जोड़ना है।

   • Name (नाम): जैसे My Angular Dev Site (केवल आंतरिक पहचान के लिए)
   • Domain (डोमेन): सलाह है ServBay ब्रांड का डेमो डोमेन लें, जैसे servbay-angular-dev.servbay.demo। ServBay .servbay.demo को 127.0.0.1 से जोड़ता है।
   • Website Type (वेबसाइट प्रकार): रिवर्स प्रॉक्सी (Reverse Proxy) चुनें।
   • Proxy Address (प्रॉक्सी पता): लिखें 127.0.0.1।
   • Proxy Port (प्रॉक्सी पोर्ट): वही पोर्ट डालें जो ng serve के कमांड में बताया था, मसलन 8585।

   सब सेटिंग सेव करके लागू करें।

3. डेव मोड वेबसाइट पर जाएं: अपने ब्राउज़र में सेट किए गए डोमेन को खोलें: https://servbay-angular-dev.servbay.demo।

   चूंकि आप ServBay के जरिए एक्सेस कर रहे हैं और ServBay लोकल वेबसाइट्स के लिए SSL सर्टिफिकेट अपने-आप तैयार करता है (ServBay User CA या ServBay Public CA के माध्यम से), आप सीधा HTTPS पर सुरक्षित रूप से साइट देख सकते हैं। इससे प्रोडक्शन जैसे NX HTTPS पर पहले से संभावित दिक्कतें पकड़ सकते हैं।

4. प्रोडक्शन वर्शन बिल्ड और रन करें

Angular प्रोजेक्ट तैयार हो जाए तब आपको उसका प्रोडक्शन बिल्ड बनाना चाहिए। यह बिल्ड स्टैटिक फाइल्स होता है जिसे किसी भी स्टैटिक फाइल सर्वर पर होस्ट किया जा सकता है। यहां हम ServBay की स्टैटिक वेबसाइट फीचर का उपयोग करेंगे।

1. प्रोडक्शन वर्शन बिल्ड करें: प्रोजेक्ट रूट (/Applications/ServBay/www/servbay-angular-app) में जाकर यह कमांड चलाएं:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # या Angular CLI के नए वर्शन पर:
   # ng build

   --prod (या नए वर्शन में बिना इसके ही) प्रोडक्शन ऑप्टिमाइज़ेशन जैसे AOT, कोड मिनिफिकेशन, ट्री-शेकिंग आदि लागू करता है। आउटपुट फाइलें dist/servbay-angular-app डायरेक्टरी में बनेंगी (नाम आपकी प्रोजेक्ट सेटिंग्स पर निर्भर है, आमतौर पर प्रोजेक्ट नेम ही रहेगा)।

2. ServBay वेबसाइट कॉन्फ़िगरेशन करें (स्टैटिक फाइल सर्विस): ServBay कंट्रोल पैनल खोलें, "वेबसाइट" सेटिंग्स में जाएं। नई वेबसाइट जोड़ें जिसमें डोमेन को प्रोडक्शन बिल्ड फोल्डर से जोड़ना है:

   • Name (नाम): जैसे My Angular Production Site
   • Domain (डोमेन): सलाह है दूसरा ServBay डेमो डोमेन लें, जैसे servbay-angular-prod.servbay.demo।
   • Website Type (वेबसाइट प्रकार): स्टैटिक (Static) चुनें।
   • Website Root Directory (वेबसाइट रूट डायरेक्टरी): Angular प्रोजेक्ट के बिल्ट आउटपुट फोल्डर तक नेविगेट करें; आमतौर पर /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app। सुनिश्चित करें कि यही डायरेक्टरी index.html वाली हो।

   सब कुछ सेव और लागू करें।

3. प्रोडक्शन मोड वेबसाइट खोलें: अपने ब्राउज़र में सेट किया डोमेन खोलें: https://servbay-angular-prod.servbay.demo।

   अब आप अपने Angular प्रोजेक्ट के प्रोडक्शन वर्शन को देख रहे हैं, जो ServBay के हाई-पर्फॉर्मेंस वेब सर्वर (Caddy/Nginx, आपकी सेटिंग के अनुसार) से स्टैटिक फाइल के रूप में सर्व हो रहा है। साथ ही, SSL भी अपने-आप एक्टिवेट है जिससे एक्सेस पूरी तरह सुरक्षित रहेगा।

Angular डेवेलपमेंट में ServBay के लाभ

• एकीकृत एनवायरनमेंट: Node.js वर्शन की आसान स्थापना और प्रबंधन — कोई जटिल एनवायरनमेंट वेरिएबल्स नहीं।
• लचीली वेबसाइट मैनेजमेंट: GUI में रिवर्स प्रॉक्सी, स्टैटिक साइट सर्विसिंग आदि का सहज स्विच, तुरंत डेवलपमेंट/प्रोडक्शन एक्सेस।
• इनबिल्ट SSL सपोर्ट: लोकल डेवेलपमेंट एनवायरनमेंट के लिए स्वतः कॉन्फ़िगर होने वाले मुफ्त SSL सर्टिफिकेट, जिससे HTTPS पर प्रोडक्शन जैसा माहौल।
• मल्टी-टेक्नोलॉजी स्टैक: यदि आपका प्रोजेक्ट बैकेंड API (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot आदि) या डेटाबेस (MySQL, PostgreSQL, MongoDB, Redis आदि) का उपभोग करता है, तो ServBay में ये सब सहजता से एकीकृत किए जा सकते हैं। ServBay इन सारे पैकेजेज का न सिर्फ समर्थन करता है बल्कि लगातार अपडेट भी करता है, और पहले जो फीचर्स नहीं थे वे भी अब मौजूद हैं।
• डेटा बैकअप और पुनर्स्थापन: कॉन्फ़िगरेशन, वेबसाइट, डेटाबेस और SSL सर्टिफिकेट्स का सरल बैकअप, जिससे डाटा सुरक्षा सुनिश्चित हो।
• डेटाबेस पासवर्ड रीसेट: MySQL, MariaDB, PostgreSQL का root पासवर्ड रीसेट करने की सुविधा, जो डेवेलपर्स के लिए वरदान है।

सामान्य प्रश्न (FAQ)

• प्र. ng new या ng serve चलाते समय 'command not found: ng' का संदेश आता है, क्या करें? उ. अधिकांशतः इसका अर्थ है कि Angular CLI सही तरीके से इंस्टॉल नहीं है या PATH में नहीं है। कृपया सुनिश्चित करें कि आपने @angular/cli ग्लोबली इंस्टॉल किया है (npm install -g @angular/cli), और ServBay का Node.js एनवायरनमेंट सही से PATH में है। टर्मिनल या ServBay को रीस्टार्ट आज़मा सकते हैं।
• प्र. ng serve फेल हो रहा है और पोर्ट अलरेडी इन यूज बता रहा है, क्या करें? उ. इसका अर्थ है कि प्रयुक्त पोर्ट (जैसे 8585) कोई और प्रोग्राम इस्तेमाल कर रहा है। आप ng serve में --port से नया पोर्ट (जैसे 8586) दें, और ServBay की वेबसाइट सेटिंग्स में उस पोर्ट को अपडेट करें।
• प्र. ServBay वेबसाइट कॉन्फ़िगर करने के बाद ब्राउज़र में डोमेन खोलने पर पेज नहीं खुल रहा, क्या करें? उ. कृपया ये जांचें:
  • ServBay चालू है या नहीं।
  • डेवेलपमेंट मोड में, ng serve रनिंग है तथा वही पोर्ट रिवर्स प्रॉक्सी में है।
  • प्रोडक्शन मोड में, वेबसाइट रूट डायरेक्टरी में वही फोल्डर है जो index.html वाला है (dist/your-project-name)।
  • अधिक जानकारी के लिए ServBay लॉग्स जांचें।
  • ब्राउज़र में डोमेन ठीक वही है जो ServBay की वेबसाइट सेटिंग्स में है।
• प्र. मैं ServBay के विभिन्न वेब सर्वर (Caddy/Nginx/Apache) का उपयोग Angular प्रोडक्शन वर्शन के लिए कर सकता हूँ? उ. हां, ServBay Caddy, Nginx (और Apache) — सभी से स्टैटिक साइट होस्टिंग सपोर्ट करता है। वेबसाइट स्टैटिक साइट के रूप में सेट करने पर यह अपने-आप आपके सक्रिय Web सर्वर का उपयोग करेगा, और ये सब स्टैटिक फाइल सर्विसिंग के लिए उपयुक्त हैं।

निष्कर्ष

इस गाइड के माध्यम से, आपने ServBay एनवायरनमेंट में एक Angular प्रोजेक्ट बनाने एवं उसे चलाने की प्रक्रिया सीख ली है। आपने जाना कि कैसे डेवेलपमेंट चरण में ServBay रिवर्स प्रॉक्सी द्वारा लोकल डोमेन के जरिए ng serve सर्वर को एक्सेस करते हैं, और फिर प्रोडक्शन में बिल्ड करके उसकी स्टैटिक फाइल्स को ServBay से होस्ट करते हैं। ServBay का Node.js एनवायरनमेंट, वेबसाइट प्रबंधन की सहूलियत और अंतर्निर्मित SSL सपोर्ट आपकी लोकल Angular डेवेलपमेंट की गति और अनुभव में व्यापक सुधार लाता है। साथ ही, ServBay की फुल-स्टैक टेक्नोलॉजी स्टैक सपोर्ट आपके फुल-स्टैक डेवेलपमेंट को एक मजबूत आधार प्रदान करता है।