DEV Community: Vijay Meena

🤖discord bot with create-discordx

Vijay Meena — Tue, 08 Mar 2022 22:58:32 +0000



npx create-discordx

Hello everyone, in this post. I'll share information about the command line tool that we created for developers to simplify the setup of discord bot projects using typescript. You can run your own bot within seconds. Isn't that fast?

Let's hope in

Step 1

Run following command



npx create-discordx

Step 2

Enter your bot name like my-first-bot

Step 3

Select your package-manager

Step 4

Select template

Final Step

That was it, your project will be initiated and you will something like this on your screen.

Thank you for reading!

I made this tutorial simple and short. I don't think any detailed explanation is necessary as all the steps are super simple. Let me know in comment, If you have any questions/suggestions for me. Thanks again!

References

🤖 Creating discord bot client from scratch!

Vijay Meena — Thu, 26 Aug 2021 12:32:26 +0000

We learned in the previous post how to quickly set up a discord bot, now let's take a look at how to set it up from scratch with discord.ts (discordx).

I assume you have installed node.js before we begin.

Directory structure

Here is a quick look at how the directory structure will appear at the end of this tutorial.



root
|
|__ src
   |
   |__ commands
       |__ common.ts
   |
   |__ main.ts
|
|__ tsconfig.json
|__ package.json

1. Initialize project

To initialize a node project, type npm init in your command prompt



> npm init
{
  "name": "demox",
  "version": "1.0.0",
  "description": "my discord bot",
  "main": "build/client.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

> cd demox

2. Install required packages

Run the following command to install the packages we need for our project.



> npm install discordx reflect-metadata discord.js

Typescript needs to be installed as a development dependency since our project will use it.



> npm install --save-dev @types/node typescript

Here is an example of a package file after running the above commands.



{
  "name": "demox",
  "version": "1.0.0",
  "description": "my discord bot",
  "main": "build/client.js",
  "scripts": {
    "build": "tsc",
    "start": "node build/client.js"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "discord.js": "^13.x.x",
    "discordx": "^6.x.x",
    "reflect-metadata": "^0.1.x"
  },
  "devDependencies": {
    "@types/node": "^16.x.x",
    "typescript": "^4.x.x"
  }
}

3. Setup typescript

There are two ways to set up typescript

run command npx tsc --init
manually create tsconfig.json in root directory.

Right now we're going to choose option 2, but you can choose option 1 if you prefer

Create a file named tsconfig.json in your root directory and paste the following content into it.



{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2021",
    "noImplicitAny": true,
    "sourceMap": true,
    "strict": true,
    "outDir": "build",
    "emitDecoratorMetadata": true, // required
    "experimentalDecorators": true, // required
    "declaration": false,
    "importHelpers": true, // required
    "forceConsistentCasingInFileNames": true,
    "lib": ["ES2021", "esnext.asynciterable"],
    "moduleResolution": "node"
  },
  "exclude": ["node_modules"]
}

4. Setup discord bot client

Once we have finished the important setup, we are ready to create our bot in the way we want. I will create a simple slash command today, so let's get started

Make a source folder called src in root directory
Make a file called client.ts in src folder
Copy and paste the below content into client.ts.



import "reflect-metadata";
import { Client } from "discordx";
import { Intents, Message } from "discord.js";

const client = new Client({
  botId: "test",
  // prefix: "!",
  prefix: async (message: Message) => {
    return "!";
  },
  // glob string to load the classes
  classes: [`${__dirname}/commands/**/*.{js,ts}`],
  intents: [
    Intents.FLAGS.GUILDS,
    Intents.FLAGS.GUILD_MESSAGES,
    Intents.FLAGS.GUILD_MEMBERS,
  ],
  silent: false,
});

client.on("ready", () => {
  console.log(">> Bot started");

  // to create/update/delete discord application commands
  client.initApplicationCommands();
});

client.login(process.env.BOT_TOKEN ?? "");

Notes

Classes parameter is a array of glob path, which holds all your commands or events, where each class is decorated by @Discord
If you don't want console logs, set the silent parameter to true.
The prefix parameter/resolver is used for simple commands such as !hello world
You should import the reflect-metadata module in your main file, for reflection. Otherwise, decorators may not function properly.

to learn more visit here

5. Setup slash command

Now that we are all set, we can create the slash command

note: Ensure that all files are registered with classes in client.ts.

Make a file called common.ts in src/commands/ folder.
Copy and paste the below content into common.ts.



import { CommandInteraction } from "discord.js";

import { Discord, Slash } from "discordx";

@Discord()

abstract class AppDiscord {

  @Slash("hello")

  private hello(interaction: CommandInteraction) {

    interaction.reply(:wave: </span><span class="p">${</span><span class="nx">interaction</span><span class="p">.</span><span class="nx">user</span><span class="p">}</span><span class="s2">);

  }

}

Prepare bot to execute interactions

To execute any discord application command, we need to call client.executeInteraction. Without this step, commands will not be executed.



client.on("interactionCreate", (interaction: Interaction) => {

  client.executeInteraction(interaction);

});

Build bot

We are now ready to build our bot and launch it.



> npm run build

Setup bot token

Before we start our bot, we need to setup a bot token, if you don't have one yet, you can get one from the Discord developer portal.

Check out this guide for more information on adding the bot to your discord server before starting the bot. The bot must be added to the server with required permissions, otherwise the slash command will fail.



> set BOT_TOKEN="<your bot token>"

Start your bot

Your bot is ready to go 🚀



> npm start

Finally

The /hello slash command will appear in your discord server.

Reference

Need more help?

Join our discord server

Thank you

If there are any mistakes, I apologize, Next, we will learn how to create a slash command with options.

🤖 Create your Discord bot by using TypeScript and decorators!

Vijay Meena — Wed, 25 Aug 2021 13:18:15 +0000

Hello all, Today, I will demonstrate how to create a discord bot using typescript and manage it easily with discordx.

I will show you the fastest way to setup your bot in this post, then in a subsequent post I will show you how to set it all up from scratch.

before we start, I assume you have some familiarity with discord bots, typescript decorators, and node.js.

Let's start

Step 1: Clone starter bot



git clone https://github.com/oceanroleplay/discord.ts-example



cd discord.ts-example

Step 2: Install dependencies



npm install

Step 3: Set bot token
In case you don't have a bot token yet, you can get it from the Discord developer portal



set BOT_TOKEN=<your bot token>

Step 4: build your bot



npm run build

Step 5: Start your bot



npm run start

And you're done, everything has been done for you! 🚀

What's behind?

Steps above seem straight forward, let's discuss in depth.

we are using package called discordx to create the bot with decorators.

📔Decorators

There is a whole system that allows you to implement complex slash/simple commands and handle interactions like button, select menu, contextmenu etc.

General

Commands

GUI Interactions

Project files

Here are the source files for the project and important configurations

tsconfig.json



{
  "compilerOptions": {
    "target": "ES2021",
    "module": "commonjs",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true
    "esModuleInterop": true,

    /* Experimental Options */
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true ,

    /* Advanced Options */
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

package.json



{
  "name": "discord.ts-example",
  "version": "1.0.0",
  "description": "",
  "main": "build/client.js",
  "scripts": {
    "build": "tsc",
    "start": "node build/client.js",
    ...
  },
  ...
  "dependencies": {
    "discord.js": "^13.1.0",
    "discordx": "^5.7.0",
    "reflect-metadata": "^0.1.13"
  }
...
}

DEV Community: Vijay Meena

🤖discord bot with create-discordx

Step 1

Step 2

Step 3

Step 4

Final Step

Thank you for reading!

References

🤖 Creating discord bot client from scratch!

Directory structure

1. Initialize project

2. Install required packages

3. Setup typescript

4. Setup discord bot client

5. Setup slash command

Prepare bot to execute interactions

Build bot

Setup bot token

Start your bot

Finally

Reference

Need more help?

Thank you

🤖 Create your Discord bot by using TypeScript and decorators!

Let's start

What's behind?

📔Decorators

General

Commands

GUI Interactions

Project files

tsconfig.json

package.json

Reference

Need more help?

Thank you

Screenshots

@Slash

@ButtonComponent

@SelectMenuComponent

@ContextMenu