KoaJS একটি শক্তিশালী ওয়েব ফ্রেমওয়ার্ক যা Node.js পরিবেশে অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। KoaJS নিজে HTML টেমপ্লেট ইঞ্জিন সরবরাহ না করলেও, এটি অন্যান্য জনপ্রিয় টেমপ্লেট ইঞ্জিন যেমন Pug, EJS, এবং Handlebars এর সাথে সহজেই কাজ করতে পারে। এই টেমপ্লেট ইঞ্জিনগুলির সাহায্যে আপনি ডাইনামিক HTML পেজ তৈরি করতে পারেন, যা ডেটা পাস করে ক্লায়েন্টে রেন্ডার করা যায়।
এখানে আমরা Pug, EJS, এবং Handlebars ব্যবহার করে কিভাবে KoaJS অ্যাপে টেমপ্লেট ইঞ্জিন ইন্টিগ্রেট করা যায় তা দেখব।
১. Pug এর সাথে কাজ করা
Pug (আগে যা Jade নামে পরিচিত ছিল) একটি সিম্পল এবং মিনিমালিস্ট টেমপ্লেট ইঞ্জিন যা HTML কোডকে সাদাসিধে ও কমপ্যাক্ট করে তৈরি করতে সাহায্য করে। KoaJS-এ Pug ব্যবহার করার জন্য koa-pug প্যাকেজটি ইনস্টল করতে হয়।
Pug ইনস্টল করা:
npm install koa-pug pug
Pug কনফিগারেশন এবং ব্যবহার:
const Koa = require('koa');
const Router = require('koa-router');
const Pug = require('koa-pug');
const app = new Koa();
const router = new Router();
// Pug কনফিগারেশন
const pug = new Pug({
viewPath: './views', // আপনার টেমপ্লেট ফোল্ডার
app: app // Koa অ্যাপ্লিকেশন ইনস্ট্যান্স
});
// রাউট হ্যান্ডলিং
router.get('/', async (ctx) => {
await ctx.render('index', { title: 'Hello Pug', message: 'Welcome to KoaJS with Pug!' });
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
এখানে, views ফোল্ডারে একটি index.pug ফাইল তৈরি করুন:
doctype html
html
head
title= title
body
h1= message
এখন http://localhost:3000 এ গিয়ে আপনি Pug দিয়ে রেন্ডার করা HTML দেখতে পারবেন।
২. EJS এর সাথে কাজ করা
EJS (Embedded JavaScript) একটি খুবই জনপ্রিয় টেমপ্লেট ইঞ্জিন যা ডাইনামিক HTML তৈরি করতে সাহায্য করে এবং সহজেই Node.js অ্যাপ্লিকেশনের সাথে ইন্টিগ্রেট করা যায়।
EJS ইনস্টল করা:
npm install koa-ejs ejs
EJS কনফিগারেশন এবং ব্যবহার:
const Koa = require('koa');
const Router = require('koa-router');
const render = require('koa-ejs');
const path = require('path');
const app = new Koa();
const router = new Router();
// EJS কনফিগারেশন
render(app, {
root: path.join(__dirname, 'views'), // টেমপ্লেট ফোল্ডার
layout: false, // লেআউট ব্যবহৃত হবে না
viewExt: 'ejs', // ফাইল এক্সটেনশন .ejs
});
// রাউট হ্যান্ডলিং
router.get('/', async (ctx) => {
await ctx.render('index', { title: 'Hello EJS', message: 'Welcome to KoaJS with EJS!' });
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
এখানে, views ফোল্ডারে একটি index.ejs ফাইল তৈরি করুন:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>
এখন http://localhost:3000 এ গিয়ে আপনি EJS দিয়ে রেন্ডার করা HTML দেখতে পারবেন।
৩. Handlebars এর সাথে কাজ করা
Handlebars একটি শক্তিশালী টেমপ্লেট ইঞ্জিন যা HTML এর ভিতরে ডাইনামিক ডেটা অন্তর্ভুক্ত করতে সাহায্য করে। KoaJS-এ Handlebars ব্যবহার করার জন্য koa-handlebars প্যাকেজটি ব্যবহার করা হয়।
Handlebars ইনস্টল করা:
npm install koa-handlebars handlebars
Handlebars কনফিগারেশন এবং ব্যবহার:
const Koa = require('koa');
const Router = require('koa-router');
const handlebars = require('koa-handlebars');
const app = new Koa();
const router = new Router();
// Handlebars কনফিগারেশন
app.use(handlebars({
viewPath: './views', // টেমপ্লেট ফোল্ডার
extname: '.hbs', // ফাইল এক্সটেনশন .hbs
}));
// রাউট হ্যান্ডলিং
router.get('/', async (ctx) => {
await ctx.render('index', { title: 'Hello Handlebars', message: 'Welcome to KoaJS with Handlebars!' });
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
এখানে, views ফোল্ডারে একটি index.hbs ফাইল তৈরি করুন:
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>{{message}}</h1>
</body>
</html>
এখন http://localhost:3000 এ গিয়ে আপনি Handlebars দিয়ে রেন্ডার করা HTML দেখতে পারবেন।
সারাংশ
KoaJS-এ Pug, EJS, এবং Handlebars এর মতো টেমপ্লেট ইঞ্জিন ব্যবহার করে ডাইনামিক HTML তৈরি করা সহজ। আপনি koa-pug, koa-ejs, বা koa-handlebars প্যাকেজ ব্যবহার করে এই টেমপ্লেট ইঞ্জিনগুলির সাথে কাস্টম টেমপ্লেট তৈরি করতে পারেন। KoaJS এর মিডলওয়্যার সিস্টেমের সাথে এই ইঞ্জিনগুলির ইন্টিগ্রেশন খুবই সহজ এবং এটি ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টকে আরও দ্রুত এবং কার্যকরী করে তোলে।
Read more
