**Simple (self-hosted) Stats Front-End Page:**
- Done with bootstrap
- Design: for with [discord-hybrid-sharding](https://npmjs.com/discord-hybrid-sharding)
- Because it's filtering forclusters, you can easily change it to [JUST SHARDS](#just-shards)
- create: `server.js` on your website host (can be same as bot host if you want)
```js
const Stats = require('sharding-stats');
const express = require("express");
const app = express();
const port = 3333;
const StatsServer = new Stats.Server(app, {
selfHost: true,
stats_uri: "http://localhost:3333/", //Base URL
authorizationkey: "your_secure_password",
// not needed on self host- so boiler data
bot: { name: "s", icon: "s", website: "s", client_id: "s", client_secret: "s" }, redirect_uri: "s",
owners: ["442355791412854784"],
});
// http://localhost:3333/statuspage -> to see the status
app.get("/statuspage", (req, res) => {
const data = StatsServer.getStatsData().raw.shards
const sorted = StatsServer.chunkShardsToClusterArrays(data)
let statsBody = "";
const shardMap = x => `
`
// set header for html content
res.setHeader('Content-type','text/html');
// send status page with auto-reloader and more
res.send(`
Bot | Status
${statsBody}
`);
});
StatsServer.on('error', console.error)
app.listen(port, () => console.log("website ready"));
```
**bot.js file**
```js
//const { ClusterClient } = require('discord-hybrid-sharding');
//const Discord = require('discord.js');
//const client = new Discord.Client({ intents: [Guilds,GuildMessages,GuildMembers] })
//client.cluster = new ClusterClient(client);
// however you create your client, it needs to be passed in the sharding stats
const Stats = require('sharding-stats');
new Stats.Client(client, {
stats_uri: 'http://localhost:3333/', // url and port MUST be the same as on server.js, e.g. 'http://127.127.127.127:3333/'
authorizationkey: "your_secure_password", postinterval: 2000,
})
```
**Images**
## just shards
- without clustering filtering (for plain discord.js sharding or no clusters etc.)
- create: `server.js` on your website host (can be same as bot host if you want)
```js
const Stats = require('sharding-stats');
const express = require("express");
const app = express();
const port = 3333;
const StatsServer = new Stats.Server(app, {
selfHost: true,
stats_uri: "http://localhost:3333/", //Base URL
authorizationkey: "your_secure_password",
// not needed on self host- so boiler data
bot: { name: "s", icon: "s", website: "s", client_id: "s", client_secret: "s" }, redirect_uri: "s",
owners: ["442355791412854784"],
});
// http://localhost:3333/statuspage -> to see the status
app.get("/statuspage", (req, res) => {
const data = StatsServer.getStatsData().raw.shards
const sorted = data.sort((a,b) => a.id - b.id);
let statsBody = "";
const shardMap = x => `
#${x.id}
`;
statsBody += `
${sorted.length} Shards
${sorted.map(shardMap).join("")}
`
// set header for html content
res.setHeader('Content-type','text/html');
// send status page with auto-reloader and more
res.send(`
Bot | Status
${statsBody}
`);
});
StatsServer.on('error', console.error)
app.listen(port, () => console.log("website ready"));
```
**bot.js file**
```js
//const { ClusterClient } = require('discord-hybrid-sharding');
//const Discord = require('discord.js');
//const client = new Discord.Client()
//client.cluster = new ClusterClient(client);
// however you create your client, it needs to be passed in the sharding stats
const Stats = require('sharding-stats');
new Stats.Client(client, {
stats_uri: 'http://localhost:3333/', // url and port MUST be the same as on server.js, e.g. 'http://127.127.127.127:3333/'
authorizationkey: "your_secure_password", postinterval: 2000,
})
```