How to make Web Dashboard for discord bot

Possible make Discord bot and webpage on same project?
Sorry for bad english.

Hello @DiscordPug

Yes! You can run an express server with dynamic data and also run discordjs. I can show you an example and then you can research for more functions

bot.js

const Discord = require('discord.js');

const bot = new Discord.Client({
	disableEveryone: true
});
bot.settings = require('./settings/botsettings.json');
bot.commands = new Discord.Collection();
bot.token = process.env.TOKEN;

require('./express/server')(bot); //This line execute the /express/server.js file

bot.login(bot.token);

express/server.js

const http = require('http');
const express = require('express');
const app = express();

// Example of hello world
index.get('/', (req, res) => {
	res.send('Hello World!');
})

// Example of http for ping
index.get('/ping', (req, res) => {
	console.log(new Date() + ' Ping!');
	res.status(200).send('Ping!');
});

// Example of API from your client (discord.js)
module.exports = bot => {
  // get all guilds the bot is logged in
	app.get('/api/guild/all', (req, res) => {
		let guilds = bot.guilds.array();
		res.status(200).send(guilds);
	});
}

// Listener
const listener = app.listen(process.env.PORT, function() {
	console.log('Your app is listening on port ' + listener.address().port);
});

// Auto-ping interval
setInterval(() => {
	http.get(`http://${process.env.PROJECT_DOMAIN}.glitch.me/ping`);
}, 280000);

Sorry im so Dumb Can u explain Step by Step?

The files I sent are the main discordjs bot instance and an express server. It means to show you how to setup both.

The first file should be where is your Discord.Client. Then I add this line before the bot.login() function

require('./express/server')(bot); //This line execute the /express/server.js file

This will run the next file wich is the express server.

In that file there is an example of hello world in the index.

The get /ping is for your uptimeRobot. So your bot doesn’t go to sleep. (The http request for the robot should be http://project-name.glitch.me/ping)
Also at the end is the setInterval for make an auto-ping every 5 minutes.

Finally there is a module.exports = bot. This is for use the Discord.Client object in your web.
I add a /api/guild/all like example. This send all the info of the guilds the bot is in.

If you want to make a web dashboard you should learn more than this examples. Or maybe search somebody who already made one and copy the code.

2 Likes

Just make sure you implement authentication of sorts or else your users are screwed.

6 Likes