ExpressJS অ্যাপ্লিকেশনে স্ট্যাটিক ফাইল যেমন CSS, JavaScript, ইমেজ, বা ফন্ট ফাইল সরবরাহ করতে public directory ব্যবহার করা হয়। Express এ স্ট্যাটিক ফাইল সার্ভ করার জন্য express.static মিডলওয়্যার ব্যবহার করা হয়। এটি একটি নির্দিষ্ট ডিরেক্টরি থেকে ফাইল সরবরাহ করে, যা ক্লায়েন্টের কাছে সরাসরি অ্যাক্সেসযোগ্য হয়।
Public Directory কনফিগারেশন কীভাবে করবেন?
একটি Express অ্যাপ্লিকেশনে স্ট্যাটিক ফাইল সরবরাহ করতে, আপনাকে একটি public নামক ডিরেক্টরি তৈরি করতে হবে, যেখানে আপনার CSS, JavaScript, ইমেজ এবং অন্যান্য স্ট্যাটিক ফাইল থাকবে। এরপর, express.static মিডলওয়্যার ব্যবহার করে এই ফোল্ডারটি অ্যাপ্লিকেশনে যুক্ত করতে হবে।
১. Public Directory তৈরি করা
প্রথমে আপনার অ্যাপ্লিকেশন ডিরেক্টরিতে একটি public ফোল্ডার তৈরি করুন। উদাহরণস্বরূপ:
my-express-app/
│
├── public/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.png
├── app.js
└── package.json
এখানে, public ফোল্ডারটি css/, js/, এবং images/ নামক সাবফোল্ডার ধারণ করে। এই ফোল্ডারগুলিতে আপনার স্ট্যাটিক ফাইলগুলি রাখা হবে।
২. Public Directory কনফিগার করা
আপনার Express অ্যাপ্লিকেশনে express.static মিডলওয়্যার ব্যবহার করে public ডিরেক্টরি কনফিগার করতে হবে। এটি করার জন্য, app.js (অথবা আপনার সার্ভার ফাইল) ফাইলে নিচের কোডটি যোগ করুন:
const express = require('express');
const app = express();
const path = require('path');
// public ডিরেক্টরিটি স্ট্যাটিক ফাইল সেবা দেয়ার জন্য কনফিগার করা হচ্ছে
app.use(express.static(path.join(__dirname, 'public')));
// রুট রাউট
app.get('/', (req, res) => {
res.send('Welcome to Express!');
});
// সার্ভার চালু করা
const port = 3000;
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
ব্যাখ্যা:
express.static(): এটি স্ট্যাটিক ফাইল সরবরাহ করার জন্য মিডলওয়্যার। এখানেpath.join(__dirname, 'public')দিয়ে আপনিpublicডিরেক্টরির পাথ সেট করছেন।app.use(): এই ফাংশনটি Express অ্যাপ্লিকেশনে মিডলওয়্যার যুক্ত করার জন্য ব্যবহৃত হয়। এখানে,express.staticমিডলওয়্যারটিpublicডিরেক্টরি থেকে ফাইল সরবরাহ করবে।
৩. স্ট্যাটিক ফাইল ব্যবহার করা
এখন, আপনার public ডিরেক্টরির ফাইলগুলো অ্যাপ্লিকেশন থেকে সরাসরি অ্যাক্সেসযোগ্য। উদাহরণস্বরূপ:
- CSS ফাইল:
public/css/style.css - JavaScript ফাইল:
public/js/script.js - ইমেজ ফাইল:
public/images/logo.png
এখন, HTML টেমপ্লেটে এই ফাইলগুলো লোড করা যেতে পারে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express App</title>
<link rel="stylesheet" href="/css/style.css"> <!-- CSS ফাইল -->
</head>
<body>
<h1>Welcome to My Express App</h1>
<img src="/images/logo.png" alt="Logo"> <!-- ইমেজ ফাইল -->
<script src="/js/script.js"></script> <!-- JavaScript ফাইল -->
</body>
</html>
এখানে:
/css/style.css: Express সার্ভার/cssপাথের মাধ্যমেpublic/css/style.cssফাইলটি ক্লায়েন্টকে সরবরাহ করবে।/images/logo.png: একইভাবে/imagesপাথের মাধ্যমে ইমেজ ফাইল সরবরাহ করা হবে।
৪. স্ট্যাটিক ফাইলের অন্যান্য কনফিগারেশন
আপনি চাইলে একাধিক স্ট্যাটিক ফোল্ডারও কনফিগার করতে পারেন। উদাহরণস্বরূপ, যদি আপনি একটি uploads ফোল্ডার তৈরি করেন, যেখানে ব্যবহারকারীরা আপলোড করা ফাইল রাখবেন, তবে এটি কনফিগার করতে পারেন:
// uploads ফোল্ডার থেকে ফাইল সরবরাহ করা
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
এখানে, express.static মেথড /uploads রুটের মাধ্যমে uploads ফোল্ডার থেকে ফাইল সরবরাহ করবে। এখন, আপনি http://localhost:3000/uploads/filename.jpg এর মাধ্যমে আপলোড করা ফাইল অ্যাক্সেস করতে পারবেন।
৫. Public Directory-এর নিরাপত্তা
স্ট্যাটিক ফাইল সরবরাহ করার সময় কিছু নিরাপত্তা বিষয় খেয়াল রাখতে হবে:
- শুধুমাত্র প্রয়োজনীয় স্ট্যাটিক ফাইল
publicডিরেক্টরি থেকে সরবরাহ করুন। - আপনি যদি নির্দিষ্ট ফাইল এক্সটেনশনের জন্য স্ট্যাটিক ফাইল সার্ভ করতে চান (যেমন
.css,.js,.jpg), তবে একটি কাস্টম মিডলওয়্যার তৈরি করতে পারেন যা শুধুমাত্র নির্দিষ্ট ফাইল এক্সটেনশনগুলোকে অনুমতি দেবে।
সারাংশ
ExpressJS-এ public directory কনফিগারেশন স্ট্যাটিক ফাইল যেমন CSS, JavaScript, ইমেজ এবং অন্যান্য ফাইল সরবরাহ করার জন্য অত্যন্ত গুরুত্বপূর্ণ। express.static মিডলওয়্যার ব্যবহার করে আপনি এই ফাইলগুলো সঠিকভাবে অ্যাপ্লিকেশন থেকে সরবরাহ করতে পারেন। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সাহায্য করে এবং ক্লায়েন্টদের দ্রুত ও সহজে প্রয়োজনীয় রিসোর্স সরবরাহ করতে সক্ষম হয়।
Read more
