ExpressJS-এ স্ট্যাটিক ফাইল সার্ভ করা খুবই সহজ। স্ট্যাটিক ফাইলের মধ্যে CSS, JavaScript, ইমেজ, ফন্ট, অথবা অন্য যেকোনো ফাইল অন্তর্ভুক্ত থাকতে পারে, যা আপনি সরাসরি ব্রাউজারে প্রদর্শন করতে চান। ExpressJS এ স্ট্যাটিক ফাইল সার্ভ করার জন্য express.static মিডলওয়্যার ব্যবহার করা হয়।
১. স্ট্যাটিক ফাইল সার্ভ করার জন্য ফোল্ডার তৈরি করা
প্রথমে একটি ফোল্ডার তৈরি করুন যেখানে আপনি আপনার স্ট্যাটিক ফাইলগুলো রাখবেন। সাধারণত এই ফোল্ডারটির নাম public রাখা হয়, কিন্তু আপনি আপনার প্রয়োজন অনুযায়ী অন্য নামও ব্যবহার করতে পারেন।
উদাহরণ:
my-express-app/
├── public/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── script.js
│ └── images/
│ └── logo.png
├── app.js
└── package.json
এই উদাহরণে, public ফোল্ডারে css/, js/, এবং images/ নামের সাবফোল্ডার রয়েছে, যেখানে যথাক্রমে CSS, JavaScript, এবং ইমেজ ফাইল রাখা হয়েছে।
২. express.static মিডলওয়্যার ব্যবহার করা
ExpressJS-এ স্ট্যাটিক ফাইল সার্ভ করার জন্য express.static মিডলওয়্যার ব্যবহার করতে হবে। এটি আপনার অ্যাপ্লিকেশনের স্ট্যাটিক ফোল্ডারকে ক্লায়েন্টের কাছে প্রকাশ করে।
app.js ফাইলের উদাহরণ:
const express = require('express');
const app = express();
const port = 3000;
// স্ট্যাটিক ফাইল সরবরাহ করতে express.static ব্যবহার করা
app.use(express.static('public'));
// রুট রাউট
app.get('/', (req, res) => {
res.send('Hello, Express with Static Files!');
});
// সার্ভার শুরু করুন
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
এখানে app.use(express.static('public')); এই লাইনে আমরা public ফোল্ডারটি স্ট্যাটিক ফাইল সরবরাহের জন্য ব্যবহার করছি। এর মানে হলো, public ফোল্ডারে যেকোনো ফাইলকে সরাসরি ব্রাউজারে অ্যাক্সেস করা যাবে।
৩. স্ট্যাটিক ফাইল অ্যাক্সেস করা
এখন, আপনি স্ট্যাটিক ফাইলগুলোকে সরাসরি URL দিয়ে ব্রাউজারে অ্যাক্সেস করতে পারবেন। উদাহরণস্বরূপ:
- CSS ফাইল:
http://localhost:3000/css/style.css - JavaScript ফাইল:
http://localhost:3000/js/script.js - ইমেজ ফাইল:
http://localhost:3000/images/logo.png
এটি আপনার স্ট্যাটিক ফাইলগুলোকে ক্লায়েন্টদের কাছে সহজেই সরবরাহ করতে সাহায্য করবে।
৪. HTML ফাইলে স্ট্যাটিক ফাইল লিঙ্ক করা
এখন, আপনার HTML ফাইলগুলোতে স্ট্যাটিক ফাইলগুলি যুক্ত করতে হবে। ধরুন আপনার একটি index.html ফাইল আছে এবং আপনি এতে CSS ও JavaScript ফাইল যুক্ত করতে চান।
উদাহরণ: views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My 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> <!-- স্ট্যাটিক JS ফাইল লিঙ্ক করা -->
</body>
</html>
এখানে, link, img, এবং script ট্যাগের মাধ্যমে CSS, ইমেজ এবং JavaScript ফাইলগুলো ব্রাউজারে লোড হবে। URL-এর মাধ্যমে /css/style.css, /images/logo.png, এবং /js/script.js ফাইলগুলো ExpressJS এর public ফোল্ডার থেকে সরবরাহ করা হবে।
৫. ভিন্ন সাব-ফোল্ডার থেকে ফাইল সার্ভ করা
আপনি চাইলে একাধিক সাব-ফোল্ডার থেকেও স্ট্যাটিক ফাইল সরবরাহ করতে পারেন। উদাহরণস্বরূপ, আপনি যদি আলাদা সাবফোল্ডার assets তৈরি করেন, তবে নিম্নলিখিতভাবে সেটি করতে পারেন:
app.use(express.static('assets'));
এখন, আপনি assets/ ফোল্ডারের যে কোনো ফাইল ব্রাউজারে অ্যাক্সেস করতে পারবেন।
৬. বিশেষ স্ট্যাটিক ফাইল রাউটিং
আপনি যদি স্ট্যাটিক ফাইলগুলোর জন্য বিশেষ রাউটিং করতে চান, যেমন /static রাউট ব্যবহার করে স্ট্যাটিক ফাইল সরবরাহ, তবে আপনি এইভাবে করতে পারেন:
app.use('/static', express.static('public'));
এখন, স্ট্যাটিক ফাইলগুলোকে /static/css, /static/js, এবং /static/images রুটের মাধ্যমে অ্যাক্সেস করা যাবে।
সারাংশ
ExpressJS-এ স্ট্যাটিক ফাইল সরবরাহ করা খুবই সহজ। express.static মিডলওয়্যার ব্যবহার করে আপনি যেকোনো ফোল্ডারকে স্ট্যাটিক ফাইলের জন্য সরবরাহ করতে পারবেন। CSS, JavaScript, ইমেজ ইত্যাদি ফাইলগুলোকে আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে public ফোল্ডারে রেখে ব্রাউজারে সহজে অ্যাক্সেস করা যায়। এই সুবিধাটি ব্যবহার করে আপনি আপনার ওয়েব অ্যাপ্লিকেশন বা সাইটে প্রয়োজনীয় সমস্ত স্ট্যাটিক রিসোর্স সহজে ব্যবহার করতে পারবেন।
Read more
