How to Build a Discord Bot With Node.JS

Damir Ljubičić — Wed, 07 Feb 2024 12:17:37 +0000

In this tutorial, you will learn how to connect a bot to the Discord server and create commands that it will respond to. To achieve this, you will use Node, Typescript, DiscordJS, and dependency injection(InversifyJS). But before we start, let’s talk about the benefits Discord offers.

Every day we have more and more VoIP services to choose from, but most gamers have already decided on Discord for communication. Today, not only gamers but also agencies and companies started using Discord. Why? You may ask because it offers everything that business communication platforms, such as Slack or RocketChat, need. The main differences are that Discord:

Is free to use,
Provides out-of-the-box solutions without much setup or configuration,
It's perfect for larger teams, as it offers text and voice support for a great number of people

Note: Discord, along with all of the features we will be using in this tutorial, is free to use.

Before we begin with the tutorial, I assume you have the basics of Typescript and a beginner level of understanding of NodeJS. It is also recommended you are at least at an intermediate level of Javascript. Since you will be using NodeJS, having an environment set up on your PC will help you follow the code. To finish this tutorial you will also need a Discord account, so if you don’t have one, please create one.

To summarize, in this tutorial, you will learn:

How to create a Discord server and a bot
How to add a Discord bot to your server
How to set up a Node project with Typescript superset
How to use Dependency Injection with InversifyJS
How to create business logic for bot commands with DiscordJS
How to test commands through the Discord channel

Note: If you want to skip ahead to the final project, check out the code in my GitHub repository.

Setting up the project

For the IDE, you can use whatever you feel comfortable with - for me, that is Webstorm. Before creating a bot, you need to create a project. To do that, use the following command:

npm init

This will open an interactive process for initializing your project with the package.json file. Fill these questions or just skip all by pressing Enter, because it does not matter for this tutorial.

After initializing the project, install the following dependencies by running this command inside your project (terminal):

npm i --save discord.js dotenv typescript inversify @types/node reflect-metadata

Then for the last step of setup, you need to change scripts inside the package.json file. Later on, you will need two scripts, and these start and watch.

We will use the start script to start the bot and the watch one to compile the Typescript code with flag -w(atch), which will watch any changes done to the code and compile upon saving. This is how the package.json file should look like after your changes:

package.json

{
   "name":"discord-bot",
   "version":"1.0.0",
   "description":"",
   "main":"index.js",
   "scripts":{
      "start":"node dist/index.js",
      "watch":"tsc -w -p tsconfig.json"
   },
   "author":"",
   "license":"ISC",
   "dependencies":{
      "@types/node":"^14.14.37",
      "discord.js":"^12.5.3",
      "dotenv":"^8.2.0",
      "inversify":"^5.0.5",
      "reflect-metadata":"^0.1.13",
      "typescript":"^4.2.3"
   }
}

Now that you have set up the scripts, it is time to define the TS compiler for your project.

Defining Typescript compiler

Create tsconfig.json in the root directory and add the following snippet to the file:

"experimentalDecorators": true,

"emitDecoratorMetadata": true,

"resolveJsonModule": true

tsconfig.json

{
   "compilerOptions":{
      "module":"commonjs",
      "moduleResolution":"node",
      "target":"es2016",
      "lib":[
         "es6",
         "dom"
      ],
      "sourceMap":true,
      "types":[
         "node",
         "reflect-metadata"
      ],
      "typeRoots":[
         "node_modules/@types"
      ],
      "experimentalDecorators":true,
      "emitDecoratorMetadata":true,
      "resolveJsonModule":true
   },
   "exclude":[
      "node_modules"
   ]
}

We are adding experimentalDecorators, emitDecoratorMetadata, es6, and reflect-metadata because InversifyJS requires it. Once we have created this, we can create index.ts inside the src folder and run something like console.log(“Hello”) just for testing purposes.

index.ts

console.log(“Hello”)

If everything is correct, run npm run watch which should create src/index.js, and then run npm start which returns the simple message Hello.

The next step is to create a Discord app and connect a Bot to your server.

Creating an application on Discord

Our goal is to communicate and work with the Discord server, but before you do that you need to create a Discord bot that will connect to the server.

To create the bot, first, you need to sign in to Discord and create an application. You can do that by visiting here and clicking on the New Application button at the top right corner.

Clicking the New Application button will prompt you to the next step, where you need to choose the NAME of your application. Whenever you are ready, click Create.

Now, you should see an Application screen with the possibility to enter information about the application - you can skip it for this tutorial.

To create a bot, click Bot and then the Add Bot button. It will tell you that this action is irrevocable and ask you if you want to create a bot. After clicking Yes, do it! You will create a Discord bot. So simple, right?

A page, including the token you need, should open up on your screen right now.

Creating and adding a Discord bot to your server

To work with and later on test your bot, you need a Discord server. You need to either create a new Discord server or use an existing one. Whatever you decide, connecting will look the same.

To add the bot to your server, follow these steps:

Copy APPLICATION_ID from the General Information tab.
Change APPLICATION_ID in the following URL to the one you copied
Open the URL in a browser of your choice to start the authentication process.
Authorize the process of adding the bot to the server through the steps provided by Discord.
Once the bot is successfully added, you will get a message in the default text channel.

Now that you have added a bot to the server, it is time to set up the environment in your project.

Saving variables in environment files

To safely provide a token to our application, we are using the dotenv package. You need to get the Bot token from the Discord Application developer dashboard. It is located at Bot > Click to Reveal Token. After you have the token, you need to safely store it in the .env file in the following way:

DISCORD_TOKEN=paste.the.token.here

One more thing we need to create for the future is the .env.example file. It explains how to define the .env file. Inside of the .env.example place:

DISCORD_TOKEN=

Dependency Injection Container

For an easier understanding of dependency injections, you should already have a solid knowledge of the SOLID principle. If you do, you will have no issue understanding what dependency injections are used for.

In our case, we use InversifyJS for dependency injections, and that is why we need to create our DI container in the inversify.config.ts file:

import "reflect-metadata"
import { Container } from "inversify"
import { TYPES } from "./types"
import { Bot } from "./bot"
import { Client } from "discord.js"
let container = new Container() 

container.bind < Bot > (TYPES.Bot).to(Bot).inSingletonScope() 
container.bind < Client > (TYPES.Client).toConstantValue(new Client()) 
container.bind < string > (TYPES.Token).toConstantValue(process.env.TOKEN) 

export default container

One more thing we need to do for dependency injections is to define types. This will give us the security to not have name collisions with containers. Even though it doesn’t matter that much for us in this tutorial, it is good practice to follow the clean architecture and best practices even when developing a project like this.

types.ts

export const TYPES = { 
Bot: Symbol("Bot"), 
Client: Symbol("Client"), 
Token: Symbol("Token"), 
}

Creating a Bot Class

We will create bot.ts inside the src folder and add the following:

import {Client, Message} from "discord.js" 
import {inject, injectable} from "inversify" 
import {TYPES} from "./types"
import {CommandResponder} from "./services/command-responder" 

@injectable() 
export class Bot { 
    private client: Client 
    private readonly token: string 

    constructor( @inject(TYPES.Client) client: Client, @inject(TYPES.Token) token: string ) { 

        this.client = client 
        this.token = token 
    } 

    public listen(): Promise < string > { 

        this.client.on('message', (message: Message) => { 
            console.log("We got message, it says: ", message.content) 
        }); 

        return this.client.login(this.token) 
    } 
}

After this, you can add the bot to index.ts:

require('dotenv').config() 

import container from "./inversify.config" 
import {TYPES} from "./types" 
import {Bot} from "./bot" 


let bot = container.get<Bot>(TYPES.Bot) 


bot.listen().then(() => { 
    console.log('Logged in!') 
}).catch((error) => { 
    console.log('Oh no! ', error) 
})

With this done, we have created our basic logic and we can start the project and connect the bot with the Discord server.

node src/index.js 
Logged in! 
We got message, it says: Test

These are your project foundations. The next step is to develop the logic for listening and responding to messages.

Responding to messages

Now, you need to create the logic that listens to certain types of messages and responds to them accordingly. Specifically, you want the bot to listen to two commands: !who and !roll. These two commands will make the bot introduce himself and roll one number between 1 and 100. ‍ Then, you need to create two classes - CommandListener and CommandResponder. Do it by injecting CommandResponder into the Bot class and CommandListener into the CommandResponder. But first, we need to create command-listener.ts inside src/services.

import { injectable } from "inversify" 

@injectable() 

export class CommandListener { 
    private regexp = ['!who', '!roll'] 
    public isWhoCommand(string: string): boolean { 
        return string.search(this.regexp[0]) >= 0 
    } 


    public isRollCommand(string: string): boolean { 
        return string.search(this.regexp[1]) >= 0 
    } 
}

You can inject that to command-responder.ts, which you can create inside src/services.

import {Message} from "discord.js" 
import {CommandListener} from "./command-listener" 
import {inject, injectable} from "inversify" 
import {TYPES} from "../types" 

@injectable() 
export class CommandResponder { 
    private commandListener: CommandListener 

    constructor( 
        @inject(TYPES.CommandListener) commandListener: CommandListener ) { 
            this.commandListener = commandListener 
        } handle(message: Message): Promise<Message | Message[]> { 
            if (this.commandListener.isWhoCommand(message.content)) { 
                return message.reply('I am bot that is made to demonstrate connection between NodeJs and Discord.') 
            } 

            if (this.CommandListener.isRollCommand(message.content)) { 
                const rolled = Math.floor(Math.random() * 100) + 1 return message.reply(`You have rolled ${rolled}`) 
            } 

            return Promise.reject() 
        } 
    }

And then, the Bot class needs to be changed to use the CommandResponder class:

import {Client, Message} from "discord.js" 
import {inject, injectable} from "inversify" 
import {TYPES} from "./types" 
import {CommandResponder} from "./services/command-responder" 

@injectable() export class Bot { 
    private client: Client 
    private readonly token: string 
    private commandResponder: CommandResponder constructor( 

        @inject(TYPES.Client) client: Client, 
        @inject(TYPES.Token) token: string, 
        @inject(TYPES.CommandResponder) commandResponder: CommandResponder) { 


            this.client = client 
            this.token = token 
            this.commandResponder = commandResponder 
        } 

        public listen(): Promise<string> { 
            this.client.on('message', (message: Message) => { 

                if (message.author.bot) { console.log('Ignoring my own or other bot messages.') 
                return 

            } 

            this.commandResponder.handle(message).then(() => { 
                console.log("A response sent!") 
            }).catch(() => { 
                console.log("There was an error with sending a response.") 
            }) 
        }) 

        return this.client.login(this.token) 
    } 
}

One last thing to do is create new DI containers and types for CommandResponder and CommandListener.

Remember how you bound containers before for token, Bot, and Client classes? Now you need to do the same for CommandResponder and CommandListener.

inversify.config.ts

container.bind<CommandResponder>(TYPES.CommandResponder).to(CommandResponder).inSingletonScope() 

container.bind<CommandListener>(TYPES.CommandListener).to(CommandListener).inSingletonScope()

You also need to add these two types, so that you don’t create a bug by the last addition to the inversify.config.ts. An error will occur because you used CommandResponder and CommandListener types which are not declared in types.ts.

types.ts

CommandResponder: Symbol("CommandResponder"), 
CommandListener: Symbol("CommandListener")

And voila! Your Discord bot is ready to listen to your two new commands and respond to them accordingly. The only thing left to do is to restart the app and test the bot.

After testing our commands, this is the response you get:

This is the response you should expect - it shows everything works as developed.

What’s next?

First of all, congratulations! You just made it through the whole article and (hopefully) learned how to do a Discord bot. But you might say - OK, that's cool and all. But what can I do with it? Well, you can play around and create more complex commands, connecting Discord to your external database or integrating Discord with some type of API (such as OMDB API or any other of the free ones). However, since I covered the basics in this article, I suggest you research larger communities and learn about all the commands and the complexity of Discord bots.

If you have any questions or ideas regarding this blog post, please feel free to reach out. And most importantly, have fun coding! :)

What plugins do I use as a NodeJS developer(for VSC)?

Damir Ljubičić — Tue, 22 Sep 2020 07:52:43 +0000

"Give me six hours to chop down a tree and I will spend the first four sharpening the axe" - Abraham Lincoln

As a young developer, having numerous plugins out there to choose from is both blessing and a curse. Without idea where to look for and what to look for, going through "List of 10 best plugins for VSC" articles to find what people like and use, just to be able to tailor what works and what could help YOU to develop better applications.

Without further ado, here are plugins I use as a Backend developer(NodeJS, Typescript) to ease the process and speed it up.

Beautify (5 407 267 downloads)

Beautify code in place for VS Code
Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio code.

Colonize (31 882 downloads)

Adds semicolon at the end of the line and optionally newline after
Adds three shortcuts to insert semicolons with ease;

shift + enter Insert semicolon at the end of the line and continue on the same line
alt + enter Insert semicolon at the end of the line and continue on the new line
ctrl + alt + enter Insert semicolon and stay at the same position

GitLens — Git supercharged (6 391 990 downloads)

Supercharge the Git capabilities built into Visual Studio Code
GitLens simply helps you better understand code. Quickly glimpse into whom,
why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.

Javascript(ES6) code snippets (4 019 175 downloads)

Code snippets for JavaScript in ES6 syntax
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code
editor (supports both JavaScript and TypeScript).

npm Intellisense (2 407 941 downloads)

Visual Studio Code plugin that autocompletes npm modules in import statements

Paste JSON as Code (573 036 downloads)

Copy JSON, paste as Go, TypeScript, C#, C++, and more.
Interactively generate types and (de-)serialization code from JSON, JSON Schema, and TypeScript
Paste JSON/JSON Schema/TypeScript as code

SSH FS (203 266 downloads)

File system provider using SSH
This extension makes use of the new FileSystemProvider, added in version 1.23.0
of Visual Studio Code. It allows "mounting" a remote folder over SSH as a local
Workspace folder.

Todo Tree (688 353 downloads)

Show TODO, FIXME, etc. comment tags in a tree view
This extension quickly searches (using ripgrep) your workspace for comment tags
like TODO and FIXME, and displays them in a tree view in the explorer pane.
Clicking a TODO within the tree will open the file and put the cursor on
the line containing the TODO.

DEV Community: Damir Ljubičić