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

कुछ अतिरिक्त कॉन्फ़िगरेशन की मदद से, बुनियादी फ़्रेमवर्क के बारे में जानकारी देने वाले सीएलआई फ़ंक्शन को बेहतर बनाया जा सकता है. इससे Angular और Next.js के अलावा, दूसरे फ़्रेमवर्क के लिए इंटिग्रेशन सहायता उपलब्ध कराई जा सकती है.

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

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

• Firebase सीएलआई का 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 के लिए बनाई गई एसेट को कहां रखती है. यह package.json में npm बिल्ड स्क्रिप्ट और CJS डायरेक्ट्री डायरेक्टिव की मदद से किया जाता है.

नीचे दी गई Package.json की वैल्यू यह है:

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

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

{
    "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 जैसे टूल का इस्तेमाल करें. 'रेंडरट्रॉन' की मदद से, अपने ऐप्लिकेशन के किसी लोकल इंस्टेंस के लिए, 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

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

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

ऐसा करने के लिए, पक्का करें कि आपके 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 नाम वाले फ़ंक्शन से अपना एक्सप्रेस ऐप्लिकेशन एक्सपोर्ट करें:

// 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 से पुष्टि करने की सुविधा के साथ इंटिग्रेट करना

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