Quickstart
Let’s start building a quick, easy, and awesome dashboard in 5 minutes!
Setup your environment
Learn how to develop your Dashboard
Installing Node.js
To use discord-dashboard, you’ll need to install Node.js.
To check if you already have Node installed, run node -v
in your terminal.
Setting up your project
To use discord-dashboard, you’ll need to install it via npm
(which comes pre-installed with Node).
If you want to use a different package manager like pnpm, yarn or bun you can replace the commands with the proper command name.
Navigate to a suitable directory on your machine and create your project’s folder.
Opening the terminal
If you use Visual Studio Code, you can press
Ctrl + `
(backtick) to open its integrated terminal.
On Microsoft Windows, either:
Shift + Right-click
inside your project directory and choose the “Open command window here” option- Press
Win + R
and runcmd.exe
thencd
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
.
Verifying Node is installed
With the terminal open, run node -v
to ensure you’ve successfully installed Node.js.
Initiating a project folder
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:
And now that we’ve installed the required modules, we can start setting up the dashboard!
Setup the project
Creating config.json
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,
// Keep this for local development or add in yout domain
"domain": "http://localhost",
// Do not Change the redirectUri
"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.
Please also add the callback URL to your App in the Discord Developer Portal. (e.g. ”http://localhost/discord/callback“)
Creating index.js
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://static-00.iconduck.com/assets.00/discord-icon-2048x2048-nnt62s2u.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();
})();
Generating a license
Before you can use discord-dashboard, you need to generate a license. Once you’ve generated a license, add it to the configuration file.
Having issues?
Join our 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.
What’s next?
Was this page helpful?