Serving Static Files in Express.js

ওয়েব অ্যাপ্লিকেশনে আমরা অনেক সময় ইমেজ, CSS, JavaScript বা অন্যান্য স্ট্যাটিক ফাইল সার্ভার থেকে লোড করি। Express.js এই কাজটি খুব সহজ করে দিয়েছে express.static() middleware ব্যবহার করে। এই টপিকে আমরা বিস্তারিতভাবে শিখব কিভাবে Express এ স্ট্যাটিক ফাইল সার্ভ করা যায়।

🟢 Static Files কী?

Static files হল এমন ফাইল যেগুলো সার্ভার পরিবর্তন করে না— যেমন:

• Images (jpg, png, svg)
• CSS files
• JavaScript frontend files
• PDF, docs
• HTML files

ইউজার যখন এই ফাইলগুলো রিকোয়েস্ট করে, Express.js সরাসরি এগুলো রেসপন্স হিসেবে পাঠিয়ে দেয়।

🟦 কিভাবে Express এ Static Files সার্ভ করবেন?

Express.js এ স্ট্যাটিক ফাইল সার্ভ করতে express.static() middleware ব্যবহার করা হয়।

✔ Step 1: একটি public ফোল্ডার তৈরি করুন

project/
│── public/
│     ├── css/
│     ├── js/
│     ├── images/
│── app.js
    

✔ Step 2: express.static() middleware ব্যবহার করুন

const express = require('express');
const app = express();

// Serve static files
app.use(express.static('public'));

app.listen(5000, () => {
    console.log("Server running on port 5000");
});
    

এখন public ফোল্ডারের যেকোনো ফাইল ব্রাউজারে সরাসরি অ্যাক্সেস করা যাবে।

📌 Example – Accessing a File

যদি public/images/logo.png থাকে, URL হবে:

http://localhost:5000/images/logo.png
    

🟩 Custom Static Path ব্যবহার করা

কখনও কখনও আমরা চাই URL path এর শুরুতে একটি কাস্টম prefix যোগ করতে।

app.use('/static', express.static('public'));
    

এখন ফাইলের URL হবে:

http://localhost:5000/static/images/logo.png
    

🟣 Multiple Static Folder সার্ভ করা

app.use(express.static('public'));
app.use(express.static('assets'));
    

Express একসাথে একাধিক ডিরেক্টরি থেকে স্ট্যাটিক ফাইল সার্ভ করতে পারে।

🟠 Absolute Path ব্যবহার (Recommended)

সঠিক path ব্যবহারের জন্য path module ব্যবহার করা ভালো।

const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));
    

🟤 Static HTML File Serve করা

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'));
});
    

🧩 Best Practices for Static Files

• সব স্ট্যাটিক ফাইল public বা assets ফোল্ডারে রাখুন
• Absolute path ব্যবহার করুন
• CDN ব্যবহার করলে লোড টাইম কমে
• Static files এর জন্য proper caching সেট করুন
• সংবেদনশীল ফাইল কখনও public এ রাখবেন না

🎯 Conclusion

Express.js এ static files সার্ভ করা অত্যন্ত সহজ। শুধু express.static() middleware ব্যবহার করলেই আপনার CSS, JS, image বা PDF ফাইল সরাসরি ব্রাউজারে অ্যাক্সেসযোগ্য হয়ে যায়। ওয়েব অ্যাপ্লিকেশনের UI অংশ তৈরি করতে static files খুবই গুরুত্বপূর্ণ।