Build A Discord Bot From Scratch Using React.js
Here are some notes on building a custom Discord bot project in React.js.
Building a Discord bot from scratch is a rewarding experience. It’s a great place to test some code and quickly see it in action. Most Discord projects are written in JavaScript, so there are plenty of starting points if you’re working with React.js.
If you decide you need a bot of your own, where do you start? First, create an application on Discord. There’s plenty of information out there on the topic if you do some poking around (start with the sources). After you create your application, you’re going to want to connect to the Discord API, create your files, and get your bot online. After that, the customization begins. Let’s look at some things you’ll run into.
Bot Commands
You can create almost any command for a bot to follow. This is where you could hit a wall. If you don’t know where to start with naming commands and having the bot respond to said commands, take it slow. Why might it be helpful to include commands as objects with key-value pairs? It allows your bot to make use of your commands. When that command is input by your user, your application knows where to look to perform what the command wants. It looks to the key.
Have you wondered why you have to include an exclamation before many bot commands? This is a conventional prefix added to commands in the bot’s code. It adds a layer of security to make sure the user issuing the command is a “real person”. It looks like this in the code:
const prefix = '!';Then you include the object when you export at the end of the file that includes your commands:
module.exports = { botIntents, prefix, commands };This, along with the resources included, get you to the point where the bot is working. Now is the time to integrate whatever functionality you’re looking for in the bot. If you’re planning to make use of an API that requires you to reach out to a team, remember this could take time.
Bot Syntax
It’s good to know what you’re talking about when asked what your code means. These lines of code will give you a good understanding of the async function including await in JavaScript, the difference between module.exports and export default, and what the package.json file is.
Async Function
// App.jsconst getLastMsgs = async (msg) => {
const cheers = await msg.channel.messages.fetch({ limit: 10 }); const lastTenMsgs = cheers.map((message) => {
return message.content;
})
}
It may take you a second to get comfortable seeing async at the beginning of the arrow function. That will pass. Why? It’s simple. We are telling the getLastMsgs function to wait until it receives a message. That message is coming from earlier lines of code:
const reply = await getLastMsgs(msg);You are waiting for your functions to receive a promise. It gives us something to work with. Think of receiving a letter. Before you can read the letter, you have to take the time to stop and open it. The async function is what makes our application wait until a letter is returned for you to open. This returned letter (or promise in JavaScript) has to be fulfilled or rejected before the function will run.
module.exports vs. export default
// default.jsconst botIntents = [
DIRECT_MESSAGES,
GUILD_MESSAGES,
GUILDS,
];
const commands = {
verify: 'verify',
lastMsgs: 'last-messages',
}; const prefix = '!'; module.exports = { botIntents, prefix, commands };
The last line of code in the excerpt above makes the botIntents object, the prefix variable, and the commands object available to the rest of the application, allowing you to use these objects in other files. This is different from export default, which you might be used to.
How does this compare to export default?
This is a helpful article for understanding the two. Using module.exports, you have to require the file where you wrote those exports in the file that needs to make use of them. With export default, you import what you need into other files. export default allows us to export an entire class or function in a file, which doesn't limit the functions we can use like module.exports does. It's better to use module.exports when you have multiple functions you want to export rather than an entire class or function.
package.json File
// package.json{
"dependencies": {
"discord.js": "^13.3.1"
},
"devDependencies": {
"nodemon": "^2.0.15"
},
"scripts": {
"app": "nodemon app",
"start": "node app"
},
"name": "*bot name*",
"version": "1.0.0",
"main": "App.js",
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
The package.json is the heart of your Node project. This file contains the metadata needed for your project to function. It contains clear definitions of the functional attributes of your project that npm uses to install dependencies, run the scripts you have, and identify the entry point of the package. It must be an actual JSON and not a JavaScript object. You can find more information on the package.json file here.
Interactions Endpoint URL
You’ll see this in the Discord Developer portal. There are a few things here, including the option for adding an interaction endpoint URL. According to Discord, “You can optionally configure an interactions endpoint to receive interactions via HTTP POSTs rather than over Gateway with a bot user” when you add an interactions endpoint URL.
If you want to make the bot experience the best you can, this might get you curious. What is an interactions endpoint? It helps you deal with slash commands. This will be useful for further iteration, but you don’t need to make use of it now.
Next steps
Your project is mostly straightforward from here. Sure you’re going to have to do some learning on the go, but the next steps are clear. If you’re able to hook into the API that you’re looking for, it should be pretty simple to build the bot you need.
Do you know what to do next? Take time to clarify the steps.
Parting questions
What’s the direction of the bot once you gain access to the API?
Set up the verification files to handle the interactions between the API and your code. Implement the API calls that will allow you to access the commands your bot needs. The user will be able to interact with the bot and your Discord community.
What can you do in the meantime?
Set up channels for when the bot is complete. The channels will create the experience. You probably have a limited number of users in your community at the moment, so there won’t be too much interaction. Nobody wants to do it but you have set up rules, a FAQ, support, and announcements channel. Or, you could decide not to do that. A bio channel that keeps up with the development of the project is a good idea. Anything goes.
What lesson was learned?
Yours will be different. Share it with everyone. There are plenty of resources out there. The more time you can allot to a project, the easier it becomes to find what you need. It’s just a problem-solving game. The only way to get better at problem-solving is by solving problems.
How will you write a function that fires when a user inputs the command ‘!verify’?
End on a good note. This is where you might need to fill gaps in your knowledge. Think about it like you’re working on a puzzle. Know how you have pieces to a puzzle, but since there are so many loose pieces, you can’t find where to put the one that’s in your hand? That’s what this decision is like. Try thinking about callbacks.
Bringing It All Together
This should get you in a good place with your project. These things take time, and sometimes the best thing to do is not to code. Inspiration will come when you least expect it. For now, the objective of creating a bot has been achieved and you have clear next steps to follow. Step away and take time to smile about what you built!
