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

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

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

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

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

Firebase शुरू करें

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

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

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

   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 सीएलआई को आपका ऐप्लिकेशन बनाने और यह जानने में सक्षम होना चाहिए कि आपका टूल, होस्टिंग के लिए इस्तेमाल की जाने वाली ऐसेट को कहां सेव करता है. यह काम, 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 के हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) अनुरोध करने की सुविधा मिलती है, ताकि आप नतीजे के तौर पर मिले एचटीएमएल को होस्टिंग पर सेव करने के लिए उसका इस्तेमाल कर सकें.

आखिर में, अलग-अलग फ़्रेमवर्क और बिल्ड टूल अपने आर्टफ़ैक्ट को अलग-अलग जगहों पर सेव करते हैं. सीएलआई को यह बताने के लिए 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

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

'Firebase के लिए Cloud Functions' पर अपना एक्सप्रेस ऐप्लिकेशन दिखाने के लिए, पक्का करें कि आपका एक्सप्रेस ऐप्लिकेशन (या एक्सप्रेस-स्टाइल यूआरएल हैंडलर) इस तरह से एक्सपोर्ट किया गया हो कि आपकी लाइब्रेरी के एनपीएम से पैक हो जाने के बाद, 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 होस्टिंग में डिप्लॉय करता है और Firebase को Cloud Functions for Firebase पर होस्ट किए गए आपके एक्सप्रेस ऐप्लिकेशन पर वापस जाने की अनुमति देता है.

ज़रूरी नहीं: Firebase से पुष्टि करने की सुविधा के साथ इंटिग्रेट करना

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