Express.js এর সাথে অন্যান্য ফ্রেমওয়ার্ক একত্রিত করুন

কিছু অতিরিক্ত কনফিগারেশনের সাহায্যে, আপনি Angular এবং Next.js ব্যতীত অন্যান্য ফ্রেমওয়ার্কগুলিতে ইন্টিগ্রেশন সাপোর্ট প্রসারিত করার জন্য মৌলিক ফ্রেমওয়ার্ক-সচেতন CLI কার্যকারিতা তৈরি করতে পারেন।

শুরু করার আগে

Firebase-এ আপনার অ্যাপ স্থাপন শুরু করার আগে, নিম্নলিখিত প্রয়োজনীয়তা এবং বিকল্পগুলি পর্যালোচনা করুন:

  • Firebase CLI ভার্সন ১২.১.০ বা তার পরবর্তী। আপনার পছন্দের পদ্ধতি ব্যবহার করে CLI ইনস্টল করতে ভুলবেন না।
  • ঐচ্ছিক: আপনার Firebase প্রকল্পে বিলিং সক্ষম করা হয়েছে (যদি আপনি SSR ব্যবহার করার পরিকল্পনা করেন তবে প্রয়োজন)

ফায়ারবেস আরম্ভ করুন

শুরু করতে, আপনার ফ্রেমওয়ার্ক প্রকল্পের জন্য Firebase আরম্ভ করুন। একটি নতুন প্রকল্পের জন্য Firebase CLI ব্যবহার করুন, অথবা একটি বিদ্যমান প্রকল্পের জন্য firebase.json পরিবর্তন করুন।

একটি নতুন প্রকল্প শুরু করুন

  1. Firebase CLI-তে, ওয়েব ফ্রেমওয়ার্ক প্রিভিউ সক্ষম করুন:
    firebase experiments:enable webframeworks
  2. CLI থেকে initialization কমান্ডটি চালান এবং তারপর প্রম্পটগুলি অনুসরণ করুন:

    firebase init hosting

  3. "আপনি কি একটি ওয়েব ফ্রেমওয়ার্ক ব্যবহার করতে চান? (পরীক্ষামূলক)" প্রশ্নের উত্তর হ্যাঁ দিন।

  4. আপনার হোস্টিং সোর্স ডিরেক্টরিটি বেছে নিন; এটি একটি বিদ্যমান ওয়েব অ্যাপ হতে পারে।

  5. যদি অনুরোধ করা হয়, Express.js / custom নির্বাচন করুন

একটি বিদ্যমান প্রকল্প শুরু করুন

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 এর মতো একটি টুল ব্যবহার করার কথা বিবেচনা করুন। Rendertron আপনাকে আপনার অ্যাপের স্থানীয় ইনস্ট্যান্সের বিরুদ্ধে হেডলেস Chrome অনুরোধ করতে দেবে, যাতে আপনি Hosting এ পরিবেশিত HTML সংরক্ষণ করতে পারেন।

অবশেষে, বিভিন্ন ফ্রেমওয়ার্ক এবং বিল্ড টুল তাদের আর্টিফ্যাক্টগুলিকে বিভিন্ন জায়গায় সংরক্ষণ করে। directories.serve ব্যবহার করে 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"
    },
    "directories": {
        "serve": "dist"
    },
    
}

স্থাপন করুন

আপনার অ্যাপটি কনফিগার করার পরে, আপনি স্ট্যান্ডার্ড ডিপ্লয়মেন্ট কমান্ডের সাহায্যে স্ট্যাটিক কন্টেন্ট পরিবেশন করতে পারেন:

firebase deploy

গতিশীল কন্টেন্ট পরিবেশন করুন

Cloud Functions for Firebase আপনার Express অ্যাপটি পরিবেশন করতে, নিশ্চিত করুন যে আপনার Express অ্যাপ (অথবা express-style URL হ্যান্ডলার) এমনভাবে এক্সপোর্ট করা হয়েছে যাতে আপনার লাইব্রেরি npm প্যাক করার পরে 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;
}

অথবা যদি আপনি একটি এক্সপ্রেস-স্টাইল URL হ্যান্ডলার রপ্তানি করতে চান, তাহলে এর নাম দিন handle :

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

স্থাপন করুন

firebase deploy

এটি আপনার স্ট্যাটিক কন্টেন্টকে Firebase Hosting এ স্থাপন করে এবং Firebase-কে Cloud Functions for Firebase এ হোস্ট করা আপনার Express অ্যাপে ফিরে যেতে দেয়।

ঐচ্ছিক: Firebase প্রমাণীকরণের সাথে একীভূত করুন

ওয়েব ফ্রেমওয়ার্ক-সচেতন Firebase ডিপ্লয় টুলিং কুকিজ ব্যবহার করে স্বয়ংক্রিয়ভাবে ক্লায়েন্ট এবং সার্ভারের অবস্থা সিঙ্কে রাখবে। প্রমাণীকরণ প্রসঙ্গ অ্যাক্সেস করার জন্য, Express res.locals অবজেক্টে ঐচ্ছিকভাবে একটি প্রমাণিত Firebase অ্যাপ ইনস্ট্যান্স ( firebaseApp ) এবং বর্তমানে সাইন ইন করা ব্যবহারকারী ( currentUser ) থাকে।