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

Nuxt.js क्या है?

Nuxt.js एक ओपन सोर्स फ्रेमवर्क है, जो लोकप्रिय Vue.js फ्रेमवर्क पर आधारित है और आधुनिक, उच्च-प्रदर्शन वेब एप्लिकेशन बनाने के लिए डिज़ाइन किया गया है। यह बहुत सी जटिल सेटिंग्स को सार्थक करता है, जिससे डेवलपर्स आसानी से बिज़नेस लॉजिक पर ध्यान केंद्रित कर सकते हैं। Nuxt.js सर्वर-साइड रेंडरिंग (SSR) ऐप्लिकेशन निर्माण में माहिर है, साथ ही इसमें शक्तिशाली स्टैटिक साइट जनरेशन (SSG) की सुविधा है, जिससे यह सामग्री-समृद्ध, SEO-फ्रेंडली वेबसाइट्स और एप्लिकेशन के लिए एक आदर्श विकल्प बनता है।

Nuxt.js की मुख्य विशेषताएं और फायदे

• सर्वर-साइड रेंडरिंग (SSR): Vue पेज को सर्वर पर ही पहले से रेंडर कर दिया जाता है, जिससे पहली बार पेज लोड अधिक तेज़ हो जाता है, यूज़र एक्सपीरियंस बेहतर होता है और सर्च इंजन द्वारा कंटेंट को सही तरीके से इंडेक्स किया जा सकता है, जो SEO के लिए लाभकारी है।
• स्टैटिक साइट जनरेशन (SSG): बिल्ड टाइम पर पूरी तरह से स्टैटिक HTML फाइलें तैयार होती हैं। यह तरीका बहुत तेज़ होता है, डिप्लॉय करना आसान है और रनटाइम पर कोई सर्वर लागत नहीं होती; ब्लॉग या डॉक्युमेंटेशन जैसे स्थायी कंटेंट वाली साइट्स के लिए आदर्श।
• स्वचालित कोड स्प्लिटिंग (Automatic Code Splitting): Nuxt.js रूट के आधार पर जावास्क्रिप्ट कोड को स्वचालित रूप से विभाजित करता है, जिससे सिर्फ आवश्यक कोड ही लोड होता है और एप्लिकेशन की गति बढ़ती है।
• फाइल सिस्टम आधारित रूटिंग (File-system Routing): pages डायरेक्ट्री में .vue फाइल जोड़ने मात्र से रूटिंग कॉन्फ़िगरेशन स्वचालित रूप से बन जाती है, जिससे रूटिंग मैनेजमेंट आसान हो जाता है।
• मॉड्यूलर सिस्टम: बड़े मॉड्यूल इकोसिस्टम के साथ, जिसे आसानी से विभिन्न फ़ीचर्स और थर्ड-पार्टी सेवाओं (जैसे Axios, PWA सपोर्ट, CMS इंटीग्रेशन आदि) में जोड़ा जा सकता है।
• कन्वेंशन ओवर कॉन्फ़िगरेशन: स्टैण्डर्ड फ़ोल्डर स्ट्रक्चर और नामकरण नियम का पालन करके कॉन्फ़िगरेशन का झंझट कम हो जाता है।
• बेहतर डेवलपमेंट एक्सपीरियंस: हॉट मॉड्यूल रीलोड (HMR), त्रुटि रिपोर्टिंग आदि जैसी सुविधाएं डेवलपमेंट को प्रभावशाली और तेज़ बनाती हैं।

इन सभी सुविधाओं से Nuxt.js के जरिए उच्च-प्रदर्शन, SEO-फ्रेंडली और जटिल वेब एप्लिकेशन बनाना अधिक प्रभावी तथा आसान हो जाता है।

ServBay में Nuxt.js प्रोजेक्ट सेटअप और चलाना

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

आवश्यकताएँ

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

1. आप ServBay एप्लिकेशन सफलतापूर्वक इंस्टॉल कर चुके हैं।
2. ServBay में Node.js पैकेज इंस्टॉल और सक्रिय हो चुका है। ServBay कंट्रोल पैनल के "पैकेज" टैब में जाकर जांच और इंस्टॉल कर सकते हैं।
3. आपको Node.js, npm (या Yarn/pnpm) और बेसिक टर्मिनल कमांड्स की जानकारी है।
4. (सुझाव) एक कोड एडिटर इंस्टॉल कर लें, जैसे VS Code।

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

हम create-nuxt-app स्कैफोल्डिंग टूल से तेज़ी से Nuxt.js प्रोजेक्ट बनाएंगे।

1. टर्मिनल खोलें और ServBay वेबसाइट की रूट डायरेक्ट्री में जाएँ

   ServBay की डिफ़ॉल्ट वेबसाइट रूट डायरेक्ट्री लोकल प्रोजेक्ट्स स्टोर करने के लिए अनुशंसित है। टर्मिनल खोलें और नीचे दिए गए कमांड से इस डायरेक्ट्री में जाएँ:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. नया Nuxt.js प्रोजेक्ट आरंभ करें

   npx create-nuxt-app कमांड से servbay-nuxt-app नाम का प्रोजेक्ट बनाएँ। npx npm 5.2+ के साथ आता है और बिना ग्लोबल इंस्टॉल किए पैकेज एक्सिक्यूटेबल तत्काल चलाता है।

   npx create-nuxt-app servbay-nuxt-app

   कमांड चलाने पर टर्मिनल में विकल्प दिखेंगे—अपनी आवश्यकता अनुसार चुनें। एक उदाहरण कॉन्फ़िगरेशन इसी प्रकार है:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # अपनी पसंद का पैकेज मैनेजर चुनें; Npm या Yarn सुझाया जाता है
   ? UI framework: None          # ज़रूरत अनुसार UI फ्रेमवर्क चुनें
   ? Nuxt.js modules: Axios      # ज़रूरत अनुसार Nuxt.js मॉड्यूल चुनें
   ? Linting tools: ESLint       # ज़रूरत अनुसार लिंटिंग टूल चुनें
   ? Testing framework: None     # ज़रूरत अनुसार टेस्टिंग फ्रेमवर्क चुनें
   ? Rendering mode: Universal (SSR / SSG) # रेंडरिंग मोड चुनें: Universal SSR और SSG दोनों सपोर्ट करता है
   ? Deployment target: Server (Node.js hosting) # डिप्लॉयमेंट टार्गेट चुनें, Server लोकल डेवलपमेंट और Node.js सर्वर के लिए उपयुक्त
   ? Development tools: jsconfig.json (Recommended for VS Code) # ज़रूरत अनुसार डेवलपमेंट टूल्स कॉन्फ़िगर करें

3. प्रोजेक्ट डिपेंडेंसी इंस्टॉल करें

   नए प्रोजेक्ट डायरेक्ट्री में जाएँ और अपने चुने पैकेज मैनेजर से आवश्यक डिपेंडेंसी इंस्टॉल करें:

   cd servbay-nuxt-app
   npm install
   # या Yarn का उपयोग करें: yarn install
   # या pnpm का उपयोग करें: pnpm install

   डिपेंडेंसी इंस्टॉल होने तक प्रतीक्षा करें।

प्रोजेक्ट का आउटपुट कंटेंट बदलें

सुविधा के लिए, अब हम होम पेज को संशोधित करेंगे ताकि वह साधारण टेक्स्ट दिखाए।

1. pages/index.vue फाइल खोलें

   अपने कोड एडिटर में प्रोजेक्ट डायरेक्ट्री की pages/index.vue फाइल खोलें।

2. फाइल सामग्री बदलें

   नीचे दिया गया कोड पेस्ट करें जिससे आपके पेज पर "Hello ServBay!" दिखाई देगा:

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   यहाँ scoped स्टाइल जोड़ा गया है ताकि स्टाइल सिर्फ इसी कॉम्पोनेंट पर लागूं हो, और आउटपुट को थोड़ा सुंदर बनाया गया है।

ServBay पर डेवलपमेंट मोड चलाएँ

Nuxt.js डेवलपमेंट सर्वर आमतौर पर किसी लोकल पोर्ट पर चलता है। ServBay के कस्टम डोमेन, SSL सर्टिफिकेट और एकीकृत 80/443 पोर्ट पर एक्सेस के लिए, हम ServBay वेबसाइट के साथ रिवर्स प्रॉक्सी सेटअप करेंगे।

1. Nuxt.js डेवलपमेंट सर्वर चालू करें

   प्रोजेक्ट रूट डायरेक्ट्री पर ये कमांड रन करें—हम यहाँ पोर्ट 8585 ले रहे हैं, आप कोई भी खाली पोर्ट इस्तेमाल कर सकते हैं:

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # या Yarn: yarn dev --port 8585
   # या pnpm: pnpm run dev --port 8585

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # या Yarn: yarn dev --port 8585
   # या pnpm: pnpm run dev --port 8585

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

2. ServBay वेबसाइट (रिवर्स प्रॉक्सी) कन्फ़िगर करें

   ServBay कंट्रोल पैनल खोलें, "वेबसाइट" टैब में जाएँ। नीचे-बाएँ + बटन दबाएँ और नया साइट कन्फ़िगर करें:

   • नाम (Name): कोई आसान नाम दें, जैसे Nuxt.js Dev Site (Proxy)।
   • डोमेन (Domain): ब्राउजर में खोलने के लिए कस्टम डोमेन सेट करें, जैसे nuxt-dev.servbay.demo। .servbay.demo का उपयोग सर्वबे ब्रांडिंग के लिए अच्छा अभ्यास है।
   • वेबसाइट टाइप (Website Type): रिवर्स प्रॉक्सी (Reverse Proxy) चुनें।
   • IP एड्रेस (IP Address): 127.0.0.1 डालें (लोकल होस्ट)।
   • पोर्ट (Port): Nuxt.js डेवलपमेंट सर्वर सेम पोर्ट डालें, यानी 8585।

   सेटअप के बाद "एड" या "सेव" दबाएँ। सर्वबे आपकी सेटिंग्स लागू कर देगा।

   ServBay में Node.js डेवलपमेंट वेबसाइट (आमतौर पर रिवर्स प्रॉक्सी वाला) जोड़ने के विस्तार से स्टेप्स के लिए देखें: Node.js डेवलपमेंट वेबसाइट जोड़ना।

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

   अपने ब्राउज़र में, ServBay में सेट किए डोमेन पर जाएँ—जैसे https://nuxt-dev.servbay.demo।

   ServBay के रिवर्स प्रॉक्सी के माध्यम से आप कस्टम डोमेन और HTTPS पोर्ट पर सीधे Nuxt.js डेवलपमेंट सर्वर देख सकते हैं। ServBay स्वतः आपके लिए SSL सर्टिफिकेट सेटअप करता है (ServBay User CA द्वारा साइन—सुनिश्चित करें कि आपका सिस्टम इस CA पर ट्रस्ट करता है)। इससे आपको लोकल डेवलपमेंट में प्रॉडक्शन जैसे सिक्योर सेटिंग्स मिलती हैं, जैसे सर्विस वर्कर्स या अन्य सिक्योर फीचर टेस्टिंग।

प्रोडक्शन वर्शन बनाएं और चलाएँ

जब आपका Nuxt.js प्रोजेक्ट तैयार है और आपको उसे डिप्लॉय या लोकल प्रॉडक्शन प्रीव्यू देखना है, तो आप प्रोडक्शन वर्शन तैयार कर सकते हैं। Universal मोड के लिए, स्टैटिक साइट्स बनाने हेतु आम तौर पर nuxt generate (या npm run export) चलाते हैं।

1. प्रोडक्शन बिल्ड और स्टैटिक फाइल जनरेट करें

   प्रोजेक्ट रूट पर ये कमांड रन करें। npm run build से कोड कम्पाइल होता है, और npm run export से रूट्स के अनुसार स्टैटिक HTML फाइलें आउटपुट होती हैं (डिफ़ॉल्ट डायरेक्ट्री dist)।

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # या Yarn: yarn build && yarn export
   # या pnpm: pnpm build && pnpm run export

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run build
   npm run export
   # या Yarn: yarn build && yarn export
   # या pnpm: pnpm build && pnpm run export

   बिल्ड पूरा होने पर, प्रोजेक्ट फोल्डर में dist नाम का फोल्डर मिलेगा जिसमें सारी स्टैटिक फाइलें होंगी।

2. ServBay वेबसाइट (स्टैटिक फाइल सर्विस) कन्फ़िगर करें

   ServBay कंट्रोल पैनल खोलें, "वेबसाइट" टैब में जाएँ। नीचे-बाएँ + बटन दबाएँ और नया साइट कन्फ़िगर करें:

   • नाम (Name): कोई आसान नाम दें, जैसे Nuxt.js Prod Site (Static)।
   • डोमेन (Domain): प्रोडक्शन वर्शन के लिए कस्टम डोमेन सेट करें, जैसे nuxt-prod.servbay.demo।
   • वेबसाइट टाइप (Website Type): स्टैटिक (Static) चुनें।
   • वेबसाइट रूट डायरेक्ट्री: Nuxt.js के स्टैटिक फाइल आउटपुट की डायरेक्ट्री:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   सेटअप के बाद "एड" या "सेव" दबाएँ। ServBay सेटिंग्स लागू कर देगा।

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

   अपने ब्राउज़र में जो डोमेन प्रोडक्शन के लिए सेट किया, उस पर जाएँ—जैसे https://nuxt-prod.servbay.demo।

   ServBay का हाई-पर्फॉर्मेंस वेब सर्वर (Caddy या Nginx, आपकी सेटिंग के अनुसार) सीधे dist डायरेक्ट्री में मौजूद स्टैटिक फाइलें सर्व करेगा। यह स्टैटिक कंटेंट सर्व करने का सबसे तेज़ और इष्टतम तरीका है। साथ में आपको मुफ्त में SSL सर्टिफिकेट और कस्टम डोमेन का सपोर्ट मिलता है।

निष्कर्ष

ServBay के जरिए आप Nuxt.js प्रोजेक्ट्स का लोकल डेवलपमेंट और प्रीव्यू बहुत आसानी से मैनेज कर सकते हैं। ServBay के Node.js पैकेज से डेवलपमेंट सर्वर चलाएँ और वेबसाइट फ़ीचर से रिवर्स प्रॉक्सी कन्फ़िगर कर लें, जिससे आप कस्टम डोमेन और HTTPS के तहत विकास व डिबगिंग कर सकते हैं। प्रोजेक्ट डेवेलपमेंट पूरा होने पर स्टैटिक फाइलें जनरेट करें और ServBay की स्टैटिक वेबसाइट टाइप से उच्च-प्रदर्शन लोकल प्रीव्यू लें। यह वर्कफ्लो ServBay की शक्तिशाली और सुविधाजनक क्षमताओं का भरपूर लाभ देती है और फ्रंटएंड लोकल डेवेलपमेंट व टेस्टिंग भी आसान बनाती है। आशा है यह गाइड आपकी ServBay के साथ Nuxt.js विकास प्रक्रिया को और प्रभावी बनाएगी!