​
Setup your environment

Learn how to develop your Dashboard

1

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.

2

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.

3

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 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.

4

Verifying Node is installed

With the terminal open, run node -v to ensure you’ve successfully installed Node.js.

5

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!

6

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

1

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:

config.json
{
"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“)

2

Creating index.js

Create a new file, index.js (or anything you’d like) and paste the discord-dashboard handler into it.

index.js
// 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();
})();
3

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?

Change Images and Texts

Change any text or image to your own.

Add API Endpoints

Implement your OpenAPI spec and enable API user interaction.

Integrate Analytics

Draw insights from user interactions with your documentation.

Host on a Custom Domain

Keep your docs on your own website’s subdomain.

Was this page helpful?

IntroductionCategories