I have implemented a function to create new categories using NodeBB plugins. This article explains how to implement this.
Purpose
As a forum for developers that I am currently developing, I would like to be able to handle the root category as a community. For example, if you create a root category such as JavaScript and PHP, you will be able to access it with a URL such as https://example.com/javascript.
Each root category (community) has three groups.
Administrator
Member
Ban (blacklist)
These groups are used to set category permissions.
Implementation Overview
The implemented functions are as follows.
Displaying the modal for creating communities
WebSocket communication from the client side
Creating categories on the server side
Setting permissions
Adding subcategories
Adding a template
First, we'll add a template for displaying the modal for creating communities. This will be placed in the templates directory as a .tpl file.
Create a community
×
Name
Description
Cancel
Create
This template uses the Bootstrap modal component. The modal is identified by id=‘community-create-modal’ and the form input values can be obtained by the names name and description.
Client-side implementation
On the client-side, we will add JavaScript and CSS (Less). These are specified in plugin.json and loaded.
{
"id": "nodebb-plugin-caiz",
"name": "NodeBB Plugin for Caiz",
"description": "NodeBB Plugin for Caiz",
"version": "1.0.0",
"library": "./library.js",
"staticDirs": {
"static": "./static"
},
"scripts": [
"static/modal.js"
],
"less": [
"static/style.less"
]
}
In plugin.json, the following settings are made:
staticDirs: Specify the directory for static files (JavaScript, CSS, images, etc.)
scripts: Specify the JavaScript files to be loaded on the client side
less: Specify the Less files to be loaded on the client side
The client-side JavaScript implements the display of the modal and WebSocket communication.
'use strict';
async function getAlert() {
return new Promise((resolve, reject) => {
require(['alerts'], resolve);
});
}
$(document).ready(function () {
// Trigger of showing modal
$(document).on('click', '#create-community-trigger', function (e) {
e.preventDefault();
$('#community-create-modal').modal('show');
});
// Click event in the modal
$('#submit-community-create').on('click', async () => {
const form = $('#community-create-form');
const formData = form.serializeArray().reduce((obj, item) => {
obj[item.name] = item.value;
return obj;
}, {});
// Client validation
const { alert } = await getAlert();
if (!formData.name) {
alert({
type: 'warning',
message: '[[caiz:error.name_required]]',
timeout: 3000,
});
return;
}
// Disable to the button
const submitBtn = $(this);
submitBtn.prop('disabled', true).addClass('disabled');
// Send to server by WebSocket
socket.emit('plugins.caiz.createCommunity', formData, function(err, response) {
if (err) {
alert({
type: 'error',
message: err.message || '[[caiz:error.generic]]',
timeout: 3000,
});
} else {
$('#community-create-modal').modal('hide');
alert({
type: 'success',
message: '[[caiz:success.community_created]]',
timeout: 3000,
});
// Redirect to community you made
ajaxify.go(`/${response.community.handle}`);
}
form[0].reset();
submitBtn.prop('disabled', false).removeClass('disabled');
});
});
});
In this code:
getAlert() loads the NodeBB alert module
Set up the trigger to display the modal
Monitor the click event on the create button:
Get the form data and convert it into an object
Perform client-side validation
Disable the button to prevent double submissions
Send the data to the server via WebSocket
If successful, display the alert and redirect
If there is an error, display the error message
After processing is complete, reset the form and enable the button
Notes
In NodeBB, server-side functions are called using WebSocket, not Ajax. WebSocket functions are specified in module.exports.sockets, and if a function such as module.exports.sockets.caiz.createCommunity is defined on the server side, it can be called on the client side in an RPC-like way, for example
Apr 5, 2025 - 07:16
0
I have implemented a function to create new categories using NodeBB plugins. This article explains how to implement this.
Purpose
As a forum for developers that I am currently developing, I would like to be able to handle the root category as a community. For example, if you create a root category such as JavaScript and PHP, you will be able to access it with a URL such as https://example.com/javascript.
Each root category (community) has three groups.
Administrator
Member
Ban (blacklist)
These groups are used to set category permissions.
Implementation Overview
The implemented functions are as follows.
Displaying the modal for creating communities
WebSocket communication from the client side
Creating categories on the server side
Setting permissions
Adding subcategories
Adding a template
First, we'll add a template for displaying the modal for creating communities. This will be placed in the templates directory as a .tpl file.
class="modal fade"id="community-create-modal"tabindex="-1"role="dialog">class="modal-dialog"role="document">class="modal-content">class="modal-header">class="modal-title">Create a community
type="button"class="close"data-dismiss="modal">×
This template uses the Bootstrap modal component. The modal is identified by id=‘community-create-modal’ and the form input values can be obtained by the names name and description.
Client-side implementation
On the client-side, we will add JavaScript and CSS (Less). These are specified in plugin.json and loaded.
{"id":"nodebb-plugin-caiz","name":"NodeBB Plugin for Caiz","description":"NodeBB Plugin for Caiz","version":"1.0.0","library":"./library.js","staticDirs":{"static":"./static"},"scripts":["static/modal.js"],"less":["static/style.less"]}
In plugin.json, the following settings are made:
staticDirs: Specify the directory for static files (JavaScript, CSS, images, etc.)
scripts: Specify the JavaScript files to be loaded on the client side
less: Specify the Less files to be loaded on the client side
The client-side JavaScript implements the display of the modal and WebSocket communication.
'use strict';asyncfunctiongetAlert(){returnnewPromise((resolve,reject)=>{require(['alerts'],resolve);});}$(document).ready(function (){// Trigger of showing modal$(document).on('click','#create-community-trigger',function (e){e.preventDefault();$('#community-create-modal').modal('show');});// Click event in the modal$('#submit-community-create').on('click',async ()=>{constform=$('#community-create-form');constformData=form.serializeArray().reduce((obj,item)=>{obj[item.name]=item.value;returnobj;},{});// Client validationconst{alert}=awaitgetAlert();if (!formData.name){alert({type:'warning',message:'[[caiz:error.name_required]]',timeout:3000,});return;}// Disable to the buttonconstsubmitBtn=$(this);submitBtn.prop('disabled',true).addClass('disabled');// Send to server by WebSocketsocket.emit('plugins.caiz.createCommunity',formData,function(err,response){if (err){alert({type:'error',message:err.message||'[[caiz:error.generic]]',timeout:3000,});}else{$('#community-create-modal').modal('hide');alert({type:'success',message:'[[caiz:success.community_created]]',timeout:3000,});// Redirect to community you madeajaxify.go(`/${response.community.handle}`);}form[0].reset();submitBtn.prop('disabled',false).removeClass('disabled');});});});
In this code:
getAlert() loads the NodeBB alert module
Set up the trigger to display the modal
Monitor the click event on the create button:
Get the form data and convert it into an object
Perform client-side validation
Disable the button to prevent double submissions
Send the data to the server via WebSocket
If successful, display the alert and redirect
If there is an error, display the error message
After processing is complete, reset the form and enable the button
Notes
In NodeBB, server-side functions are called using WebSocket, not Ajax. WebSocket functions are specified in module.exports.sockets, and if a function such as module.exports.sockets.caiz.createCommunity is defined on the server side, it can be called on the client side in an RPC-like way, for example, socket.emit(‘plugins.caiz.createCommunity’, formData, ...).
You can specify the time to close the alert automatically using the timeout option.
Server-side implementation
On the server side, you will receive WebSocket events and create a new category.
First, register the WebSocket event in library.js. For WebSocket, there is no need to configure anything in plugin.json.
'use strict';constsockets=require.main.require('./src/socket.io/plugins');constCommunity=require('./libs/community');// Register event of WebSocketsockets.caiz={};sockets.caiz.createCommunity=Community.Create;module.exports=plugin;
Next, implement the community creation process in libs/community.js.
'use strict';constdb=require.main.require('./src/database');constPlugins=require.main.require('./src/plugins');constwinston=require.main.require('winston');constCategories=require.main.require('./src/categories');constPrivileges=require.main.require('./src/privileges');constGroups=require.main.require('./src/groups');constBase=require('./base');constwebsockets=require.main.require('./src/socket.io/plugins');constinitialCategories=require.main.require('./install/data/categories.json');classCommunityextendsBase{staticasyncCreate(socket,data){const{name,description}=data;winston.info(`[plugin/caiz] Creating community: ${name}`);const{uid}=socket;if (!uid){thrownewError('Not logged in');}if (!name||name.length<3){thrownewError('Community name is too short');}try{constcommunity=awaitCommunity.createCommunity(uid,{name,description});return{message:'Community created successfully!',community:community,};}catch (err){winston.error(`[plugin/caiz] Error creating community: ${err.message}`);throwerr;}}staticasynccreateCommunity(uid,{name,description}){constownerPrivileges=awaitPrivileges.categories.getGroupPrivilegeList();constguestPrivileges=['groups:find','groups:read','groups:topics:read'];// Create new top level categoryconstcategoryData={name,description:description||'',order:100,parentCid:0,customFields:{isCommunity:true},icon:'fa-users',};constnewCategory=awaitCategories.create(categoryData);constcid=newCategory.cid;// Create an owner community groupconstownerGroupName=`community-${cid}-owners`;constownerGroupDesc=`Owners of Community: ${name}`;awaitCommunity.createCommunityGroup(ownerGroupName,ownerGroupDesc,uid,1,1);awaitGroups.join(ownerGroupName,uid);// Create a member community groupconstcommunityGroupName=`community-${cid}-members`;constcommunityGroupDesc=`Members of Community: ${name}`;awaitCommunity.createCommunityGroup(communityGroupName,communityGroupDesc,uid,0,0);awaitGroups.leave(communityGroupName,uid);// Create a burned community groupconstcommunityBanGroupName=`community-${cid}-banned`;constcommunityBanGroupDesc=`Banned members of Community: ${name}`;awaitCommunity.createCommunityGroup(communityBanGroupName,communityBanGroupDesc,uid,1,1);awaitGroups.leave(communityBanGroupName,uid);// Save owner group name in category dataawaitdb.setObjectField(`category:${cid}`,'ownerGroup',ownerGroupName);// Setting privilegesawaitPrivileges.categories.give(ownerPrivileges,cid,ownerGroupName);constcommunityPrivileges=ownerPrivileges.filter(p=>p!=='groups:posts:view_deleted'&&p!=='groups:purge'&&p!=='groups:moderate');awaitPrivileges.categories.give(communityPrivileges,cid,communityGroupName);awaitPrivileges.categories.give([],cid,communityBanGroupName);awaitPrivileges.categories.rescind(ownerPrivileges,cid,'guests');awaitPrivileges.categories.give(guestPrivileges,cid,'guests');awaitPrivileges.categories.rescind(ownerPrivileges,cid,'registered-users');awaitPrivileges.categories.give(guestPrivileges,cid,'registered-users');awaitPrivileges.categories.give([],cid,'banned-users');// Create sub categoriesawaitPromise.all(initialCategories.map((category)=>{returnCategories.create({...category,parentCid:cid,cloneFromCid:cid});}));winston.info(`[plugin/caiz] Community created: ${name} (CID: ${cid}), Owner: ${uid}, Owner Group: ${ownerGroupName}`);returnnewCategory;}}module.exports=Community;
createCommunityGroup is defined in libs/community.js. The trick is to pass the flag as 0/1, not as a boolean.
As for permission settings, registered users etc. will have the default permission settings applied. Therefore, it is possible to set permissions flexibly by first revoking all permissions and then granting the necessary permissions.
// Revoke all permissions// 全権限を剥奪awaitPrivileges.categories.rescind(ownerPrivileges,cid,'registered-users');// Grant the necessary permissionsawaitPrivileges.categories.give(guestPrivileges,cid,'registered-users');
For WebSocket communication, if there is an error, you can handle it with exception handling. If the process is successful, you can return a variable with return, and the client side will receive it
Summary
Using the NodeBB plugin, we have implemented a function to create new categories. The main points are as follows
Display a modal using a template
Implement WebSocket communication on the client side
Create categories and subcategories on the server side
Set permissions and clone
With this implementation, users can easily create new communities. In addition, since subcategories are also created automatically, it is now possible to efficiently perform initial settings for communities.
![[The AI Show Episode 142]: ChatGPT’s New Image Generator, Studio Ghibli Craze and Backlash, Gemini 2.5, OpenAI Academy, 4o Updates, Vibe Marketing & xAI Acquires X](https://www.marketingaiinstitute.com/hubfs/ep%20142%20cover.png)
![[DEALS] The Premium Learn to Code Certification Bundle (97% off) & Other Deals Up To 98% Off – Offers End Soon!](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?#)
_Christophe_Coat_Alamy.jpg?#)
 (1).webp?#)
![Apple Considers Delaying Smart Home Hub Until 2026 [Gurman]](https://www.iclarified.com/images/news/96946/96946/96946-640.jpg)
![iPhone 17 Pro Won't Feature Two-Toned Back [Gurman]](https://www.iclarified.com/images/news/96944/96944/96944-640.jpg)
![Tariffs Threaten Apple's $999 iPhone Price Point in the U.S. [Gurman]](https://www.iclarified.com/images/news/96943/96943/96943-640.jpg)
