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

परिचय

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

Angular क्या है?

Angular Google द्वारा मेंटेन किया गया एक ओपन सोर्स फ्रंटएंड फ्रेमवर्क है, जिससे हाई-परफॉर्मेंस, डायनामिक सिंगल पेज एप्लिकेशन (SPA) बनाए जा सकते हैं। यह TypeScript बेस्ड है और स्ट्रक्चर्ड डेवलपमेंट के लिए पूरी टूलकिट देता है, खास तौर पर बड़े और जटिल एंटरप्राइज एप्लिकेशन बनाने के लिए उपयुक्त है।

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

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

ServBay द्वारा दिए गए स्टेबल वातावरण के साथ Angular का उपयोग करने पर डेवलपर्स सीधे बिज़नेस लॉजिक पर ध्यान केंद्रित कर सकते हैं।

पूर्व आवश्यकताएं

शुरू करने से पहले, ये चीजें पूरी कर लें:

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

ServBay में Angular प्रोजेक्ट सेटअप व रन करें

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

1. Angular प्रोजेक्ट निर्माण

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

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

   npm install -g @angular/cli

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

2. नया Angular प्रोजेक्ट बनाएं: ServBay के वेबसाइट रूट डायरेक्ट्री में जाएं और ng new कमांड से नया प्रोजेक्ट बनाएं। ServBay ब्रांडिंग के साथ प्रोजेक्ट नाम जैसे servbay-angular-app रखें।

   macOS:

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

   Windows:

   cd C:\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

   कमांड पूरा होने के बाद, Angular CLI वेबसाइट डायरेक्ट्री में servbay-angular-app नाम से एक फ़ोल्डर बनाएगा जिसमें बेसिक प्रोजेक्ट स्ट्रक्चर और फाइलें होंगी:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\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 डेवलपमेंट सर्वर चालू करें: प्रोजेक्ट रूट डायरेक्ट्री में जाकर नीचे दिए गए कमांड से सर्वर शुरू करें। एक पोर्ट जैसे 8585 चुनें ताकि वह ServBay के डिफॉल्ट वेब सर्वर पोर्ट से क्लैश न हो।

   macOS:

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

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

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

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

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

   सेटअप पूरा करके बदलाव सेव व लागू करें।

3. डेवलपमेंट वेबसाइट तक पहुंचें: ब्राउज़र में https://servbay-angular-dev.servbay.demo खोलें।

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

4. प्रोडक्शन वर्शन बिल्ड व चलाएं

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

1. प्रोडक्शन वर्शन बिल्ड करें: प्रोजेक्ट रूट डायरेक्ट्री में नीचे दिये कमांड से प्रोडक्शन बिल्ड करें:

   macOS:

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

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # या Angular CLI के नए वर्शन में:
   # ng build

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

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

   • नाम (Name): जैसे My Angular Production Site

   • डोमेन (Domain): उदाहरण के लिए servbay-angular-prod.servbay.demo

   • वेबसाइट प्रकार (Website Type): स्टैटिक (Static)

   • रूट डायरेक्ट्री (Website Root Directory): ऊपर तैयार की गई आउटपुट डायरेक्ट्री पर जाएं, आमतौर पर:

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     ध्यान रखें फोल्डर उस डायरेक्ट्री पर पॉइंट करता हो जिसमें index.html फाइल है।

   सेटअप पूरा कर सेव व लागू करें।

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

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

Angular डेवलपमेंट में ServBay की खासियतें

• इंटीग्रेटेड वातावरण: 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)

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

निष्कर्ष

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