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

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

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

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

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

Firebase CLI को यह पता होना चाहिए कि आपके ऐप्लिकेशन को कैसे डिप्लॉय किया जाए. इसके लिए, 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 CLI सिर्फ़ आपकी बिल्ड स्क्रिप्ट को कॉल करता है. इसलिए, आपको यह पक्का करना होगा कि आपकी बिल्ड स्क्रिप्ट पूरी हो.

{
    "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

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

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

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