| title | description |
|---|---|
Quickstart |
Let's start building a quick, easy, and awesome dashboard in 5 minutes! |
Learn how to develop your Dashboard
To use discord-dashboard, you'll need to install [Node.js](https://nodejs.org/).<Tip>
To check if you already have Node installed, run node -v in your terminal.
If you want to use a different package manager like [pnpm](https://pnpm.io/), [yarn](https://yarnpkg.com/) or [bun](https://bun.sh/) you can replace the commands with the proper command name.
Navigate to a suitable directory on your machine and create your project's folder.
Ctrl + ` (backtick) to open its integrated terminal.
On Microsoft Windows, either:
Shift + Right-clickinside your project directory and choose the "Open command window here" option- Press
Win + Rand runcmd.exethencdinto 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.
npm inityarn initpnpm initbun initThis 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!
<Step title="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.jsyarn add discord-dashboard dbd-soft-ui discord.jspnpm add discord-dashboard dbd-soft-ui discord.jsbun add discord-dashboard dbd-soft-ui discord.jsAnd now that we've installed the required modules, we can start setting up the 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:```json 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](https://discord.com/developers/applications) in the Discord Developer Portal. (e.g. "http://localhost/discord/callback")
</Step>
<Step title="Creating index.js">
Create a new file, `index.js` (or anything you'd like) and paste the discord-dashboard handler into it.
```javascript 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: "[email protected]",
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();
})();
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.
<Card title="Change Images and Texts" icon="paintbrush" href="/soft-ui/docs/locales"
Change any text or image to your own.
<Card title="Add API Endpoints" icon="square-code" href="/api-playground/configuration"
Implement your OpenAPI spec and enable API user interaction.
<Card title="Integrate Analytics" icon="chart-mixed" href="/analytics/supported-integrations"
Draw insights from user interactions with your documentation.
<Card title="Host on a Custom Domain" icon="browser" href="/settings/custom-domain/subdomain"
Keep your docs on your own website's subdomain.