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 सीएलआई को यह ज़रूरी है कि आपके ऐप्लिकेशन को बनाने में सक्षम हो सकता है और यह पता लगा सकेगा कि आपका टूल, एसेट को कहां सेव करता है. जो Hosting के लिए भेजी गई है. यह काम, एनपीएम बिल्ड स्क्रिप्ट और सीजेएस की मदद से किया जाता है package.json में डायरेक्ट्री डायरेक्टिव.

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

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

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