ServBay के साथ Vue.js प्रोजेक्ट बनाएं और चलाएँ

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

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

Vue.js क्या है?

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

Vue 3 की प्रमुख खूबियाँ और फायदे

• Composition API: फंक्शन कॉम्बिनेशन के ज़रिए कोड ऑर्गनाइज़ करना, जिससे बड़े components की मेंटेनेंस और री-यूज़ आसान हो जाती है।
• परफॉर्मेंस इम्प्रूवमेंट: Vue 3 ने reactivity सिस्टम के लिए Proxy ऑब्जेक्ट इस्तेमाल किया है और वर्चुअल DOM ऑप्टिमाइज़ किया है, जिससे स्पीड में काफी सुधार हुआ है।
• छोटा पैकेज साइज: Tree-shaking टेक्नॉलजी के चलते core कम साइज का हो गया है और तेजी से लोड होता है।
• TypeScript सपोर्ट: Vue 3 में TypeScript के लिए बेहतरीन type definitions मिलती हैं, जिससे TS के साथ डेवलपमेंट स्मूथ हो जाती है।
• Component लाइफसाइकल इम्प्रूवमेंट: नए लाइफसाइकल hooks और Setup function के चलते लॉजिक ज्यादा क्लियर और manageable हो गया है।

Vue 3 इस्तेमाल करने से डेवलपर्स मॉडर्न और responsive वेब ऐप्लिकेशन्स बहुत efficiently बना सकते हैं।

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

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

जरूरी शर्तें

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

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

Vue.js प्रोजेक्ट बनाना

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

   सबसे पहले, अपना टर्मिनल खोलें। ServBay सुझाव देता है कि वेबसाइट प्रोजेक्ट को डिफॉल्ट डायरेक्टरी में रखें। वहाँ जाएँ और npm create vue@latest कमांड से नया Vue.js प्रोजेक्ट शुरू करें। @latest का उपयोग करें ताकि नवीनतम CLI या create-vue टूल के जरिए आम तौर पर Vue 3 प्रोजेक्ट बन सके।

   macOS:

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

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   टर्मिनल के निर्देशों के अनुसार प्रोजेक्ट का नाम दें (for example 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 में जाएँ और फिर npm install कमांड से सभी जरूरी dependencies इंस्टॉल करें।

   cd servbay-vue-app
   npm install

प्रोजेक्ट कंटेंट एडिट करें (ऑप्शनल)

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

प्रोजेक्ट के भीतर src/App.vue में:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>यह एक Vue.js ऐप है जो 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. डेवलपमेंट सर्वर चलाएँ

   अपने प्रोजेक्ट root में यह कमांड चलाएँ जिससे डेवेलपमेंट सर्वर शुरू होगा। --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 डोमेन)
   • वेबसाइट प्रकार: रिवर्स प्रॉक्सी
   • रिवर्स प्रॉक्सी Target IP: 127.0.0.1
   • रिवर्स प्रॉक्सी Target Port: 8585 (वही पोर्ट जो आपने dev सर्वर के लिए चुना)

   सेटिंग्स सेव करने पर ServBay अपने वेब सर्वर (Caddy या Nginx) की कॉन्फ़िगरेशन अपडेट कर देगा ताकि servbay-vue-dev.servbay.demo डोमेन की request http://127.0.0.1:8585 पर फ़ॉरवर्ड हो।

   Node.js डेवेलपमेंट साइट सेटअप के डिटेल स्टेप्स के लिए देखें: ServBay में Node.js डेवेलपमेंट वेबसाइट जोड़ें

3. डिवेलपमेंट मोड में एक्सेस करें

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

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

   अब ब्राउज़र में आपको अपनी Vue ऐप डेवेलपमेंट मोड में दिखाई देगी और कोड बदलाव पर गर्म रीलोड (hot reload) का मजा मिलेगा।

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

जब आपका Vue.js प्रोजेक्ट तैयार हो जाए और डिप्लॉय के लिए तैयार हो, तो आपको अत्यधिक अनुकूलित प्रोडक्शन बिल्ड क्रिएट करना होगा। यह बिल्ड आमतौर पर स्टेटिक फाइल्स (HTML, CSS, JS आदि) होती है, जिसे ServBay की static साइट सर्विस से आसानी से होस्ट किया जा सकता है।

1. प्रोडक्शन बिल्ड बनाएं

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

   npm run build

   बिल्ड पूरा होते ही optimized स्टेटिक फाइलें default dist फोल्डर में मिलेंगी।

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

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

   • नाम: My first Vue production site (या अपनी पसंद का नाम)
   • डोमेन: servbay-vue-prod.servbay.demo (या कोई अन्य .servbay.demo डोमेन)
   • वेबसाइट प्रकार: स्टेटिक
   • वेबसाइट रूट डायरेक्टरी: अपने प्रोजेक्ट बिल्ड के बाद जनरेट हुए dist डायरेक्टरी की absolute path दें:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   सेव करने के बाद ServBay web server इसी dist डायरेक्टरी से स्टेटिक फाइलें serve करेगा।

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

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

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

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

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

निष्कर्ष

ServBay के जरिए macOS और Windows में आप Node.js एनवायरनमेंट के साथ integrated लोकल डेवेलपमेंट सेटअप बना सकते हैं और Vue.js प्रोजेक्ट्स का डेवेलपमेंट एवं production deployment सरलता से manage कर सकते हैं। ServBay की वेतसाइट सुविधा से आप जल्दी रिवर्स प्रॉक्सी कॉन्फ़िगर करके डेवेलपमेंट सर्वर एक्सेस कर सकते हैं या सीधे प्रोडक्शन बिल्ड की static files serve कर सकते हैं। इस प्रक्रिया में कस्टम डोमेन व ऑटो-SSL सर्टिफ़िकेट के integration से आपकी लोकल साइट सुरक्षित व प्रोडक्शन जैसी बनती है—जिससे लोकल Vue.js प्रोजेक्ट्स की setup और work-flow बहुत आसान हो जाती है।