macOS पर ServBay के साथ Vue.js प्रोजेक्ट तैयार करें और चलाएं

Vue.js एक लोकप्रिय और यूज़र इंटरफ़ेस बनाने के लिए प्रोग्रेसिव JavaScript फ्रेमवर्क है। यह इस्तेमाल में आसान, लचीला और तेज़ काम करता है, खास तौर से सिंगल पेज एप्लिकेशन (SPA) के निर्माण के लिए उपयुक्त है। ServBay एक शक्तिशाली लोकल वेब डेवेलपमेंट एन्वायरमेंट है जो डेवलपर्स के लिए Node.js का सहज समर्थन देता है, जिससे macOS पर Vue.js डेवेलपमेंट के लिए यह आदर्श प्लेटफ़ॉर्म बन जाता है।

इस गाइड में आप सीखेंगे कि ServBay के इंटीग्रेटेड पर्यावरण का उपयोग करके ज़ीरो से Vue.js प्रोजेक्ट तैयार कैसे करें और उसे डेवेलपमेंट एवं प्रोडक्शन मोड में ServBay के ज़रिए एक्सेस कैसे करें।

Vue.js क्या है?

Vue.js एक प्रोग्रेसिव JavaScript फ्रेमवर्क है जो यूज़र इंटरफेस बनाने के लिए उपयोग होता है। अन्य बड़े फ्रेमवर्क्स की तुलना में, Vue नीचे से ऊपर की ओर इनक्रिमेंटल डेवेलपमेंट डिजाइन अपनाता है। Vue का मुख्य लाइब्रेरी केवल व्यू लेयर पर फोकस करता है, जिससे यह आसान और थर्ड-पार्टी लाइब्रेरीज या मौजूदा प्रोजेक्ट्स से इंटीग्रेट करना भी सरल रहता है। Vue.js का नवीनतम वर्शन Vue 3 है, जिसमें कई नए फ़ीचर और सुधार हैं, जैसे तेज़ परफॉर्मेंस, छोटा पैकेज साइज और बेहतर TypeScript सपोर्ट।

Vue 3 के मुख्य फीचर्स और फायदे

• कंपोज़िशन API (Composition API): लॉजिक को फंक्शन के रूप से व्यवस्थित करने की सुविधा, जिससे बड़े कंपोनेंट्स की कोडिंग अधिक मेन्टेनेबल और री-यूज़ेबल बनती है।
• परफॉर्मेंस में बढ़ोतरी: Vue 3 में प्रक्रियाओं को responsive बनाने के लिए Proxy ऑब्जेक्ट्स का उपयोग और वर्चुअल DOM एल्गोरिदम में सुधार किया गया है, जिससे प्रदर्शन में उल्लेखनीय वृद्धि होती है।
• छोटा पैकेज साइज: Tree-shaking तकनीक की बदौलत, Vue 3 की कोर लाइब्रेरी और भी हल्की है, जिससे लोडिंग तेज़ होती है।
• बेहतर TypeScript सपोर्ट: Vue 3 में TypeScript के लिए बेहतरीन टाइप डिफ़िनिशन मिलती है, जिससे TypeScript के साथ Vue एप्लिकेशन तैयार करना और आसान होता है।
• सुधारित कंपोनेंट लाइफसाइकल: नए लाइफसाइकल हुक्स और सेटअप फंक्शन की मदद से कंपोनेंट्स की लॉजिक और अधिक क्लियर और मैनेजेबल बनती है।

Vue 3 के रूप में, डेवलपर्स अत्याधुनिक, उत्तरदायी वेब ऐप्लिकेशन जल्दी और सक्षम रूप से बना सकते हैं।

ServBay इंटीग्रेशन एन्वायरमेंट के साथ Vue.js प्रोजेक्ट तैयार करना व चलाना

इस लेख में, हम ServBay के Node.js एन्वायरमेंट का प्रयोग एक नया Vue.js प्रोजेक्ट बनाने और चलाने के लिए करेंगे। हम ServBay की वेबसाइट सुविधा का उपयोग वेब सर्वर सेटअप और रिवर्स प्रॉक्सी एवं स्टैटिक फ़ाइल सेवा के लिए करेंगे, जिससे लोकल एक्सेस संभव होता है।

आवश्यक पूर्वतैयारियाँ

शुरू करने से पहले यह सुनिश्चित कर लें:

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

Vue.js प्रोजेक्ट तैयार करें

1. प्रोजेक्ट इनिशियलाइज़ करें

   सबसे पहले, टर्मिनल ऐप खोलें। ServBay सलाह देता है कि आप प्रोजेक्ट्स /Applications/ServBay/www डायरेक्टरी में रखें। वहां जाएं और npm create vue@latest कमांड से नया Vue.js प्रोजेक्ट आरंभ करें। @latest आपको नवीनतम Vue CLI या create-vue टूल से Vue 3 प्रोजेक्ट बनाने में मदद करता है।

   cd /Applications/ServBay/www
   npm create vue@latest

   टर्मिनल के निर्देशानुसार प्रोजेक्ट का नाम डालें (सुझावितः servbay-vue-app), और अपनी जरूरत के अनुसार TypeScript, Vue Router, Pinia आदि चुनें। उदाहरणतः:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # अपनी आवश्यकता अनुसार Yes या No चुनें
   ✔ Add JSX Support? … No # अपनी आवश्यकता अनुसार Yes या No चुनें
   ✔ Add Vue Router for Single Page Application development? … Yes # सलाह है Yes चुनें
   ✔ Add Pinia for state management? … No # अपनी आवश्यकता अनुसार Yes या No चुनें
   ✔ Add Vitest for Unit testing? … No # अपनी आवश्यकता अनुसार Yes या No चुनें
   ✔ Add an End-to-End Testing Solution? … No # अपनी आवश्यकता अनुसार Yes या No चुनें
   ✔ Add ESLint for code quality? … Yes # सलाह है Yes चुनें
   ✔ Add Prettier for code formatting? … Yes # सलाह है Yes चुनें
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # अपनी आवश्यकता अनुसार Yes या No चुनें

2. डिपेंडेंसी इंस्टॉल करें

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

   cd servbay-vue-app
   npm install

प्रोजेक्ट का डेमो कंटेंट बदलिए (वैकल्पिक)

यह जांचने के लिए कि आपका प्रोजेक्ट ठीक से चल रहा है, src/App.vue फाइल खोलें और उसकी डिफ़ॉल्ट सामग्री को एक साधारण "Hello ServBay!" आउटपुट से बदल दें।

प्रोजेक्ट फोल्डर के अंतर्गत src/App.vue में यह कंटेंट करें:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>This is a Vue.js app running via ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

डेवेलपमेंट मोड के लिए सेटअप (रिवर्स प्रॉक्सी द्वारा)

Vue प्रोजेक्ट डेवेलपमेंट मोड में आमतौर पर एक लोकल डेवेलपमेंट सर्वर चालू करता है (Vite या Webpack आधारित), जो Hot Module Reload (HMR) जैसी सुविधाएं देता है। ServBay एक डोमेन को इस सर्वर के पते व पोर्ट पर रिवर्स प्रॉक्सी से मैप कर सकता है।

1. डेव सर्वर चलाएं

   प्रोजेक्ट के मुख्य डायरेक्टरी में, यह कमांड चलाएं, और --port विकल्प से पोर्ट (जैसे: 8585) निर्दिष्ट करें, ध्यान दें कि पोर्ट उपलब्ध हो।

   npm run dev -- --port 8585

   टर्मिनल पर सर्वर चालू होने और पोर्ट (जैसे http://localhost:8585) पर लिसनिंग दिखेगा।

2. ServBay वेबसाइट रिवर्स प्रॉक्सी सेट करें

   ServBay ऐप खोलें और वेबसाइट सेक्शन में जाएं। एक नया वेबसाइट जोड़ें, और वेबसाइट टाइप रिवर्स प्रॉक्सी चुनें:

   • नाम: My first Vue dev site (या कोई भी पहचानने योग्य नाम)
   • डोमेन: servbay-vue-dev.servbay.demo (या आपकी पसंद का कोई '.servbay.demo' डोमेन)
   • वेबसाइट टाइप: रिवर्स प्रॉक्सी
   • रिवर्स प्रॉक्सी टारगेट IP: 127.0.0.1
   • रिवर्स प्रॉक्सी टारगेट पोर्ट: 8585 (डेव सर्वर पोर्ट के बराबर)

   सेटिंग्स सेव करने के बाद, ServBay अपनी वेब सर्वर (Caddy या Nginx) सेटिंग्स को अपडेट कर देगा, जिससे servbay-vue-dev.servbay.demo की रिक्वेस्ट्स http://127.0.0.1:8585 पर भेजी जाएंगी।

   Node.js डेवेलपमेंट वेबसाइट ServBay में एड करने के विस्तृत स्टेप्स के लिए देखें ServBay में Node.js डेवेलपमेंट वेबसाइट जोड़ना।

3. डेव मोड में एक्सेस करें

   सुनिश्चित करें कि ServBay वेब सर्वर चालू हो। ब्राउज़र खोलकर आपने जो डोमेन सेट किया है (https://servbay-vue-dev.servbay.demo) ओपन करें।

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

   अब आपको ब्राउज़र में अपना Vue ऐप डेवेलपमेंट मोड में दिखेगा और कोड बदलते ही HMR के ज़रिये उसके बदलाव तुरंत दिखेंगे।

प्रोडक्शन बिल्ड और डिप्लॉय (स्टैटिक वेबसाइट सर्विस के ज़रिए)

जब वेबसाइट बना लें और उसे प्रोडक्शन के लिए तैयार करना हो, तो उसका ऑप्टिमाइज़्ड स्टैटिक वर्शन तैयार करें जो आसानी से ServBay द्वारा डिप्लॉय किया जा सके।

1. प्रोडक्शन वर्शन तैयार करें

   प्रोजेक्ट डायरेक्टरी में यह कमांड चलाएं:

   npm run build

   इससे ऑप्टिमाइज़्ड, पाइन्डल्ड स्टैटिक फाइल्स तैयार होंगी जो डिफ़ॉल्ट रूप से फोल्डर dist में सेव होंगी।

2. स्टैटिक फाइल सर्विंग सेट करें

   ServBay ऐप खोलें और वेबसाइट सेक्शन में नया वेबसाइट बनाएं, वेबसाइट प्रकार स्टैटिक चुनें:

   • नाम: My first Vue production site (या कोई उपयुक्त नाम)
   • डोमेन: servbay-vue-prod.servbay.demo (या आपकी पसंद का '.servbay.demo' डोमेन)
   • वेबसाइट टाइप: स्टैटिक
   • वेबसाइट रूट डायरेक्टरी: /Applications/ServBay/www/servbay-vue-app/dist (इसी डायरेक्टरी में आपने बिल्ड फाइल्स सेव की हैं)

   सेव करते ही, ServBay अपनी वेब सर्वर को dist डायरेक्टरी की फाइल्स को डायरेक्ट सर्व करने के लिए अपडेट कर देगा।

3. प्रोडक्शन मोड में साइट एक्सेस करें

   सुनिश्चित करें ServBay वेब सर्वर चालू हो। ब्राउज़र में आपने प्रोडक्शन के लिए तय डोमेन (https://servbay-vue-prod.servbay.demo) ओपन करें।

   अब आप अपने Vue ऐप का प्रोडक्शन वर्शन देखेंगे, जो पूरी तरह ऑप्टिमाइज़्ड है और सबसे बेहतरीन लोड स्पीड देगा। ServBay के कस्टम डोमेन और ऑटो-SSL फीचर के ज़रिए आप लोकली ही सुरक्षित प्रोडक्शन वेबसाइट का प्रीव्यू ले सकते हैं।

ध्यान देने योग्य बातें

• पोर्ट कन्फ्लिक्ट: यदि आपने npm run dev कमांड में पोर्ट 8585 (या अन्य कोई) चुना है, और वह किसी और प्रोग्राम द्वारा इस्तेमाल हो रहा हो तो कमांड एरर देगी। कृपया कोई उपलब्ध पोर्ट आज़माएं, और ServBay की रिवर्स प्रॉक्सी सेटिंग्स में भी वही पोर्ट डालें।
• ServBay वेब सर्वर स्टेटस: यह जरूरी है कि ServBay का वेब सर्वर (Caddy या Nginx, आपके ServBay सेटअप पर निर्भर करता है) चालू हो, वरना आप डोमेन से साइट नहीं देख पाएंगे।
• डोमेन रेज़ॉल्यूशन: ServBay आपकी वेबसाइट सेटिंग्स में जोड़े गए .servbay.demo डोमेन्स को खुद-ब-खुद लोकल (127.0.0.1) से जोड़ देता है। अगर आप कोई दूसरा डोमेन यूज़ कर रहे हैं, तो सिस्टम के hosts फ़ाइल को मैन्युअली एडिट करें या ServBay का Hosts Manager फीचर यूज़ करें ताकि लोकल रेज़ॉल्यूशन सही रहे।

निष्कर्ष

ServBay की मदद से आप macOS पर Node.js इंटीग्रेटेड लोकल डेवेलपमेंट एन्वायरमेंट आसानी से तैयार कर सकते हैं और Vue.js प्रोजेक्ट का डेवलपमेंट व प्रोडक्शन डिप्लॉयमेंट मैनेज कर सकते हैं। ServBay की वेबसाइट सुविधा के ज़रिए आप डेवेलपमेंट सर्वर के लिए रिवर्स प्रॉक्सी प्रश्निक कर सकते हैं, या प्रोडक्शन बिल्ड की स्टैटिक फाइल्स को सीधे सर्व कर सकते हैं, साथ ही कस्टम डोमेन और ऑटोमे‍टिक SSL सर्टिफिकेट जैसी सुरक्षित और सुविधाजनक सेवाएं भी प्राप्त कर सकते हैं। इससे लोकल Vue.js परियोजनाओं की सेटिंग और कार्यप्रवाह बेहद सरल हो जाती है।