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

Nuxt.js क्या है?

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

Nuxt.js की प्रमुख खूबियां और फायदे

• सर्वर-साइड रेंडरिंग (SSR): Vue पेजेस को सर्वर पर पहले से रेंडर किया जाता है, जिससे फर्स्ट लोडिंग स्पीड बढ़ती है, यूज़र अनुभव बेहतर होता है, और सर्च इंजन कंटेंट को बेहतर तरीके से इंडेक्स कर पाते हैं—ये सब SEO के लिए लाभकारी है।
• स्टैटिक साइट जेनरेशन (SSG): बिल्ड-टाइम पर पूरी तरह स्टैटिक HTML फाइलें जेनरेट होती हैं। यह तरीका अत्यंत तीव्र, डिप्लॉय करने में सरल और बिना सर्वर रनटाइम लागत के, कंटेंट-स्थिर वेबसाइट्स जैसे ब्लॉग या डाक्यूमेंटेशन साइट्स के लिए एकदम सही है।
• स्वचालित कोड स्प्लिटिंग: Nuxt.js रूट्स के अनुसार जावास्क्रिप्ट कोड को ऑटोमेटिकली विभाजित कर देता है, जिससे केवल जरूरत का कोड ही लोड होता है और प्रदर्शन में शानदार सुधार आता है।
• फाइल-सिस्टम आधारित राउटिंग: आप pages फोल्डर में .vue फाइलें बनाकर स्वत: रूट मैपिंग कर सकते हैं, जिससे रूटिंग व्यवस्था काफी आसान हो जाती है।
• मॉड्यूलर डिजाइन: समृद्ध मॉड्यूल इकोसिस्टम – जैसे Axios, PWA और CMS इंटीग्रेशन – को बड़ी आसानी से जोड़ा जा सकता है।
• कन्वेंशन ओवर कॉन्फ़िगरेशन: यह डिरेक्टरी स्ट्रक्चर और नामकरण के कुछ मानकों का पालन करता है, जिससे जम्पिल कॉन्फ़िगरेशन की जरूरत घट जाती है।
• बेहतरीन डेवेलपर एक्सपीरियंस: हॉट मॉड्यूल रीलोड (HMR), एरर रिपोर्टिंग, आदि जैसी खूबियां विकास को तेज एवं सुगम बनाती हैं।

इन खूबियों की सहायता से आप Nuxt.js की मदद से जटिल, परफॉर्मेंस-समर्थ और SEO-फ्रेंडली वेब ऐप्लिकेशन को अधिक एफिशिएंट और सहजता से बना सकते हैं।

ServBay में Nuxt.js प्रोजेक्ट को कॉन्फ़िगर और रन करें

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

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

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

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

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

हम create-nuxt-app CLI का इस्तेमाल करके जल्दी एक नया Nuxt.js प्रोजेक्ट बनाएँगे।

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

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

   cd /Applications/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 framework चुनें
   ? Nuxt.js modules: Axios      # जरूरत हो तो Nuxt.js के मॉड्यूल सेलेक्ट करें
   ? Linting tools: ESLint       # लिंटिंग टूल्स चुनें
   ? Testing framework: None     # टेस्टिंग फ्रेमवर्क चुनें
   ? Rendering mode: Universal (SSR / SSG) # 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

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

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

सत्यापन हेतु, हम होमपेज फाइल को इतना बदलेंगे कि वह सादा "Hello ServBay!" दिखाए।

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 प्रॉपर्टी style टैग में जोड़ दी गई है, जिससे स्टाइल केवल इसी कॉम्पोनेंट पर लागू होगी—और आउटपुट थोड़ा खूबसूरत हो जाएगा।

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

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

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

   प्रोजेक्ट रूट डायरेक्टरी में जाकर यह कमांड चलाएं। हम पोर्ट को 8585 सेट कर रहे हैं, लेकिन आप कोई अन्य उपलब्ध पोर्ट भी उपयोग कर सकते हैं:

   cd /Applications/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 का प्रयोग एक अच्छा ServBay ब्रांड अभ्यास है।
   • वेबसाइट प्रकार (Website Type): रिवर्स प्रॉक्सी (Reverse Proxy) चुनें।
   • IP एड्रेस (IP Address): 127.0.0.1 भरें (लोकल होस्ट)।
   • पोर्ट (Port): वही पोर्ट दें, जो आप Nuxt.js डेव सर्वर के लिए इस्तेमाल कर रहे हैं—यहाँ 8585 है।

   सेटिंग्स के बाद "Add" या "Save" पर क्लिक करें। ServBay ऑटोमेटिकली आपकी कॉन्फ़िगरेशन को अपडेट एवं सक्रिय कर देगा।

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

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

   अपना वेब ब्राउज़र खोलें और सेट किए हुए डोमेन पर जाएं—उदाहरण के लिए https://nuxt-dev.servbay.demo।

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

प्रोडक्शन बिल्ड बनाएं और रन करें

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

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

   प्रोजेक्ट रूट पर यह कमांड चलाएं। npm run build कोड कम्पाइल करेगा, व npm run export आपकी सभी रूट्स के अनुसार स्टैटिक HTML फाइलें आउटपुट डायरेक्टरी (मूलतः dist) में बनाएगा।

   cd /Applications/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) चुनें।
   • वेबसाइट रूट (Website Root): Nuxt.js द्वारा बनायी गई स्टैटिक फाइल्स का पथ दें; यानी /Applications/ServBay/www/servbay-nuxt-app/dist।

   सेटिंग्स अप्ली करने के लिए "Add" या "Save" दबाएँ। ServBay आपके लिए सेटिंग्स सक्रिय कर देगा।

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

   ब्राउज़र खोलें और अपने चुने हुए डोमेन पर जाएं—जैसे https://nuxt-prod.servbay.demo।

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

सारांश

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