ExpressJS দিয়ে ওয়েব অ্যাপ্লিকেশন তৈরি করার সময় স্ট্যাটিক ফাইল যেমন CSS, JavaScript এবং ইমেজ লোড করা একটি সাধারণ কাজ। ExpressJS-এ স্ট্যাটিক ফাইল সার্ভ করার জন্য একটি বিশেষ মিডলওয়্যার express.static() ব্যবহৃত হয়। এটি ব্যবহারকারীদের স্ট্যাটিক ফাইল সরবরাহ করতে সক্ষম করে, যেমন CSS ফাইল, JavaScript ফাইল, ছবি ইত্যাদি।
১. স্ট্যাটিক ফাইল সার্ভ করার জন্য express.static() ব্যবহার করা
ExpressJS-এ স্ট্যাটিক ফাইল সরবরাহ করতে আপনাকে express.static() মিডলওয়্যার ব্যবহার করতে হবে। এটি এক বা একাধিক ফোল্ডার থেকে স্ট্যাটিক ফাইল সরবরাহ করতে পারে।
১.১. express.static() ব্যবহার করা
ধরা যাক, আপনার অ্যাপ্লিকেশনটির স্ট্যাটিক ফাইলগুলি public নামক একটি ফোল্ডারে রয়েছে। ExpressJS-এ এই ফোল্ডারের ফাইলগুলোকে ক্লায়েন্টে সরবরাহ করতে express.static() ব্যবহার করা হবে।
const express = require('express');
const app = express();
const port = 3000;
// public ফোল্ডার থেকে স্ট্যাটিক ফাইল সার্ভ করা
app.use(express.static('public'));
// হোম পেজ রাউট
app.get('/', (req, res) => {
res.send('Welcome to my Express app!');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
এখানে, express.static('public') ফোল্ডার থেকে সব ধরনের স্ট্যাটিক ফাইল সরবরাহ করতে সক্ষম হবে। এই ফোল্ডারের ভিতরে থাকা CSS, JavaScript, এবং ইমেজ ফাইলগুলো ক্লায়েন্টে অ্যাক্সেস করা যাবে।
১.২. ফোল্ডার স্ট্রাকচার
এখন, একটি সাধারণ ফোল্ডার স্ট্রাকচার দেখি যেখানে public ফোল্ডারে স্ট্যাটিক ফাইল রাখা হয়েছে:
my-express-app/
│
├── public/ # স্ট্যাটিক ফাইল
│ ├── css/ # CSS ফাইল
│ │ └── style.css
│ ├── js/ # JavaScript ফাইল
│ │ └── script.js
│ └── images/ # ইমেজ ফাইল
│ └── logo.png
├── app.js # Express অ্যাপ্লিকেশন
└── package.json # প্যাকেজ কনফিগারেশন
এখন, স্ট্যাটিক ফাইলগুলো এইভাবে অ্যাক্সেস করা যাবে:
- CSS ফাইল:
http://localhost:3000/css/style.css - JavaScript ফাইল:
http://localhost:3000/js/script.js - ইমেজ ফাইল:
http://localhost:3000/images/logo.png
১.৩. HTML ফাইলের মধ্যে স্ট্যাটিক ফাইল লোড করা
আপনি HTML ফাইলে স্ট্যাটিক ফাইল লোড করার জন্য সঠিক পাথ ব্যবহার করবেন। ধরুন, আপনি style.css ফাইলটি এবং script.js ফাইলটি HTML পেজে লোড করতে চান:
<!-- index.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>
এখন, আপনি যদি ব্রাউজারে http://localhost:3000 তে যান, আপনি আপনার স্ট্যাটিক ফাইলগুলো দেখতে পাবেন, যেমন style.css, script.js, এবং logo.png।
২. অন্যান্য কনফিগারেশন
২.১. একাধিক স্ট্যাটিক ফোল্ডার সরবরাহ করা
আপনি একাধিক স্ট্যাটিক ফোল্ডার সরবরাহ করতে express.static() মিডলওয়্যার একাধিকবার ব্যবহার করতে পারেন:
app.use(express.static('public'));
app.use(express.static('assets'));
এতে public এবং assets দুটি ফোল্ডার থেকে ফাইল সরবরাহ করা যাবে।
২.২. স্ট্যাটিক ফাইলের জন্য ভেরিয়েবল পাথ
আপনি যদি কিছু স্ট্যাটিক ফাইলের জন্য কাস্টম পাথ বা নাম নির্ধারণ করতে চান, তাহলে express.static() মিডলওয়্যার ব্যবহার করতে পারেন:
app.use('/static', express.static('public'));
এখানে /static পাথ দিয়ে ফোল্ডারের ফাইল সরবরাহ করা হবে, অর্থাৎ স্ট্যাটিক ফাইল অ্যাক্সেস করার জন্য আপনাকে http://localhost:3000/static/css/style.css এ যেতে হবে।
৩. স্ট্যাটিক ফাইল কাস্টমাইজেশন
৩.১. Cache Control
ExpressJS আপনাকে স্ট্যাটিক ফাইলের জন্য ক্যাশ কন্ট্রোলও কনফিগার করার সুযোগ দেয়। আপনি maxAge প্রপার্টি ব্যবহার করে ক্যাশিং সিস্টেম সেট করতে পারেন:
app.use(express.static('public', {
maxAge: '1d' // 1 দিন পর্যন্ত ক্যাশ করা হবে
}));
৩.২. স্ট্যাটিক ফাইলের জন্য Content-Type সেট করা
ExpressJS স্বয়ংক্রিয়ভাবে সঠিক Content-Type (যেমন: text/css, application/javascript, image/png) নির্ধারণ করে স্ট্যাটিক ফাইল পাঠায়। তবে, আপনি কাস্টম Content-Type সেট করার জন্য মিডলওয়্যারও ব্যবহার করতে পারেন:
app.use('/images', express.static('public/images', {
setHeaders: (res, path, stat) => {
res.set('x-timestamp', Date.now());
}
}));
সারাংশ
ExpressJS-এ স্ট্যাটিক ফাইল সরবরাহ করার জন্য express.static() মিডলওয়্যার ব্যবহার করা হয়, যা ফোল্ডার থেকে ফাইল সরবরাহ করতে সহায়তা করে। আপনি CSS, JavaScript, ইমেজসহ যেকোনো স্ট্যাটিক ফাইলকে আপনার ওয়েব পেজে ব্যবহার করতে পারবেন। স্ট্যাটিক ফাইলের জন্য আপনি একাধিক ফোল্ডার ব্যবহার করতে পারেন, ক্যাশ কন্ট্রোল সেট করতে পারেন এবং কাস্টম পাথও নির্ধারণ করতে পারেন।
Read more
