DOCSEARCHbyAlgolia
Submit Docs

Discord BOT Dashboard V2

repository·main·Indexed 42 days ago

https://github.com/lachlandev/discord-bot-dashboard-v2

A web-based dashboard designed to simplify Discord bot development, allowing users to manage applications through a modern UI without writing extensive code. Version 1.0.0 supports custom plugin creation via a specific run/details schema, custom CSS themes, and includes built-in commands such as ban, kick, clear, and ping. Requires Node.js (v20.16.0 recommended) and configuration of OAuth2 Redirect URIs and Privileged Gateway Intents in the Discord Developer Portal.

Tokens
5.7K
Snippets
32
Records
38
Agent score
54%

What's inside Discord BOT Dashboard

  2. Start the Discord BOT Dashboard application

    main

    Once the dependencies are installed and config.json is configured, start the application from the root directory using Node.js. After starting, the dashboard will be accessible via your web browser at the port specified in your configuration (default is http://localhost:3000).

    node index.js

  5. Create a custom theme for the Discord BOT Dashboard

    main

    To create a custom theme, you must start with the existing default.css file as a template.

    1. Locate the default.css file within the themes folder of your application installation. If it is not available locally, you can download it from the official repository.
    2. Create a copy of default.css and rename it to a unique filename to avoid conflicts with other community themes.
    3. Edit the CSS in your new file to customize the dashboard's appearance.
    4. Import the theme via the Dashboard settings and select it from the theme dropdown menu.
    # Example: Creating a copy of the default theme via CLI
cp src/themes/default.css my-custom-theme.css

  6. Import and activate a custom theme

    main

    Once you have created your custom CSS file, follow these steps to apply it to your dashboard:

    1. Navigate to the Settings page of your Dashboard.
    2. Scroll down to the Dashboard Settings section.
    3. Click the import button.
    4. Select your custom CSS file from your local filesystem.
    5. After importing, ensure you select your new theme from the theme select dropdown menu to activate it.

  7. Configure the BOT settings

    main

    Before running the application, you must set up your configuration file:

    1. Locate the config folder.
    2. Rename config.default.json to config.json.
    3. Populate the file with your Discord Bot credentials and settings.

    Important OAuth2 Setup: You must specify a Redirect URI in the Discord Developer Dashboard. The URI used in your config must exactly match the one registered in Discord. For local development, use: http://localhost:1337/login/api

    Privileged Intents: Ensure you enable "Privileged Gateway Intents" in the Discord Developer Dashboard to prevent errors with commands like "Kick" or "Ban".

    {
    "clientID":"BOTclientID",
    "clientSecret":"BOTclientSecret",
    "callbackURL":"http://localhost:1337/login/api",
    "Admin":["userAdminID"],
    "token":"BOTtoken",
    "prefix":"-",
    "port":"3000"
}

  8. Configure the bot via config.json

    main

    After installation, you must initialize your configuration file.

    1. Locate the config.default.json file in the config folder.
    2. Rename it to config.json.
    3. Populate the file with your specific bot credentials and settings.
    {
    "clientID":"BOTclientID",
    "clientSecret":"BOTclientSecret",
    "callbackURL":"http://localhost:1337/login/api",
    "Admin":["userAdminID"],
    "token":"BOTtoken",
    "prefix":"-",
    "port":"1337"
}

  9. Create a custom plugin for Discord BOT Dashboard

    main

    To create a plugin for Discord BOT Dashboard, you must follow a specific code structure that exports two main properties: run and details. The run function contains the logic executed when the plugin is triggered, while the details object provides metadata used by the dashboard to display information about your plugin.

    Implementation Requirements

    1. module.exports.run: A function that accepts (client, message, args). This is where your command logic resides.
    2. module.exports.details: An object containing the following keys:
      • name: The display name of the plugin.
      • author: The creator's identifier.
      • icon: A URL pointing to the plugin's icon.
      • description: A brief explanation of what the plugin does.
      • usage: A string showing how to use the command (typically including the bot's prefix).
    // Requirements
const discord = require ("discord.js");
// Required display prefix
const prefix = require('../config/config.json')

// All the code for you Plugin goes inside here
module.exports.run = (client, message, args) =>{
    message.channel.send ('pong!')
}

// IMPORTANT Allows DBD to know details about your Plugin
module.exports.details = {
    name:'Ping',
    author:'LachlanDev#8014',
    icon:'URL',
    description:'ping command description',
    usage:`${prefix.prefix}ping`
}

  10. Update Discord BOT Dashboard V2

    main

    To update to a newer version of Discord BOT Dashboard, follow these steps:

    1. Download: Get the latest version from the GitHub Releases page.
    2. Install Dependencies: Navigate to the new version's directory in your terminal and run npm install to ensure all requirements are met.
    3. Migrate Configuration:
      • Locate the config folder in your old installation's root directory.
      • Copy all files from the old config folder into the config folder of the new installation.
    4. Migrate Plugins (Optional): If you use external plugins, copy the commands folder from your old installation to the new one.

    Once completed, your BOT Settings and previously configured plugins should be functional in the new version.

    npm install

  11. How the dashboard server and real-time uptime updates work

    main

    The dashboard is built using an Express server integrated with Socket.io to provide real-time updates from the Discord bot.

    Real-time Uptime Updates

    The server establishes a WebSocket connection via Socket.io. Once a client connects, the server emits an uptime event every second. This event contains a formatted string representing the Discord bot's current uptime (e.g., 0d 1h 2m 3s).

    Server Configuration

    • Port: The server listens on the port specified in ./config/config.json.
    • Static Files: The server serves static assets from ./public and ./themes directories.
    • Session Secret: Uses process.env.SESSION_SECRET if provided; otherwise, it generates a random 32-byte hex string.
    • View Engine: Uses ejs for templating.
    // Client-side listener for real-time uptime updates
const socket = io();
socket.on('uptime', (data) => {
  console.log('Bot Uptime:', data.uptime);
});