About a year ago, I tried Next.js for the first time and was so impressed by their file-based routing that I decided to implement a similar system on the backend. I couldn't find anything suitable, so I took it upon myself to create my own solution. It turned out to be technology-agnostic and works with both pure Node.js, Bun and the popular Express.js.
In this brief guide, we will attempt to partially implement a shop's API. This tutorial uses JavaScript and CommonJS module types to keep things simple and quick to get started.
1. Installation
💿 Install node-file-router:
npm install node-file-router
2. Initialization
Create an server.js file and do the following
If you use pure Node.js:
// 1. Import default http module and node-file-router
const http = require('node:http');
const { initFileRouter } = require('node-file-router');
// 2. Create an entry-point function
async function run() {
// 3. Initialize node-file-router and the handler function
const useFileRouter = await initFileRouter();
const server = http.createServer((req, res) => {
// 4. Create a server and invoke created function on each request
useFileRouter(req, res);
});
// 5. Start listening a server on 4000 port
const port = 4000;
server.listen(port, () =>
console.log(`Server running at http://localhost:${port}/`)
);
}
// 6. Run entry-point function
run();
If you use Express.js:
const { initFileRouter } = require('node-file-router');
const express = require('express');
async function run() {
const fileRouter = await initFileRouter();
const app = express();
app.listen(4004);
app.use(fileRouter);
}
run();
2. A first route
🏡 We will create a home route that displays welcome content.
1. Create an api folder at the root of your project.
├── api/ <-
├── server.js
└── package.json
2. Create a file named index.js inside this folder:
├── api/
│ └── index.js <-
├── server.js
└── package.json
module.exports = function index(req, res) {
res.end("Welcome to our shop!");
}
3. Run a server using: node server.js command
4. Open a browser and navigate to http://localhost:4000.
You should see the message Welcome to our shop! displayed.
Congratulations! 🎉 You've created a first file route
3. Add http methods
1. Before we start, we need a small utility function which will parse json from a request.
Create a folder utils and put http.utils.js file inside.
├── api/
├── ...
├── utils/
│ └── http.utils.js <-
...
module.exports = {
parseJson(request) {
return new Promise((resolve, reject) => {
let data = '';
request.on('data', (chunk) => {
data += chunk;
});
request.on('end', () => {
try {
const parsedData = JSON.parse(data);
resolve(parsedData);
} catch (e) {
reject(e);
}
});
});
}
}
2. Create a folder called products and an index.js file inside it.
├── api/
│ ├── products/ <-
│ │ └── index.js <-
│ └── ...
...
3. Implement get and post methods:
const { parseJson } = require('../../utils/http.utils');
module.exports = {
get: (req, res) => {
res.end('list of products');
},
post: async (req, res) => {
const newProduct = await parseJson(req);
res.end(`a product will be created: ${JSON.stringify(newProduct)}`);
}
}
3. Open a browser and go to http://localhost:4000/products.
You should see a list of products message displayed.
4. Make a POST request using curl, Postman or any tool you like on http://localhost:4000/products
The response should display a product will be created along with your content.
Perfect! 🎉 Let's move on
4. Dynamic routes
1. Create a new file with the name [id] inside the product folder.
├── api/
│ ├── products/
│ │ ├── ...
│ │ └── [id].js <-
│ └── index.js
...
2. Fill it the same way as you did before:
module.exports = {
// Add the `routeParams` argument as the final argument to the function. This argument will contain
// all the taken route parameters.
get: (req, res, routeParams) => {
const { id } = routeParams;
res.end(`product ${id} info`);
}
};
3. Open a browser and go to http://localhost:4000/products/123.
The page should display a message: product 123.
Alright, let's make it more sophisticated.
Say, we want to address the following case:
/catalog/tag-1/tag-2/tag-n
4. Create a catalog folder with [[...categories]].js inside.
├── api/
│ ├── catalog/
│ │ ├── ...
│ │ └── [[...categories]].js <-
│ ├── index.js
...
And add a single get method:
module.exports = {
get: (req, res, routeParams) => {
const { categories } = routeParams;
// This type of route also covers just "/catalog"
if (!categories) {
return res.end('all products');
}
res.end(`get products that have such tags: ${categories}`);
},
};
5. Open a browser and go to http://localhost:4000/catalog/men/sneakers/nike.
The page should display a list of categories: men, sneakers, nike
🥁 That's it!
Top comments (3)
It's amazing to see how you were inspired by Next.js' file-based routing and took it upon yourself to create a technology-agnostic solution for the backend, compatible with both Node.js and Express.js. This tutorial is a valuable resource for anyone looking to implement a shop's API. Good job!
Wow, thank you so much!! No more complicated “ifs” and RegExps. I got used to the router in Next.js, too and i’m happy that i can do the same on the backend
Great, but how do I also serve static files like images?