Express.js की मदद से, दूसरे फ़्रेमवर्क को इंटिग्रेट करना

कुछ अतिरिक्त कॉन्फ़िगरेशन की मदद से, फ़्रेमवर्क के बारे में जानकारी रखने वाले CLI की बुनियादी सुविधाओं को बेहतर बनाया जा सकता है. इससे Angular और Next.js के अलावा, अन्य फ़्रेमवर्क के साथ इंटिग्रेशन की सुविधा को बढ़ाया जा सकता है.

ध्यान दें: फ़्रेमवर्क के बारे में जानकारी रखने वाली Hosting की शुरुआती झलक सार्वजनिक तौर पर उपलब्ध है. इसका मतलब है कि यह सुविधा, आने वाले समय में ऐसे तरीके से बदल सकती है जो मौजूदा वर्शन के साथ काम नहीं करेगी. प्रीव्यू रिलीज़ पर, किसी भी एसएलए या बंद होने से जुड़ी नीति लागू नहीं होती. साथ ही, इस पर सीमित या कोई सहायता नहीं मिल सकती.

शुरू करने से पहले

अपने ऐप्लिकेशन को Firebase पर डिप्लॉय करने से पहले, यहां दी गई ज़रूरी शर्तों और विकल्पों की समीक्षा करें:

• Firebase CLI का वर्शन 12.1.0 या इसके बाद का वर्शन. पक्का करें कि आपने अपने पसंदीदा तरीके का इस्तेमाल करके, सीएलआई इंस्टॉल किया हो.
• ज़रूरी नहीं: आपके Firebase प्रोजेक्ट पर बिलिंग की सुविधा चालू हो (अगर आपको एसएसआर का इस्तेमाल करना है, तो यह ज़रूरी है)

Firebase को चालू करना

शुरू करने के लिए, अपने फ़्रेमवर्क प्रोजेक्ट के लिए Firebase को चालू करें. नए प्रोजेक्ट के लिए Firebase सीएलआई का इस्तेमाल करें या किसी मौजूदा प्रोजेक्ट के लिए firebase.json में बदलाव करें.

नया प्रोजेक्ट शुरू करना

1. Firebase CLI में, वेब फ़्रेमवर्क की झलक दिखाने की सुविधा चालू करें:

   firebase experiments:enable webframeworks

2. सीएलआई से, शुरू करने का निर्देश चलाएं. इसके बाद, दिए गए निर्देशों का पालन करें:

   firebase init hosting

3. "क्या आपको वेब फ़्रेमवर्क का इस्तेमाल करना है? (एक्सपेरिमेंट के तौर पर उपलब्ध)"

4. होस्टिंग सोर्स डायरेक्ट्री चुनें. यह कोई मौजूदा वेब ऐप्लिकेशन हो सकता है.

5. अगर कहा जाए, तो Express.js / कस्टम चुनें

किसी मौजूदा प्रोजेक्ट को शुरू करना

firebase.json में जाकर, होस्टिंग कॉन्फ़िगरेशन बदलें, ताकि आपको public के बजाय source विकल्प मिले. उदाहरण के लिए:

{
  "hosting": {
    "source": "./path-to-your-express-directory"
  }
}

स्टैटिक कॉन्टेंट दिखाना

स्टैटिक कॉन्टेंट डिप्लॉय करने से पहले, आपको अपना ऐप्लिकेशन कॉन्फ़िगर करना होगा.

कॉन्फ़िगर करें

आपके ऐप्लिकेशन को डिप्लॉय करने का तरीका जानने के लिए, Firebase CLI को आपके ऐप्लिकेशन को बनाने और यह जानने में सक्षम होना चाहिए कि आपके टूलिंग से जुड़ी ऐसेट, Hosting के लिए कहां रखी जाती हैं. यह npm बिल्ड स्क्रिप्ट और package.json में CJS डायरेक्ट्री डायरेक्टिव की मदद से किया जाता है.

नीचे दिए गए package.json के लिए:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

Firebase CLI सिर्फ़ आपकी बिल्ड स्क्रिप्ट को कॉल करता है. इसलिए, आपको यह पक्का करना होगा कि आपकी बिल्ड स्क्रिप्ट में सभी ज़रूरी जानकारी शामिल हो.

सलाह: && का इस्तेमाल करके, अतिरिक्त चरण जोड़े जा सकते हैं. अगर आपको कई चरणों में काम करना है, तो शेल स्क्रिप्ट या npm-run-all या wireit जैसे टूल का इस्तेमाल करें.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

अगर आपका फ़्रेमवर्क, प्री-रेंडरिंग की सुविधा के साथ काम नहीं करता है, तो Rendertron जैसे टूल का इस्तेमाल करें. Rendertron की मदद से, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome से, अपने ऐप्लिकेशन के लोकल इंस्टेंस के ख़िलाफ़ अनुरोध किए जा सकते हैं. इससे, आपको Hosting पर दिखाए जाने वाले एचटीएमएल को सेव करने में मदद मिलेगी.

आखिर में, अलग-अलग फ़्रेमवर्क और बिल्ड टूल, अपने आर्टफ़ैक्ट अलग-अलग जगहों पर सेव करते हैं. सीएलआई को यह बताने के लिए directories.serve का इस्तेमाल करें कि आपकी बिल्ड स्क्रिप्ट, नतीजे के तौर पर मिले आर्टफ़ैक्ट को कहां आउटपुट कर रही है:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    …
}

डिप्लॉय करें

अपने ऐप्लिकेशन को कॉन्फ़िगर करने के बाद, स्टैंडर्ड डिप्लॉयमेंट कमांड का इस्तेमाल करके स्टैटिक कॉन्टेंट दिखाया जा सकता है:

firebase deploy

डाइनैमिक कॉन्टेंट दिखाना

अपने Express ऐप्लिकेशन को Cloud Functions for Firebase पर दिखाने के लिए, पक्का करें कि आपका Express ऐप्लिकेशन (या Express-स्टाइल यूआरएल हैंडलर) इस तरह से एक्सपोर्ट किया गया हो कि Firebase उसे npm पैक करने के बाद ढूंढ सके.

इसके लिए, पक्का करें कि आपके files डायरेक्टिव में सर्वर के लिए ज़रूरी सभी चीज़ें शामिल हों. साथ ही, यह भी पक्का करें कि files में आपका मुख्य एंट्री पॉइंट सही तरीके से सेट अप किया गया हो:package.json

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node tools/prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    "files": ["dist", "server.js"],
    "main": "server.js",
    ...
}

app नाम वाले फ़ंक्शन से अपने Express ऐप्लिकेशन को एक्सपोर्ट करें:

// server.js
export function app() {
  const server = express();
   …
   return server;
}

इसके अलावा, अगर आपको एक्सप्रेस-स्टाइल वाला यूआरएल हैंडलर एक्सपोर्ट करना है, तो उसे handle नाम दें:

export function handle(req, res) {
   res.send(‘hello world’);
}

डिप्लॉय करें

firebase deploy

इससे आपका स्टैटिक कॉन्टेंट Firebase Hosting पर डिप्लॉय हो जाता है. साथ ही, Firebase को Cloud Functions for Firebase पर होस्ट किए गए Express ऐप्लिकेशन पर वापस जाने की अनुमति मिल जाती है.

ज़रूरी नहीं: Firebase Authentication के साथ इंटिग्रेट करना

वेब फ़्रेमवर्क के बारे में जानकारी रखने वाला Firebase डिप्लॉयमेंट टूल, कुकी का इस्तेमाल करके क्लाइंट और सर्वर की स्थिति को अपने-आप सिंक करता रहेगा. पुष्टि करने के कॉन्टेक्स्ट को ऐक्सेस करने के लिए, Express res.locals ऑब्जेक्ट में पुष्टि किया गया Firebase ऐप्लिकेशन इंस्टेंस (firebaseApp) और फ़िलहाल साइन इन किया गया उपयोगकर्ता (currentUser) शामिल होता है. हालांकि, ऐसा करना ज़रूरी नहीं है.