If you are making a discord bot and looking into providing users with a dashboard you can go two ways. Use a template or code the complete webpage by yourself.
If you do not want to go the second way look no further.
We at Assistants Center provide a NPM package that enables you to create your own custom dashboard in less and 10 minutes!
Installing
How to get started?
First of all make sure of have Node.js installed
node -v
If you do not have it installed you can get Node.js here (We recommend the latest LTS)
Setting up your project
To use discord-dashboard, you'll need to install it via npm (which comes pre-installed with Node).
Navigate to a suitable place on your machine and create a folder named whatever you wish!
Opening the terminal
On Microsoft Windows, either:
Shift + Right-click inside your project directory and choose the "Open command window here" option
Press Win + R and run cmd.exe then cd into your project directory
On Apple macOS, either:
Open Launchpad or Spotlight and search for "Terminal"
In your "Applications" folder, under "Utilities", open the Terminal app
On Linux, you can quickly open the terminal with Ctrl + Alt + T.
Initiating a project folder
npm init
Depending on if you want to use a different package manager you can replace npm with yarn or pnpm (Please be aware that we not yet tested bun as there is no stable version for Windows at the time)
This next command creates a package.json file for you, which keeps track of dependencies of your project as well as some other stuff!
It will ask you a sequence of questions, you should answer them as you see fit. If you're not sure on something or want to skip it; leave it blank and press enter.
Once you're done answering the questions, you're ready to install discord-dashboard!
Installing modules
Now that you've installed Node.js and know how to open your console and run commands, you can finally install discord-dashboard and Soft-UI!
Run the following command in your terminal:
npm install discord-dashboard dbd-soft-ui discord.js
Again you can use a different package manager if you want to :)
Setup
Setting up Discord-Dashboard
We will be creating a new file, config.json, which will house all our important (and secret) settings! Paste the following code into the file and replace as necessary:
{
"discord": {
"token": "discordToken",
"client": {
"id": "clientId",
"secret": "clientSecret"
}
},
"dbd": {
"port": 80,
"domain": "http://localhost",
"redirectUri": "/discord/callback",
"license": "dbdLicense",
"ownerIDs": ["Dashboard Admin Discord User IDs"]
}
}
The configuration above will not work unless you change the values of the properties.
You need to visit https://assistantscenter.com/dashboard to get the free dbdLicense.
Creating index.js
Currently JS and TS are supported while TS is not 100% supported yet but will be in the near future
Create a new file, index.js (or anything you'd like) and paste the discord-dashboard handler into it.
// Define Packages
const { Client, GatewayIntentBits } = require('discord.js');
const SoftUI = require('dbd-soft-ui');
const config = require('./config.json');
let DBD = require('discord-dashboard');
const client = new Client({ intents: [GatewayIntentBits.Guilds] });
client.login(config.discord.token);
const Handler = new DBD.Handler(
/*
Keyv storage instance
Example: { store: new KeyvMongo('mongodb://user:pass@localhost:27017/dbname') }
Can be left empty to use the default storage (Keyv with SQLite)
*/
);
(async ()=>{
await DBD.useLicense(config.dbd.license);
DBD.Dashboard = DBD.UpdatedClass();
const Dashboard = new DBD.Dashboard({
port: config.dbd.port,
client: config.discord.client,
redirectUri: `${config.dbd.domain}${config.dbd.redirectUri}`,
domain: config.dbd.domain,
ownerIDs: config.dbd.ownerIDs,
useThemeMaintenance: true,
useTheme404: true,
bot: client,
theme: SoftUI({
storage: Handler,
customThemeOptions: {
index: async ({ req, res, config }) => {
return {
values: [],
graph: {},
cards: [],
}
},
},
websiteName: "Assistants",
colorScheme: "pink",
supporteMail: "support@support.com",
icons: {
favicon: 'https://assistantscenter.com/wp-content/uploads/2021/11/cropped-cropped-logov6.png',
noGuildIcon: "https://pnggrid.com/wp-content/uploads/2021/05/Discord-Logo-Circle-1024x1024.png",
sidebar: {
darkUrl: 'https://assistantscenter.com/img/logo.png',
lightUrl: 'https://assistanscenter.com/img/logo.png',
hideName: true,
borderRadius: false,
alignCenter: true
},
},
index: {
graph: {
enabled: true,
lineGraph: false,
title: 'Memory Usage',
tag: 'Memory (MB)',
max: 100
},
},
sweetalert: {
errors: {},
success: {
login: "Successfully logged in.",
}
},
preloader: {
image: "/img/soft-ui.webp",
spinner: false,
text: "Page is loading",
},
admin: {
pterodactyl: {
enabled: false,
apiKey: "apiKey",
panelLink: "https://panel.website.com",
serverUUIDs: []
}
},
commands: [],
}),
settings: []
});
Dashboard.init();
})();
The above provides a default config with all required parameters. For more parameters and features you can add please consult the Docs
Having issues?
Join the Discord server if you're encountering any issues!
Make sure to give us detailed information on how to reproduce this error and any logs/errors you see in the console.
Top comments (1)
Hi DJKnaeckebrot, Thanks for publishing your first article and welcome to the DEV Community! Great article on a Discord dashboard, well structured with javascript code snippets!