{"id":2206,"date":"2021-10-24T17:49:44","date_gmt":"2021-10-24T21:49:44","guid":{"rendered":"https:\/\/www.alpharithms.com\/?p=2206"},"modified":"2021-10-24T17:49:44","modified_gmt":"2021-10-24T21:49:44","slug":"how-to-code-a-discord-bot-in-javascript","status":"publish","type":"post","link":"https:\/\/www.alpharithms.com\/how-to-code-a-discord-bot-in-javascript-444917\/","title":{"rendered":"How to Code a Discord Bot in Javascript"},"content":{"rendered":"

Discord is a powerful communications application used by a huge community of gamers, developers, and cryptocurrency enthusiasts. There is an ocean of unique Discord bots admins can add to their servers. For those more inclined to take matters into their own hands\u2014there are also powerful APIs for creating Discord bots.<\/p>\n

By using Discord.js one can make a Discord bot using Javascript with relative ease. In this Discord bot tutorial, we’ll walk through all the essentials to get a bot deployed to our Discord server. Before diving in completely, let’s first consider some basic requirements needed to get a Discord bot up and running.<\/p>\n

Quick Introduction<\/h2>\n

Discord uses an HTTP API for which there are plenty of wrapper libraries in various languages. For our discussion here, we’ll be using the JavaScript wrapper Discord.js<\/a>. This library provides a robust set of high-level interfaces for interacting with the Discord API. In this tutorial, we’ll cover the following topics:<\/p>\n

    \n
  1. Project Setup + Installing libraries<\/li>\n
  2. Ensuring the proper version of Node.js is installed<\/li>\n
  3. Registering an application in the Discord developers portal<\/li>\n
  4. Configuring our bots’ permissions<\/li>\n
  5. Coding the bot’s logic in Discord.js<\/li>\n<\/ol>\n

    By the end of this tutorial, we will have a fully functioning Discord bot that can be deployed to a server of our choosing. This tutorial assumes readers are familiar with basic JavaScript syntax, basic Node.js project configuration, and installing packages via npm.<\/p>\n

    Step 1: Project Setup<\/h2>\n

    To get started we need to complete the following tasks:<\/p>\n

      \n
    1. Create a new project folder with relevant files<\/li>\n
    2. Initializes a new Node.js project<\/li>\n
    3. Install dependencies<\/li>\n
    4. Update Node if necessary<\/li>\n<\/ol>\n

      We’ll break these steps down, one by one, to make sure our application gets started on the right foot.\u00a0First up, let’s create a new project folder and initialize it as a new Node.js project<\/p>\n

      Note<\/strong>: These steps are being completed on a Windows 10 machine in the WebStorm IDE by Jetbrains.<\/p>\n

      Step 1a: Create a New Project and Initialize as Node.js Project<\/h3>\n

      After creating a new project directory we need to initialize the project as a Node.js project. This can be done with the npm init<\/code> command and results in the following output:<\/p>\n

      \"npm<\/a>
      The configuration prompts, and the resulting output, after issuance of the npm init command (click to enlarge)<\/figcaption><\/figure>\n

      Alternatively, we could use npm init --y<\/code> to accept all the defaults generated by npm.<\/p>\n

      Step 1.b: Install Dependencies<\/h3>\n

      We have to install some dependencies to give alphabot some pizzaz. The only\u00a0essential <\/em>library is Discord.js<\/a>. However, we will also install dotenv<\/a> to help manage alphabot’s token so our API calls can be properly authorized. These can both be installed in one line as such: npm i --save discord.js dotenv<\/code>. The --save<\/code> flag will ensure these packages are listed as dependencies in package.json<\/code>. To be sure, we’ll confirm the contents of our package.json file to reflect the following:<\/p>\n

      {\r\n  \"name\": \"alphabot\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"A discord bot for the alpharithms discord channel\",\r\n  \"main\": \"alphabot.js\",\r\n  \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n  },\r\n  \"keywords\": [\r\n    \"discord\",\r\n    \"alpharithms\"\r\n  ],\r\n  \"author\": \"@alphazwest\",\r\n  \"license\": \"MIT\",\r\n  \"dependencies\": {\r\n    \"discord.js\": \"^13.2.0\",\r\n    \"dotenv\": \"^10.0.0\"\r\n  }\r\n}<\/pre>\n
      Step 1.c: Add a .env File to Hold our OAuth2 Token<\/h3>\n
      Discord.js needs our application’s token to make calls to the Discord API. This can be hard-coded into our application, loaded via a text file, or any number of other approaches. In the spirit of good practice, we’re going to be using a system environment variable facilitated by the dotenv<\/code> package.<\/p>\n
      To make this work, we need to create a new file named .env in our project folder and add the following information:<\/p>\n
      DISCORD_TOKEN={OUR_DISCORD_BOT_TOKEN}<\/pre>\n
      We’ll cover how this works in just a bit. For now, let’s take a step back and make sure our project folder reflects all that is required. Our project structure should now look like this:<\/p>\n
      .\r\n\u2514\u2500\u2500 alphabot\/\r\n    \u251c\u2500\u2500 node_modules\r\n    \u251c\u2500\u2500 .env\r\n    \u251c\u2500\u2500 package.json\r\n    \u2514\u2500\u2500 package-lock.json<\/pre>\n
      Optional: Update Node.js<\/h3>\n
      As of Discord.js V13.0.0, Node.js version >=16.0.0 is required. At the time of writing, the current LTS version of Node.js is 14.18.1 which will not satisfy the requirement for Discord.js<\/strong>. More information on this can be found here<\/a>. To remedy this situation, simply download Version 16.0.0 or greater.<\/p>\n
      With all this setup out of the way, our next step is to get a Discord application registered, create our bot, get an OAuth2 URL, and return to our project folder with an API access token.<\/p>\n
      Step 2: Register Discord Application<\/h2>\n
      To get started we need to register an application. This is done via the Discord Developer’s Portal. To access this portal one must log in to the web browser version of Discord then navigate to the developers portal here<\/a>. Click the\u00a0New Application\u00a0<\/em>button in the top right of the browser window to register a new application.<\/p>\n
      \"1
      Click the “New Application” button to get started with your new Discord Bot<\/figcaption><\/figure>\n
      After clicking this button we’re prompted with a dialog to create a name for our application. In this case, we’re naming our bot\u00a0alphabot<\/em>. How creative\u2014right? This is the next screen we’re shown:<\/p>\n
      \"2
      Enter a name for the application then click the “Create” button to create a new Discord application.<\/figcaption><\/figure>\n
      With this action, we’ve successfully created a new Discord application. Note: This is not<\/em> a Discord bot yet. We still have to specify a few config options for that. Here’s the screen we are now shown:<\/p>\n
      \"3
      This screen indicates the successful creation of a Discord Application<\/figcaption><\/figure>\n
      You’ll note on the left-hand side the menu has an option for\u00a0Bot<\/em>. This is where we’re going next. This will bring up permissions and authentication URLs for our new Discord bot as well as token information so we can begin coding our Discord bot. Once there, click the “Create Bot” button to reveal the following confirmation screen:<\/p>\n
      \"4
      Create a new bot and confirm to gain access to the bot configuration page<\/figcaption><\/figure>\n
      After confirming the creation of our new bot we will then land on the bot configuration page. There are several optional features we can enable here, though if our bot finds itself on more than 100 servers there may be some further verification and approval required. Read here for more details<\/a>. These are the optional features:<\/p>\n
      \"5
      Members and presence intent are optional but useful features.<\/figcaption><\/figure>\n
      These options will give our bot a few extra permissions for interacting with users. These aren’t strictly necessary but, given the relative ease by which we can enable them, why not have the added scope. Next on our list is visiting the OAuth2 menu to set our bot’s scope and get an OAuth2 URL to authorize our new bot.<\/p>\n
      \"6
      Checking “Bot” for permission scope and then selecting the desired permissions will generate an appropriate OAuth2 URL<\/figcaption><\/figure>\n
      Next up is to copy the URL shown just below the\u00a0Scopes<\/em> panel and paste it into our web browser. This will authorize our new Discord bot so we can begin developing the code. We’re now shown the following screen after copy\/pasting the OAuth2 URL into our browser of choice (Brave<\/a>, right?):<\/p>\n
      \"7
      The dropdown will allow us to select the appropriate server (from those we are a mod for) and add the bot to that server<\/figcaption><\/figure>\n
      After successfully selecting our server and clicking continue we are shown one last confirmation screen summarizing the scope of permissions that our new bot will possess. Clicking the\u00a0Authorize\u00a0<\/em>button will complete the process of creating our bot.<\/p>\n
      \"8<\/p>\n
      Note: there may be a captcha challenge here\u2014fortunately, our humanity can be easily proven. Also, if you receive an error message nagging about the bot requiring “Code Grant” go back to the Bot menu and make sure the option “Requires OAuth2 Code Grant” is disabled. With this, we are shown the following screen indicating successful authorization of a new Discord Bot.<\/p>\n
      \"successful
      This screen indicates the successful authorization of our newly-created Discord bot<\/figcaption><\/figure>\n
      Now that our bot has been created and authorized, we can move on to creating the code for our bot.<\/p>\n
      Step 3: Code the Bot<\/h2>\n
      Before we start coding, there is one final step to complete in the Discord application developers portal. We need to copy our Bot’s token in order to authorize calls from Discord.js.<\/p>\n
      Step 3.a: Copy OAuth2 Token\u00a0 to .env File<\/h3>\n
      This is simple and can be done by clicking the\u00a0Copy<\/em> button from the\u00a0Bot<\/em> menu as shown in the following image:<\/p>\n
      \"10
      Click “Copy” to copy the bot token to the clipboard. We’ll use this in just a moment when setting up our Discord.js project.<\/figcaption><\/figure>\n
      Once copied, we’ll add our bot OAuth2 token to the .env<\/code> file in the following format:<\/p>\n
      DISCORD_TOKEN=INSERT_TOKEN_HERE<\/pre>\n
      This file will load our token as a value for the Environment variable key DISCORD_TOKEN<\/code>. Next up, we’ll create a file name alphabot.js<\/code> in which our Bot’s main programmed logic will reside.<\/p>\n
      Step 3.b: Create Main File<\/h3>\n
      Here we’ll create a file named alphabot.js<\/code> in our main project directory. Our first order of business will be to set up our environment variables via the dotenv<\/code> package, import the necessary classes from discord.js<\/code>, and then instantiate a new Discord client. This is achieved via the following code:<\/p>\n
      \/\/ Setup our environment variables via dotenv\r\nrequire('dotenv').config()\r\n\r\n\/\/ Import relevant classes from discord.js\r\nconst { Client, Intents } = require('discord.js');\r\n\r\n\/\/ Instantiate a new client with some necessary parameters.\r\nconst client = new Client(\r\n    { intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] }\r\n);\r\n\r\n\/\/ Notify progress\r\nclient.on('ready', function(e){\r\n    console.log(`Logged in as ${client.user.tag}!`)\r\n})\r\n\r\n\/\/ Authenticate\r\nclient.login(process.env.DISCORD_TOKEN)<\/pre>\n
      Note we are also authenticating via the named environment variable from our .env file. This authenticates alphabot with the Discord API. Before we can start testing alphabot we must be logged into Discord and have our server (the one alphabet was added to) open and visible. Once we are in Discord, we\u00a0can check that our code is valid by running the following command: node alphabot.js<\/code>. We should now see a new user\u2014alphabot\u2014listed as being online in our Discord server:<\/p>\n
      \"alphabot<\/a>
      The Discord status sidebar will display alphabot and indicate its current online\/offline status.<\/figcaption><\/figure>\n
      We will still see alphabot listed as a member even when it is not actively connected\u2014just like any other member.<\/p>\n
      Step 4: Program the Discord Bot<\/h2>\n
      At this point, we’ve done all the heavy lifting of getting alphabot up and running. The remainder of the work can be categorized as programming and development. This stage will be different for everyone.<\/p>\n
      To get a bit of a jump start\u2014and demonstrate basic syntax usage\u2014let’s make alphabot respond to some simple commands. We need only add a few lines of code to achieve this:<\/p>\n
      \/\/Example Functionality\r\nclient.on('message',\r\n    function(msg){\r\n        if(msg.content === \"Hello alphabot!\"){\r\n            msg.reply(\"Hello yourself!\")\r\n        }\r\n    })<\/pre>\n
      In this example, we’ve instructed alphabot to listen to the server chat for any message that exactly matches “Hello alphabot!” and\u2014if detected\u2014respond to that user with a reply of “Hello yourself!” This is achieved with the following lines of code:<\/p>\n
      \/\/Example Functionality\r\nclient.on('message',\r\n    function(msg){\r\n        if(msg.content === \"Hello alphabot!\"){\r\n            msg.reply(\"Hello yourself!\")\r\n        }\r\n    })<\/pre>\n
      We’ll have to close our previous Node.js instance down and re-start alphabot for these changes to take place. Once a restart has happened, we can type the phrase that we’ve coded alphapbot to respond to (Hello alphabot!). We should get a response as shown in the image below:<\/p>\n
      \"alphabot
      Alphabot should greet us cordially at this point\u2014responding near instantaneously.<\/figcaption><\/figure>\n
      This wraps up all the basic requirements for creating a Discord app using Discord.js. We have created an incredibly simple bot. For most advanced users the code implemented here\u2014after the initial setup\u2014isn’t likely to steer the development of a Discord bot in any meaningful way.<\/p>\n
      Common Hurdles<\/h2>\n
      As one codes the basis of a new Discord.js<\/code> bot there are several common errors\/issues that may arise. We’ve already covered the possibility of having to update Node.js to a newer version than the current LTS. Similarly, there are some other quirks that might need addressing based on which version of Node is running, which version of Discord.js<\/code>, and several other factors. Below are some common gotchas.<\/p>\n
      Client Missing Intents<\/h3>\n
      When instantiating a new Discord.js Client object it requires one specify several Intents objects for the type of interaction (a.k.a. user permissions in this case) that can take place.<\/p>\n
      Remember when we checked those boxes for Presence Intent<\/code> and Server Member Intent<\/code> earlier? This is where those come into play. See here for a full list of intents<\/a> that can be passed in as arguments. A more concise listing of these intents<\/a> is also provided via the Discord.js documentation.<\/p>\n
      Although our code here reflects the proper Intents objects being passed in as parameters\u2014one might have found this post via a debugging search on Google. If that’s the case, keep in mind the instantiation of a Discord.js client should resemble the following syntax:<\/p>\n
      \/\/ Import relevant classes\r\nconst { Client, Intents } = require('discord.js');\r\n\r\n\/\/ Crete a new Client instance with Intents specified\r\nconst client = new Client(\r\n    { intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] });<\/pre>\n
      Bot Kicked from Server<\/h3>\n
      During testing, all kinds of crazy can happen\u2014and not always with good reason. If you find yourself in a situation where a Discord bot has been kicked or removed from the server you can easily add it back by re-authorizing. Take the following actions to complete this:<\/p>\n
        \n
      1. Log back into the Discord Developers Portal<\/a><\/li>\n
      2. Select Your Application<\/li>\n
      3. Go to the OAuth2 Panel<\/li>\n
      4. Select “Bot” and Desired Permissions<\/li>\n
      5. Copy\/Paste the OAuth2 URL into your browser<\/li>\n
      6. Select which server to add the bot to<\/li>\n
      7. Click all the right buttons to confirm<\/li>\n<\/ol>\n
        This process mirrors later actions from Step 2 above. This is the equivalent to being kicked from a server and having to re-join via a valid invite link. The OAuth2 URL is, essentially, an invite link for Discord Bots.<\/p>\n
        Putting it All Together<\/h2>\n
        We’ve covered a fair amount of ground here. To recap:<\/p>\n
          \n
        1. Created a new Discord application<\/li>\n
        2. Defined the type as a Bot and set desired permissions<\/li>\n
        3. Created a Node.js based project<\/li>\n
        4. Implemented API calls via Discord.js<\/li>\n
        5. Tested our bot to confirm functionality.<\/li>\n<\/ol>\n
          These are the basic essential steps required to get a Discord.js bot up and running. Below is a sample of our entire code strung together in one convenient block:<\/p>\n
          \/\/ Load token from .env file\r\nrequire('dotenv').config()\r\n\r\n\/\/ Import necessary Discord.js classes\r\nconst { Client, Intents } = require('discord.js');\r\n\r\n\/\/ Instantiate new client object with desired Intents\r\nconst client = new Client(\r\n    { intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] });\r\n\r\n\/\/ Authenticate\r\nclient.login(process.env.DISCORD_TOKEN)\r\n\r\n\/\/ Notify successful connection via console\r\nclient.on('ready', function(e){\r\n    console.log(`Logged in as ${client.user.tag}!`)\r\n})\r\n\r\n\/\/ Wait for message events, check content for match,\r\n\/\/ respond cordially to user via reply.\r\nclient.on('message',\r\n    function(msg){\r\n        if(msg.content === \"Hello alphabot!\"){\r\n            msg.reply(\"Howdy!\")\r\n        }\r\n    })<\/pre>\n
          A more general version of this code is available via Github here<\/a>.<\/p>\n
          Final Thoughts<\/h2>\n
          Discord has quickly become the go-to communications tool for gamers, developers, crypto enthusiasts\u2014and companies<\/em>. As communities grow it becomes essential to have a quality Discord bot to help with tasks such as moderation, community rewards, verification, and addressing common questions. The bot we’ve coded here clearly isn’t ready for such heavy lifting\u2014but illustrates the basic moving parts one needs for the\u00a0basis<\/em> of a Discord bot.<\/p>\n
          For those looking to get a bot up and running asap, it’s recommended to use an existing solution. There are tons<\/em> of Discord bots available that are well-developed and offer a range of useful features. In many cases, these bots are free or\u2014at the very least\u2014offer free plans where basic functionality is possible. Check out our article on the Best Discord moderation bots<\/a> to get an idea of what’s available.<\/p>\n","protected":false},"excerpt":{"rendered":"
          Discord is a powerful communications application used by a huge community of gamers, developers, and cryptocurrency enthusiasts. There is an ocean of unique Discord bots admins can add to their servers. For those more inclined to take matters into their own hands\u2014there are also powerful APIs for creating Discord bots. By using Discord.js one can […]<\/p>\n","protected":false},"author":2,"featured_media":2226,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[10],"tags":[577,559,576,584],"acf":[],"_links":{"self":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2206"}],"collection":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/comments?post=2206"}],"version-history":[{"count":4,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2206\/revisions"}],"predecessor-version":[{"id":2227,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/posts\/2206\/revisions\/2227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media\/2226"}],"wp:attachment":[{"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/media?parent=2206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/categories?post=2206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alpharithms.com\/wp-json\/wp\/v2\/tags?post=2206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}