Static Files এবং Assets ব্যবস্থাপনা

ExpressJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা আপনাকে স্ট্যাটিক ফাইল এবং অ্যাসেট (যেমন: CSS, JavaScript, ইমেজ ফাইল) সহজেই সরবরাহ করতে সহায়তা করে। স্ট্যাটিক ফাইল হল সেসব ফাইল, যা ব্রাউজারে সরাসরি লোড করা যায় এবং পরিবর্তন হয় না। এগুলির মধ্যে রয়েছে HTML, CSS, JavaScript, ইমেজ, এবং ফন্ট ফাইল। ExpressJS এ স্ট্যাটিক ফাইলের ব্যবস্থাপনা অত্যন্ত সহজ এবং কার্যকরী।

স্ট্যাটিক ফাইল এবং অ্যাসেট কি?

স্ট্যাটিক ফাইল বা অ্যাসেট হল এমন ফাইল, যেগুলির কনটেন্ট বা কন্টেন্টের স্ট্রাকচার অ্যাপ্লিকেশন চালু থাকা অবস্থায় পরিবর্তিত হয় না। সাধারণত এগুলো ব্রাউজারে সরাসরি লোড হয়ে থাকে এবং সার্ভার এগুলিকে কেবল পাঠিয়ে দেয়।

• স্ট্যাটিক ফাইল: CSS, JavaScript, ইমেজ (JPEG, PNG), ফন্ট, PDF ইত্যাদি।
• অ্যাসেট: অ্যাসেট মূলত স্ট্যাটিক ফাইলগুলির সমষ্টি, যেগুলি ওয়েবসাইটের ডিজাইন এবং কার্যকারিতা নিশ্চিত করতে ব্যবহৃত হয়।

ExpressJS এ স্ট্যাটিক ফাইল সরবরাহ

ExpressJS এ স্ট্যাটিক ফাইল সরবরাহ করতে express.static() মিডলওয়্যার ব্যবহার করা হয়। এই মিডলওয়্যারটি স্ট্যাটিক ফাইল সরবরাহ করার জন্য একটি নির্দিষ্ট ডিরেক্টরি উল্লেখ করতে সহায়তা করে।

১. স্ট্যাটিক ফাইল সরবরাহের জন্য express.static() মিডলওয়্যার ব্যবহার করা

ধরা যাক আপনার অ্যাপ্লিকেশনটিতে কিছু CSS, JavaScript, এবং ইমেজ ফাইল রয়েছে। এগুলোকে আপনার অ্যাপে সরবরাহ করতে নিচের পদক্ষেপগুলো অনুসরণ করুন:

১.১. স্ট্যাটিক ফাইল রাখার জন্য একটি ফোল্ডার তৈরি করুন

প্রথমে, আপনার প্রোজেক্টে একটি public ফোল্ডার তৈরি করুন, যেখানে আপনি সমস্ত স্ট্যাটিক ফাইল রাখতে পারবেন:

my-express-app/
│
├── public/
│   ├── images/
│   ├── css/
│   └── js/
├── app.js
└── package.json

১.২. ExpressJS এ স্ট্যাটিক ফোল্ডার যুক্ত করা

express.static() মিডলওয়্যার ব্যবহার করে public ফোল্ডারটি Express অ্যাপে যুক্ত করতে হবে:

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

// স্ট্যাটিক ফাইল সরবরাহের জন্য express.static() মিডলওয়্যার ব্যবহার করা
app.use(express.static('public'));

// রুট রাউট
app.get('/', (req, res) => {
  res.send('Welcome to the Home Page');
});

// সার্ভার শুরু করুন
app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

এখানে app.use(express.static('public')); লাইনটি public ফোল্ডারে থাকা সমস্ত ফাইলকে স্ট্যাটিক ফাইল হিসেবে অ্যাক্সেসযোগ্য করে তোলে। এখন ব্রাউজার থেকে আপনি http://localhost:3000/images/yourimage.jpg অথবা http://localhost:3000/css/style.css এর মতো ইউআরএল দিয়ে স্ট্যাটিক ফাইল অ্যাক্সেস করতে পারবেন।

১.৩. স্ট্যাটিক ফাইল ব্যবহার করা

আপনি HTML বা EJS/Pug/Handlebars টেমপ্লেট ফাইলগুলিতে স্ট্যাটিক ফাইলগুলিকে লিঙ্ক করতে পারেন:

• CSS ফাইল:

  <link rel="stylesheet" href="/css/style.css">
  

• JavaScript ফাইল:

  <script src="/js/app.js"></script>
  

• ইমেজ ফাইল:

  <img src="/images/logo.png" alt="Logo">
  

এভাবে, স্ট্যাটিক ফাইল গুলি সরাসরি ব্রাউজারে লোড হবে।

২. স্ট্যাটিক ফাইলের জন্য সাব-পথ নির্ধারণ করা

আপনি চাইলে স্ট্যাটিক ফাইলের জন্য সাব-পথ নির্ধারণ করতে পারেন। উদাহরণস্বরূপ, আপনি যদি চান যে /assets সাব-পথ দিয়ে সমস্ত স্ট্যাটিক ফাইল অ্যাক্সেস করা হোক, তাহলে আপনি express.static() মিডলওয়্যারকে এমনভাবে ব্যবহার করতে পারেন:

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

এখন, ব্রাউজার থেকে আপনি /assets/images/logo.png অথবা /assets/css/style.css এর মাধ্যমে স্ট্যাটিক ফাইল অ্যাক্সেস করতে পারবেন।

৩. স্ট্যাটিক ফাইলের ক্যাশ কন্ট্রোল

প্রোডাকশন পরিবেশে, স্ট্যাটিক ফাইলের ক্যাশিং খুবই গুরুত্বপূর্ণ। ExpressJS ক্যাশ কন্ট্রোলের জন্য maxAge অপশন প্রদান করে, যা ব্রাউজারে ফাইলের ক্যাশিং সময় সীমা নির্ধারণ করে।

app.use(express.static('public', { maxAge: '1d' }));

এতে স্ট্যাটিক ফাইলগুলো একদিন (24 ঘণ্টা) ধরে ক্যাশে থাকবে, তারপর ব্রাউজার নতুন ফাইলটি রিকোয়েস্ট করবে।

৪. স্ট্যাটিক ফাইলের জন্য নিরাপত্তা

আপনি চাইলে স্ট্যাটিক ফাইলের জন্য বিশেষ নিরাপত্তা বিধান করতে পারেন, যেমন কিছু ফাইলের অ্যাক্সেস নিয়ন্ত্রণ। সাধারণত, ExpressJS এ express.static() মিডলওয়্যার নিজেই নিরাপদভাবে স্ট্যাটিক ফাইল সরবরাহ করে, তবে অতিরিক্ত নিরাপত্তা নিশ্চিত করতে আপনি কিছু কাস্টম মিডলওয়্যার যোগ করতে পারেন।

৫. স্ট্যাটিক ফাইলের জন্য ফাইল সার্ভিং কনফিগারেশন

আপনার অ্যাপ্লিকেশনটি বড় হলে, আপনি স্ট্যাটিক ফাইলগুলির জন্য আলাদা HTTP সার্ভার ব্যবহার করতে পারেন। উদাহরণস্বরূপ, যদি আপনার অ্যাপ্লিকেশনটি প্রোডাকশনে চলে, তখন আপনি একটি CDN (Content Delivery Network) বা নেক্সট-লেভেল সার্ভার (যেমন Nginx) ব্যবহার করতে পারেন।

সারাংশ

ExpressJS-এ স্ট্যাটিক ফাইল সরবরাহ করা খুবই সহজ এবং কার্যকরী। express.static() মিডলওয়্যার ব্যবহার করে আপনি সহজেই CSS, JavaScript, ইমেজ, এবং অন্যান্য অ্যাসেট সরবরাহ করতে পারেন। প্রোডাকশন পরিবেশে স্ট্যাটিক ফাইলের জন্য ক্যাশ কন্ট্রোল এবং নিরাপত্তা খুবই গুরুত্বপূর্ণ, যা আপনি বিভিন্ন কনফিগারেশন এবং মিডলওয়্যার ব্যবহার করে ম্যানেজ করতে পারেন।

ExpressJS-এ স্ট্যাটিক ফাইলগুলি (যেমন HTML, CSS, JavaScript, ইমেজ) সরবরাহ করার জন্য express.static() মিডলওয়্যার ব্যবহার করা হয়। এটি সহজেই স্ট্যাটিক ফাইলগুলোকে অ্যাপ্লিকেশন থেকে সরবরাহ করতে সহায়তা করে।

১. express.static() মিডলওয়্যার ব্যবহার করা

ExpressJS-এ স্ট্যাটিক ফাইল সার্ভ করতে express.static() ফাংশনটি ব্যবহার করা হয়। সাধারণত, আপনি একটি public/ ফোল্ডার তৈরি করেন যেখানে সব স্ট্যাটিক ফাইল থাকে এবং সেটিকে মিডলওয়্যার হিসাবে ব্যবহার করেন।

উদাহরণ:

ধরা যাক, আপনি আপনার স্ট্যাটিক ফাইলগুলো public/ ফোল্ডারে রাখতে চান। তাহলে আপনাকে নিচের কোডটি ব্যবহার করতে হবে:

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

// স্ট্যাটিক ফাইল সরবরাহ করতে public ফোল্ডার ব্যবহার করা
app.use(express.static(path.join(__dirname, 'public')));

// অ্যাপ্লিকেশন চালু করা
const port = 3000;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

এখানে:

• express.static(): এই মিডলওয়্যারটি public ফোল্ডারে থাকা স্ট্যাটিক ফাইলগুলোকে সরবরাহ করবে।
• path.join(__dirname, 'public'): এটি public/ ফোল্ডারের সঠিক পাথ তৈরির জন্য path মডিউল ব্যবহার করা হচ্ছে।

২. স্ট্যাটিক ফাইলের ধরন

express.static() যেকোনো ধরনের স্ট্যাটিক ফাইল সরবরাহ করতে সক্ষম, যেমন:

• CSS ফাইল
• JavaScript ফাইল
• ইমেজ ফাইল (JPG, PNG, GIF ইত্যাদি)
• ফন্ট ফাইল

উদাহরণ:

আপনার public/ ফোল্ডারটি দেখতে এমন হতে পারে:

public/
├── images/
│   └── logo.png
├── css/
│   └── style.css
└── js/
    └── script.js

এখন, আপনি এই ফাইলগুলোকে সরবরাহ করতে পারবেন:

• CSS ফাইল: http://localhost:3000/css/style.css
• JavaScript ফাইল: http://localhost:3000/js/script.js
• ইমেজ ফাইল: http://localhost:3000/images/logo.png

এই URL গুলি সরাসরি ব্রাউজারে অ্যাক্সেস করা যাবে, কারণ express.static() মিডলওয়্যার এই ফাইলগুলোকে পাবলিক রুটে সার্ভ করে।

৩. সাবডিরেক্টরি ব্যবহার

আপনি স্ট্যাটিক ফাইলগুলোর জন্য সাবডিরেক্টরি তৈরি করতে পারেন এবং ExpressJS সেই ফোল্ডারের মধ্যে ফাইল সার্ভ করবে। উপরের উদাহরণের মতো, আপনি images/, css/, এবং js/ ফোল্ডারগুলোতে ফাইল রাখতে পারেন।

যদি আপনার ফোল্ডারের কাঠামো হয় এমন:

public/
├── images/
│   └── logo.png
└── css/
    └── style.css

তাহলে, আপনি এই ফাইলগুলিকে নিচের URL দিয়ে অ্যাক্সেস করতে পারবেন:

• Logo Image: http://localhost:3000/images/logo.png
• CSS File: http://localhost:3000/css/style.css

৪. স্পেসিফিক রাউটের সাথে স্ট্যাটিক ফাইল সংযুক্ত করা

আপনি যদি চাইলে একটি নির্দিষ্ট রাউটের সাথে স্ট্যাটিক ফাইল সার্ভ করতে পারেন। নিচের উদাহরণে, আমরা /assets/ রাউট দিয়ে স্ট্যাটিক ফাইল সার্ভ করছি:

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

এখন, আপনার CSS, ইমেজ বা JavaScript ফাইল অ্যাক্সেস করতে হবে /assets রাউট দিয়ে:

• CSS ফাইল: http://localhost:3000/assets/css/style.css
• Logo Image: http://localhost:3000/assets/images/logo.png

৫. কাস্টম ফোল্ডার এবং URL রুটিং

আপনি চাইলে স্ট্যাটিক ফাইলের জন্য আলাদা ফোল্ডারও ব্যবহার করতে পারেন, যেমন:

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

এটি /public URL রুট দিয়ে স্ট্যাটিক ফাইল সরবরাহ করবে। উদাহরণস্বরূপ:

• CSS ফাইল: http://localhost:3000/public/css/style.css
• Logo Image: http://localhost:3000/public/images/logo.png

সারাংশ

ExpressJS-এ স্ট্যাটিক ফাইল সার্ভ করা খুবই সহজ। express.static() মিডলওয়্যার ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশন থেকে স্ট্যাটিক ফাইল সরবরাহ করতে পারেন। এটি CSS, JavaScript, ইমেজ এবং অন্যান্য ফাইল সার্ভ করতে সক্ষম। স্ট্যাটিক ফাইল সরবরাহের জন্য সাধারণত public/ ফোল্ডার ব্যবহার করা হয়, তবে আপনি চাইলে কাস্টম রাউট এবং ফোল্ডারও ব্যবহার করতে পারেন।

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 মিডলওয়্যার ব্যবহার করে আপনি এই ফাইলগুলো সঠিকভাবে অ্যাপ্লিকেশন থেকে সরবরাহ করতে পারেন। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সাহায্য করে এবং ক্লায়েন্টদের দ্রুত ও সহজে প্রয়োজনীয় রিসোর্স সরবরাহ করতে সক্ষম হয়।

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, ইমেজসহ যেকোনো স্ট্যাটিক ফাইলকে আপনার ওয়েব পেজে ব্যবহার করতে পারবেন। স্ট্যাটিক ফাইলের জন্য আপনি একাধিক ফোল্ডার ব্যবহার করতে পারেন, ক্যাশ কন্ট্রোল সেট করতে পারেন এবং কাস্টম পাথও নির্ধারণ করতে পারেন।

ExpressJS-এ Cache Control এবং Static File Optimization ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করা সম্ভব। স্ট্যাটিক ফাইল যেমন CSS, JavaScript, এবং ইমেজ ফাইলের জন্য সঠিক ক্যাশ কন্ট্রোল সেট করা এবং সেগুলির অপটিমাইজেশন করা ওয়েব অ্যাপ্লিকেশনকে আরও দ্রুত এবং কার্যকরী করে তোলে।

১. Cache Control

Cache Control হলো একটি HTTP হেডার, যা ওয়েব ব্রাউজার এবং অন্যান্য মিডিয়া প্রোক্সি সার্ভারের জন্য নির্দেশনা প্রদান করে, কোন রিসোর্স কিভাবে ক্যাশ (সংরক্ষণ) করতে হবে। ExpressJS-এ আপনি Cache-Control হেডারটি ব্যবহার করে স্ট্যাটিক ফাইলের ক্যাশিং নিয়ন্ত্রণ করতে পারেন। এটি ব্রাউজারকে জানায় যে, কবে এবং কতদিন একটি রিসোর্স ক্যাশ করা যেতে পারে।

Cache Control কিভাবে কাজ করে?

• public: ফাইলটি সকল ব্যবহারকারীর জন্য ক্যাশ করা যেতে পারে।
• private: ফাইলটি শুধুমাত্র একক ব্যবহারকারীর জন্য ক্যাশ হবে।
• max-age: নির্দিষ্ট সময়কাল (সেকেন্ডে) পর্যন্ত ফাইলটি ক্যাশ হবে।
• no-cache: ফাইলটি ক্যাশ করা যাবে না, প্রতি রিকোয়েস্টে নতুনভাবে লোড হবে।

২. ExpressJS-এ Cache Control সেট করা

ExpressJS-এ express.static মিডলওয়্যার ব্যবহার করে স্ট্যাটিক ফাইলের জন্য ক্যাশ কন্ট্রোল হেডার সেট করা যায়।

উদাহরণ: Static ফাইলের জন্য Cache Control সেট করা

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

// স্ট্যাটিক ফাইলের জন্য Cache Control সেট করা
app.use(express.static('public', {
  maxAge: '1d', // ফাইলগুলো ১ দিন ধরে ক্যাশ হবে
  setHeaders: (res, path) => {
    res.set('Cache-Control', 'public, max-age=86400'); // ১ দিন (২৪ ঘণ্টা)
  }
}));

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

এখানে:

• maxAge: '1d': এই সেটিংটি ১ দিনের জন্য ক্যাশিং নির্ধারণ করে।
• setHeaders: ফাইলের জন্য ক্যাশ কন্ট্রোল হেডার কাস্টমাইজ করার জন্য ব্যবহার করা হয়। আপনি এখানে ক্যাশ কন্ট্রোল হেডারটি নির্দিষ্ট করতে পারেন।

৩. স্ট্যাটিক ফাইলের জন্য ক্যাশ কন্ট্রোলের গুরুত্বপূর্ণ নির্দেশনা

• max-age: ফাইলটি কতক্ষণ ক্যাশ করা হবে তা নির্ধারণ করে। উদাহরণস্বরূপ, max-age=3600 মানে ফাইলটি ১ ঘণ্টা (৩৬০০ সেকেন্ড) পর্যন্ত ক্যাশ হবে।
• immutable: এই ডিরেক্টিভটি ব্যবহার করা হলে, ফাইলটি একবার ক্যাশ হলে তার পর আর পরিবর্তিত হবে না বলে ধরে নেওয়া হয়।
• no-store: কোনো রিসোর্স ক্যাশ করা যাবে না।
• no-cache: ফাইলটি ক্যাশ করা যাবে, কিন্তু প্রতিবার ব্যবহার করার আগে সার্ভারের সাথে যাচাই করতে হবে।

উদাহরণ: Immutable Cache Control

app.use(express.static('public', {
  maxAge: '1y', // ১ বছর ধরে ক্যাশ হবে
  setHeaders: (res, path) => {
    res.set('Cache-Control', 'public, max-age=31536000, immutable'); // ১ বছর (৩১৫৩৬০০০ সেকেন্ড)
  }
}));

এখানে immutable এর মাধ্যমে স্ট্যাটিক ফাইলটি একবার ক্যাশ হলে আর কখনো পরিবর্তিত হবে না বলে ধরে নেওয়া হয়েছে।

৪. Static File Optimization

স্ট্যাটিক ফাইলগুলো যেমন CSS, JavaScript এবং ইমেজ ফাইলের সাইজ কমিয়ে অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ানো সম্ভব। নীচে স্ট্যাটিক ফাইল অপটিমাইজ করার জন্য কিছু কৌশল দেওয়া হলো:

১. Minification (মিনিফিকেশন)

মিনিফিকেশন হলো ফাইলের অব্যবহৃত অংশগুলো অপসারণ করে ফাইলের আকার ছোট করা। CSS, JavaScript এবং HTML ফাইলগুলোকে মিনিফাই করা যায়। এর ফলে ব্রাউজার এই ফাইলগুলো দ্রুত লোড করতে পারে।

• CSS মিনিফিকেশন: cssnano অথবা clean-css প্যাকেজ ব্যবহার করা যায়।
• JavaScript মিনিফিকেশন: UglifyJS অথবা Terser প্যাকেজ ব্যবহার করা যায়।

২. Image Optimization (ইমেজ অপটিমাইজেশন)

ইমেজ ফাইলের সাইজ কমানোর জন্য বিভিন্ন টুল বা লাইব্রেরি ব্যবহার করা যেতে পারে, যেমন:

• ImageMagick: ইমেজ ফাইল কম্প্রেশন ও রিসাইজের জন্য।
• Sharp: Node.js এর জন্য একটি জনপ্রিয় ইমেজ প্রসেসিং লাইব্রেরি।

আপনি ExpressJS-এ sharp ব্যবহার করে ইমেজ অপটিমাইজ করতে পারেন।

উদাহরণ: Sharp ব্যবহার করে ইমেজ অপটিমাইজেশন

const sharp = require('sharp');
const fs = require('fs');

// ইমেজ অপটিমাইজেশন
sharp('input-image.jpg')
  .resize(800) // রিসাইজ করা
  .toFile('output-image.jpg', (err, info) => {
    if (err) {
      console.log('Error:', err);
    } else {
      console.log('Optimized image:', info);
    }
  });

৩. Compression (কম্প্রেশন)

স্ট্যাটিক ফাইলগুলির সাইজ আরও কমানোর জন্য ফাইল কম্প্রেশন ব্যবহার করা যেতে পারে। আপনি compression মিডলওয়্যার ব্যবহার করে ExpressJS অ্যাপ্লিকেশনে Gzip বা Brotli কম্প্রেশন সক্ষম করতে পারেন।

উদাহরণ: Compression মিডলওয়্যার ব্যবহার করা

const compression = require('compression');
app.use(compression());

এটি HTTP রেসপন্সের সমস্ত ডেটা Gzip বা Brotli দ্বারা কম্প্রেস করে, যার ফলে ডেটা ট্রান্সমিশন দ্রুত হয় এবং ব্রাউজারের জন্য ডেটা ডাউনলোডের সময় কমে।

সারাংশ

ExpressJS-এ ক্যাশ কন্ট্রোল এবং স্ট্যাটিক ফাইল অপটিমাইজেশন ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনের পারফরম্যান্স এবং রেসপন্স টাইম উল্লেখযোগ্যভাবে উন্নত করা যেতে পারে। ক্যাশ কন্ট্রোল হেডারগুলো ব্রাউজারকে নির্দেশনা দেয় কিভাবে ফাইলগুলি ক্যাশ করতে হবে, যাতে পরবর্তী রিকোয়েস্টে ফাইলগুলি দ্রুত লোড হয়। এর পাশাপাশি, মিনিফিকেশন, ইমেজ অপটিমাইজেশন, এবং কম্প্রেশন ব্যবহার করে স্ট্যাটিক ফাইলের সাইজ কমিয়ে অ্যাপ্লিকেশনের লোড টাইম আরও দ্রুত করা সম্ভব।