devcodes-website

Instantly generate a beautiful, modern website for any Discord bot.

Give your Discord bot a professional landing page in under 10 lines of code. devcodes-website generates a fully self-contained, mobile-responsive, dark-themed website served by an Express server — no static files to host, no templates to manage.

Features

• 🎨 Fully customisable — change accent colour, background, cards
• 📊 Live stats — server count & user count update dynamically via setStats()
• 🔗 Invite + Support links — "Add to Discord" & "Support Server" CTAs built in
• ⚡ Commands showcase — list your commands grouped by category
• 📦 Zero config HTML — completely self-contained, no external assets required (except Google Fonts)
• 🟦 TypeScript first — full type definitions included

Install

npm install devcodes-website

Quick Start

const { BotWebsite } = require('devcodes-website');

const site = new BotWebsite({
  name: 'My Bot',
  tagline: 'The bot your server deserves',
  description: 'A powerful, easy-to-use Discord bot with moderation, music, games and more.',
  avatar: 'https://cdn.discordapp.com/avatars/YOUR_BOT_ID/YOUR_AVATAR.png',
  prefix: '!',

  serverCount: 150,
  userCount: 12000,

  inviteUrl: 'https://discord.com/oauth2/authorize?client_id=YOUR_ID&scope=bot',
  supportUrl: 'https://discord.gg/your-server',
  githubUrl: 'https://github.com/you/your-bot',

  port: 3000,
});

site.listen(() => console.log('Website running on http://localhost:3000'));

Configuration

BotWebsiteConfig

| Property | Type | Required | Description | |---|---|---|---| | name | string | ✅ | Bot display name | | description | string | ✅ | Description paragraph shown in the hero | | tagline | string | | Short one-line tagline shown as gradient text | | avatar | string | | URL to the bot's avatar image | | prefix | string | | Command prefix shown as a hero stat pill | | serverCount | number | | Number of servers the bot is in | | userCount | number | | Number of users the bot can see | | inviteUrl | string | | OAuth2 invite link — renders "Add to Discord" button | | supportUrl | string | | Discord support server invite — renders "Support Server" button | | githubUrl | string | | GitHub repository URL shown in footer | | features | BotWebsiteFeature[] | | Feature highlight cards (4 defaults if omitted) | | commands | BotWebsiteCommand[] | | Commands to showcase — grouped by category | | theme | BotWebsiteTheme | | Color scheme overrides | | port | number | | Port to serve on (default: 3000) |

BotWebsiteFeature

{ icon: '🛡️', title: 'Moderation', description: 'Powerful moderation tools.' }

BotWebsiteCommand

{ name: 'ban', description: 'Ban a member from the server.', category: 'Moderation' }

BotWebsiteTheme

theme: {
  accent: '#5865f2',           // primary color (default: Discord blurple)
  accentSecondary: '#7289da',  // hover color
  background: '#0a0a0f',       // page background
  backgroundCard: '#12121e',   // card background
}

Updating Live Stats

Call setStats() at any time to update the displayed counts without restarting:

// With discord.js
client.on('guildCreate', () => {
  site.setStats({ serverCount: client.guilds.cache.size });
});
client.on('guildDelete', () => {
  site.setStats({ serverCount: client.guilds.cache.size });
});

The frontend polls /devcodes-website/stats and updates the hero stat pills automatically.

Adding Custom Routes

The underlying Express app is exposed as site.app:

site.app.get('/api/custom', (req, res) => {
  res.json({ hello: 'world' });
});

site.listen(3000);

Full discord.js Example

const { Client, GatewayIntentBits } = require('discord.js');
const { BotWebsite } = require('devcodes-website');

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

const site = new BotWebsite({
  name: 'Dev Codes Bot',
  tagline: 'The ultimate utility bot',
  description: 'Showcase, moderation, fun commands and more — everything your server needs.',
  prefix: '!',
  inviteUrl: 'https://discord.com/oauth2/authorize?client_id=YOUR_ID&scope=bot',
  supportUrl: 'https://discord.gg/ESh2Dp2xX9',
  theme: { accent: '#5865f2' },
  features: [
    { icon: '🛡️', title: 'Moderation', description: 'Ban, kick, mute and more.' },
    { icon: '🎵', title: 'Music',       description: 'High-quality music playback.' },
    { icon: '🎮', title: 'Fun',         description: 'Games and fun commands.' },
    { icon: '📊', title: 'Stats',       description: 'Detailed server statistics.' },
  ],
  commands: [
    { name: 'ping',  description: 'Check bot latency.',   category: 'Utility' },
    { name: 'help',  description: 'List all commands.',    category: 'Utility' },
    { name: 'ban',   description: 'Ban a member.',         category: 'Moderation' },
    { name: 'kick',  description: 'Kick a member.',        category: 'Moderation' },
    { name: 'play',  description: 'Play a song.',          category: 'Music' },
    { name: 'skip',  description: 'Skip the current song.',category: 'Music' },
  ],
  port: 3000,
});

client.once('ready', () => {
  site.setStats({
    serverCount: client.guilds.cache.size,
    userCount:   client.users.cache.size,
  });
  site.listen(() => {
    console.log(`Website: http://localhost:3000`);
    console.log(`Bot: ${client.user.tag}`);
  });
});

client.on('guildCreate', () => site.setStats({ serverCount: client.guilds.cache.size }));
client.on('guildDelete', () => site.setStats({ serverCount: client.guilds.cache.size }));

client.login(process.env.BOT_TOKEN);

API

new BotWebsite(config)

Creates the website instance. The Express server is set up but not started.

site.listen(port?, callback?)

Starts the server. Returns the http.Server instance.

site.setStats({ serverCount?, userCount? })

Updates live stats. The frontend polls automatically — no restart needed. Chainable.

site.updateConfig(patch)

Patches the config and re-renders the page HTML. Useful for updating bot info at runtime. Chainable.

site.close(callback?)

Gracefully stops the server.

site.app

The raw Express Application — add custom middleware or routes.

Support

Need help? Join our Discord: discord.gg/ESh2Dp2xX9