অনেক সময় আমরা frontend project তৈরি করার সময় backend ছাড়াই API প্রয়োজন হয়। এই পরিস্থিতিতে JSON Server Deploy আমাদের জন্য একটি সহজ এবং দ্রুত সমাধান হিসেবে কাজ করে।
তবে শুধু local machine-এ JSON Server চালানো যথেষ্ট নয় একটি live API তৈরি করতে হবে, যাতে যেকোনো জায়গা থেকে access করা যায়।
Step 1: Project Folder Structure তৈরি করুন
প্রথমে একটি clean project structure তৈরি করা গুরুত্বপূর্ণ। একটি নতুন folder তৈরি করে VS Code-এর terminal-এ নিচের commandটি দিন:
npm init -y
এতে একটি package.json ফাইল তৈরি হবে। এরপর JSON Server install করুন:
npm install json-server
Step 2: db.json তৈরি করুন
এখন একটি db.json ফাইল তৈরি করুন, যা আপনার fake database হিসেবে কাজ করবে:
{
"products": [
{
"id": 1,
"name": "Wireless Mouse",
"price": 29.99,
"category": "Electronics",
"stock": 50,
"rating": 4.5,
"description": "Ergonomic wireless mouse with USB receiver",
"image": "https://via.placeholder.com/150"
},
{
"id": 2,
"name": "Mechanical Keyboard",
"price": 79.99,
"category": "Electronics",
"stock": 30,
"rating": 4.7,
"description": "RGB backlit mechanical keyboard with blue switches",
"image": "https://via.placeholder.com/150"
}
],
"books": [
{
"id": 1,
"title": "Atomic Habits",
"author": "James Clear",
"price": 18.99,
"category": "Self-help",
"stock": 25,
"rating": 4.8,
"publishedYear": 2018,
"image": "https://via.placeholder.com/150"
},
{
"id": 2,
"title": "The Alchemist",
"author": "Paulo Coelho",
"price": 14.99,
"category": "Fiction",
"stock": 40,
"rating": 4.7,
"publishedYear": 1988,
"image": "https://via.placeholder.com/150"
}
]
}
এখন আপনি নিচের endpoint গুলো পাবেন:
/products/books
এইভাবেই JSON Server Deploy আপনার JSON data-কে API-তে রূপান্তর করে।
Step 3: package.json configure করুন
নিচের মতো করে package.json সেটআপ করুন:
{
"name": "deploy-json",
"version": "1.0.0",
"scripts": {
"start": "npx json-server --watch db.json --host 0.0.0.0 --port $PORT",
"dev": "json-server --watch db.json --port 4000"
},
"dependencies": {
"json-server": "^1.0.0-beta.15"
}
}
এখানে start script খুব গুরুত্বপূর্ণ, কারণ deploy-এর সময় এটিই run হবে।
Step 4: public ফোল্ডার তৈরি করুন
একটি public নামের empty folder তৈরি করুন। কিছু ক্ষেত্রে JSON Server (বিশেষ করে beta version) static folder হিসেবে public খুঁজতে পারে, তাই এটি রাখা ভালো।
Step 5: Local এ Test করুন
Terminal-এ নিচের commandগুলো চালান:
npm install
npm run dev
Browser-এ গিয়ে দেখুন:
http://localhost:4000/products
যদি data দেখতে পান, তাহলে setup ঠিকভাবে কাজ করছে।
Local test ছাড়া কখনো JSON Server Deploy করা উচিত নয়।
Step 6: GitHub-এ Push করুন
আপনার project একটি public GitHub repository-তে push করুন।
Step 7: Render-এ Deploy করুন
Render backend deploy করার জন্য একটি সহজ এবং নির্ভরযোগ্য platform।
Steps:
- Render-এ account তৈরি করুন
- Dashboard → New → Web Service
- GitHub repository connect করুন
Important Settings:
Build Command:
npm install
Start Command:
npm start
Port:
ফাঁকা রাখুন (Render automatically assign করবে)
Deploy button চাপুন এবং ১–২ মিনিট অপেক্ষা করুন।
Live API URL
Deploy সম্পন্ন হলে আপনি পাবেন:
https://your-app.onrender.com/products
এখন আপনার JSON Server Deploy live হয়ে গেছে।
Common Errors & Fix
App crashed বা start না হলে:
npm start script ঠিক আছে কিনা যাচাই করুন।
db.json detect না হলে:
ফাইলটি root folder-এ আছে কিনা নিশ্চিত করুন।
Port issue হলে:
Fixed port ব্যবহার না করে $PORT ব্যবহার করুন।
Note
আপনি যদি json-server এর beta version ব্যবহার করেন (যেমন ^1.0.0-beta), তাহলে production environment-এ কিছু unexpected error দেখা যেতে পারে, যেমন public folder সংক্রান্ত সমস্যা বা server crash।
এক্ষেত্রে stable version ব্যবহার করা recommended:
Step 8: Frontend থেকে API Call
React example:
useEffect(() => {
fetch("https://your-app.onrender.com/products")
.then(res => res.json())
.then(data => console.log(data));
}, []);
এখন আপনার frontend real API থেকে data fetch করতে পারবে।
আপনি যদি React বা Next.js developer হন, তাহলে JSON Server ব্যবহার করে practice করলে backend flow এবং API handling আরও ভালোভাবে বুঝতে পারবেন।
নিজের project deploy করে দেখুন এই ছোট setup দিয়েই আপনি real-world development mindset তৈরি করতে পারবেন।