কিছু অতিরিক্ত কনফিগারেশনের সাথে, আপনি Angular এবং Next.js ছাড়া অন্য ফ্রেমওয়ার্কগুলিতে ইন্টিগ্রেশন সমর্থন প্রসারিত করতে মৌলিক কাঠামো-সচেতন CLI কার্যকারিতা তৈরি করতে পারেন।
তুমি শুরু করার আগে
Firebase-এ আপনার অ্যাপ স্থাপন শুরু করার আগে, নিম্নলিখিত প্রয়োজনীয়তা এবং বিকল্পগুলি পর্যালোচনা করুন:
- Firebase CLI সংস্করণ 12.1.0 বা তার পরে। আপনার পছন্দের পদ্ধতি ব্যবহার করে সিএলআই ইনস্টল করা নিশ্চিত করুন।
ঐচ্ছিক: আপনার ফায়ারবেস প্রজেক্টে বিলিং সক্ষম করা হয়েছে (আপনি যদি SSR ব্যবহার করার পরিকল্পনা করেন তাহলে প্রয়োজন)
ঐচ্ছিক: আপনার ফায়ারবেস প্রজেক্টে বিলিং সক্ষম করা হয়েছে (আপনি যদি SSR ব্যবহার করার পরিকল্পনা করেন তাহলে প্রয়োজন)
ফায়ারবেস শুরু করুন
শুরু করতে, আপনার ফ্রেমওয়ার্ক প্রকল্পের জন্য Firebase শুরু করুন। একটি নতুন প্রকল্পের জন্য Firebase CLI ব্যবহার করুন, অথবা একটি বিদ্যমান প্রকল্পের জন্য firebase.json পরিবর্তন করুন৷
একটি নতুন প্রকল্প শুরু করুন
- Firebase CLI-তে, ওয়েব ফ্রেমওয়ার্কের পূর্বরূপ সক্ষম করুন:
firebase experiments:enable webframeworks
CLI থেকে শুরু করার কমান্ডটি চালান এবং তারপরে প্রম্পটগুলি অনুসরণ করুন:
firebase init hosting
হ্যাঁ উত্তর দিন "আপনি কি একটি ওয়েব ফ্রেমওয়ার্ক ব্যবহার করতে চান? (পরীক্ষামূলক)"
আপনার হোস্টিং উৎস ডিরেক্টরি নির্বাচন করুন; এটি একটি বিদ্যমান ওয়েব অ্যাপ হতে পারে।
অনুরোধ করা হলে, Express.js/ custom বেছে নিন
একটি বিদ্যমান প্রকল্প শুরু করুন
একটি public বিকল্পের পরিবর্তে একটি source বিকল্প পেতে firebase.json এ আপনার হোস্টিং কনফিগারেশন পরিবর্তন করুন। উদাহরণ স্বরূপ:
{
"hosting": {
"source": "./path-to-your-express-directory"
}
}
স্ট্যাটিক কন্টেন্ট পরিবেশন
স্ট্যাটিক কন্টেন্ট স্থাপন করার আগে, আপনাকে আপনার অ্যাপ্লিকেশন কনফিগার করতে হবে।
সজ্জিত করা
আপনার অ্যাপ্লিকেশন কীভাবে স্থাপন করতে হয় তা জানার জন্য, Firebase CLI-কে আপনার অ্যাপ তৈরি করতে এবং আপনার টুলিং হোস্টিংয়ের জন্য নির্ধারিত সম্পদগুলিকে কোথায় রাখে তা জানতে হবে। এটি npm বিল্ড স্ক্রিপ্ট এবং package.json এ 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 এর মতো একটি টুল ব্যবহার করার কথা বিবেচনা করুন। রেন্ডারট্রন আপনাকে আপনার অ্যাপের একটি স্থানীয় দৃষ্টান্তের বিরুদ্ধে হেডলেস ক্রোম অনুরোধ করার অনুমতি দেবে, যাতে আপনি হোস্টিং-এ পরিবেশন করার জন্য ফলস্বরূপ HTML সংরক্ষণ করতে পারেন।
অবশেষে, বিভিন্ন ফ্রেমওয়ার্ক এবং বিল্ড টুল বিভিন্ন জায়গায় তাদের শিল্পকর্ম সংরক্ষণ করে। CLI কে জানাতে 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 এটি খুঁজে পেতে পারে।
এটি সম্পন্ন করার জন্য, নিশ্চিত করুন যে আপনার 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-এর জন্য ক্লাউড ফাংশনে হোস্ট করা আপনার এক্সপ্রেস অ্যাপে ফিরে আসার অনুমতি দেয়।
ঐচ্ছিক: Firebase প্রমাণীকরণের সাথে একীভূত করুন
ওয়েব ফ্রেমওয়ার্ক-সচেতন Firebase ডিপ্লোয় টুলিং স্বয়ংক্রিয়ভাবে ক্লায়েন্ট এবং সার্ভারের অবস্থা কুকিজ ব্যবহার করে সিঙ্কে রাখবে। প্রমাণীকরণ প্রসঙ্গে অ্যাক্সেস করতে, এক্সপ্রেস res.locals অবজেক্টে ঐচ্ছিকভাবে একটি প্রমাণীকৃত ফায়ারবেস অ্যাপ ইনস্ট্যান্স ( firebaseApp ) এবং বর্তমানে সাইন ইন করা ব্যবহারকারী ( currentUser ) থাকে।