How To Build And Deploy Your First Discord Bot

if you've ever wanted to create a discord bot then this is the crash course for you i'm covering everything from the very basics of how to create your first spot how to write your code all the way to how to completely deploy your application for free so let's get started now [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now like i said at the beginning i'm going to show you how to do everything you need to create your own discord bot and the reason i'm making this tutorial is because i recently made a discord bot to use on my own server that i have to help people join my course channels since i have private channels for everyone that enrolls in my courses so i created a bot to help automate that process for me and i found out it was incredibly easy to create but it's a little bit difficult to figure out where to get started and how to deploy so i'm going to be covering everything you need to know from getting started all the way to deployment so that it can be incredibly easy when you create your first bot and the first thing you need to do when you create a bot is you need to go to discord.com developers applications and if you just type in discord developer in google ad and go to the first link you should get brought to a page similar to this you may get brought to the documentation if that's the case just click on applications up here i'm going to zoom this in you can see up here it says applications and you can see all of your different applications and all you need to do is click new application because you're not going to have any right here like i do so just click new application and all you need to do is type in the name of your application so you can type in something like you know wds application if it's you know for my own server but we're just going to call this you actually will just call it my first bot application there we go call it whatever you want and we'll hit create and then this is going to create an application for us you can see that it's just gave us a default logo we can add our own logo we can change the name of this description and we have a bunch of different keys down here for adding this to our application but since we want to use this as a bot we need to come over to the left side of our screen where it says bot click on this and this is where you can create your own bot so we're just going to click add bot and it says do you want to add a bot to the server you can't reverse this action of course we want to do this so we'll click yes and then it's going to create our bot and we can call this whatever we want we'll just call it myfirstbot like this and then down here you can't really see this but it says save changes so we'll just click save changes we put my camera back there and then we just have a bunch of information about our bot the different permissions we want to give our bot and so on but right now we don't really need to worry about any of that the only important thing that we need on this page is this thing called the token right here this is a private token you don't want to share this with anyone because essentially if other people have access to this they can write code to your bot and obviously that's a bad thing so you want to make sure that this is secret which is why they have a regenerate button in case you accidentally exposed this but for our use case we need to copy this so we can click on copy or you can reveal it like this but like i said if this gets exposed make sure that you regenerate it to something else and if we click yes you can see it's going to give us a brand new token to use so now all we need to do click that copy button and let's just move this over to the side of our screen and you can see i have visual studio code open and i just have a completely blank editor open and we're going to create a dot env file and this is where we're going to put our bot token so i can just type in bot token equals and then paste in our token like this you can call this whatever you want i just called it bot token now if we save that we have our bot token inside of an env file and since we're most likely going to commit this to github i just want to put a dot get ignore file in here and i want to make sure i ignore the dot env file that way when i commit this code to github it's not actually going to push my env file which means that this is going to stay locally on my computer and not be exposed to anyone now the other thing i want to do is create a file called bot.js which is where all of our bot code is going to go and then since we're going to be using a library called discord.js i want to set up npm for this project so if we just open up the console inside of visual studio code type in npm init y that's going to initialize a project for us and then we can just come in here and install this library as you can see it's called discord.js so let's just install that library we'll click and now that that's finished i want to set up and start testing my bot right away so if i just scroll down on this page you can see the example code here and this is like the most basic bot that you can create the first thing you need to do is actually get the discord bot so we can say const discord is equal to require discord dot js and then we can create our client so we can say const client is equal to new discord dot client just like that now before we start diving into the rest of the code inside this example i first want to explain what this client is this client is essentially a way that you can communicate with discord and figure out all the things that are happening on the server as you can see in this example client.on we can pass it in different events in our case ready is one of the events and this is saying when our bot is ready and logged in we can you know run some code here saying that our bot is logged in also when a message is sent on our server we can use the client.onmessage to be able to interact with that message so let's first do this login check here we just say client dot on pass it in the message ready here this is the event we're listening for and whenever this fires that means that our bot has just logged in so we'll just say console.log our bot is ready to go there we go and then for now we're just going to skip this message section and we're going to go straight to this login section so we can say client.login and this is where you pass that token that you got from the discord developer section this token right here but that token right now is in this env file right here so in order to get this out of the env file we're going to be using a library called the dot env we just say npmi.env just like this and then we just hit enter and that's going to download this library for us it's a very simple library that just takes files from emv and loads them up in order to do that we can just require our dot env library and we can just call the config method and all this does is it takes all of the environment variables we set in our env file and loads them into the process.env variable inside of node so what we can do down here is just say process.env.bot token and this name is just matching the name we put in our dot env file so now that's all the code we need to actually set up and log our bot in so let's just run this and see what happens and in order to set up a script to run this we can go in our package.json we can create a start script and we're just going to call this here start dip and then all this start script is going to do is just going to run nodebot.js so now we can just run npm start hit enter and that's going to load up our bot now you can see it says our bot is ready to go so we at least are able to log in with our bot which is great so now how do we start interacting with our bot let's go back over to our bot.js as you can see here we have this section to listen for messages so we can just say client.on message this is going to occur when we get a message and this message object that is being returned to us inside the function has a bunch of information that's really useful so what we can do is down here we can check the content of our message so we can say if message.content is equal to ping then we want to just reply with pong so we'll say message.reply of pong just like that it's exactly what they have in this just getting started example and this is just to help us understand the basics before we start diving into more complex topics so we can save that and now we have to you know close down our app and restart our application it's kind of a pain to manually do that every time so instead i'm going to download a library called the nodemon we can say npmi dash dash save dev nodemon what nodemon allows us to do is restart our application automatically every single time we make changes and in order to run our application with nodemon all we need to do is create a new script for that so you can see we have our dependency for nodemon we can just say devstart and instead of saying node we say nodemon bot.js now if we say npm run oops npm run dead start enter it's going to start out by application and you can see as our bot is ready and now if we make some changes to our code for example our bot is ready to go put some exclamation points and save you can see it reloads and reruns all of our code which is really handy so far what we've done is we've set up our bot we've logged it in we told it to listen for messages but right now our bot is not a part of any discord server we need to add this bot to a discord server and for our example let me just pull this over here i just have a brand new discord server that i've created and it's completely empty right now and i'm the only person in this server and i can type in a message for example and i want to be able to react to that message with the bot that we just created so in order to do that we need to go back to our discord portal here and we need to go to this section called oauth2 this is going to help us by giving us a url we can use to add our bot to a server and once you click on oauth2 if you scroll down a little ways you'll see this section called scopes and here all we want to do is click on this one that says bot this is essentially a saying that we are a bot and then if we scroll down a little further you can see that we have this copy section as well as these bot permissions that we can add right now we don't need any permissions because our bot is very basic so we can just click this copy and all we need to do is paste this into a new tab and what's going to happen is it's going to load this up and it says my first bot application connected discord and it says where do you want to add this bot to and you can select your server in our case my first bot test is the server that i created for this and we're going to authorize the bot inside of that server and then just say that you're not a robot that's just saying that you personally are not a robot you're not automating this task and you can see it's been authorized if i scroll over discord here you can see that it added the my first bot to our members list and if we come over here you can see my first bot so now immediately i can type in for example ping and the bot is going to respond with pong which is great and you noticed he even tagged me and the reason that it tagged me if i just moved this to the side is that we used message.reply what that's going to do is it's going to tag the current user and post this message inside of the channel that you're currently inside of if instead you don't want to tag the user you could just say message.channel.send and then you send a message to that channel for example not tagged let's just comment out this other message save it's going to reload our bot now you can see it's logged in so if we type in ping you can see it's just going to post the message not tagged and you notice it didn't actually tag me so now instead of making our bot a really boring bot that just responds to messages of ping with pong or not tagged i want to add a little bit more to this bot and one thing that would be really important to add is the ability to add a role to a user this is actually what i did in my own personal bot and one role that you may want to add is like a moderator role obviously you don't want to create a bot that allows people to become mods on your server but it's a great use case for this example so let's say that we want to test when someone types in a specific command to give them a moderator role and if they do the bot will give them that role what we want to do is generally have a command that's not going to be commonly typed because right now ping may be a commonly typed thing it would be kind of weird to make that do a certain command which is why generally you'll start your commands with something like an exclamation point or a dollar sign or whatever it is you want to do for your bot you know you can do exclamation point wds if it's you know my own bot but in our case we're just going to use exclamation point as like our bot command prefix and then our command here is going to be mod me and generally with commands you want to make them all one word it just makes things so much easier to work with so this is going to be our command for modding a user and in here all we need to do is take the user of this method and add a certain role to them so we can say message dot member this is the person that posted the member we can get all of their roles by saying dot rules and then all we need to do is add a role to the user and we could say something like moderator and if we have a role with that name on our server it'll add that to the user we can actually test this i just come into here go to server settings and i go to roles and i add in a role that's called moderator let's just make it yellow so it's really easy to distinguish who our mods are and we'll save this we go exit out of here just need to expand the screen to find the x button there it is okay so now i can you know for example add the role moderator to myself and if we look over in the member list my name is now yellow and when i type all my new messages have yellow because i have that moderator role and i can remove this and now what i want to do is add that rule to myself automatically because right now i don't have that rule i just removed it so if i type in exclamation point mod me hit enter you can see if i come over here i don't actually have any rules being added so clearly our bot is not actually doing this correctly and the reason for that is that we didn't save this bot.js file so let's just save this real quick let everything we run and then we'll run the command mod meet again and again you'll notice it still doesn't actually work i don't have that rule the reason for this if we scroll up here a little ways it'll tell us that we don't have the correct permissions it says unhandled promise rejection supplied rules is not a role okay so first of all it's saying it can't find the role moderator the reason it can't actually find this rule is because roles aren't always based on a name they're really based on an id that's hidden everything in discord has an id if i were to right click on a message you can see i can click copy id and if i just paste this it'll paste the id most likely you don't have that option though so you actually need to go into your discord settings let me see if i can just expand this a little bit so once you click on your user setting what you need to do is scroll down to appearance and scroll down a little ways and you'll see a section here called developer mode make sure you enable developer mode and that'll make it so that you can right click and copy the id of literally anything that you want so if we go back to our server here and go to our server settings in our roles we can right click on this moderator role copy the id and then we can just use that id over here so we can paste id here instead of using the string moderator and now we can add the role based on the id to the user let me just escape out of this real quick and now if i rerun that mod me command again we're going to get an error down here it's a little bit different error than before though so if we just scroll up to see what that error is you're going to see it says discord api error missing access essentially the bot does not have the ability to give people roles so you need to add that permission into the discord bot so if we go back to chrome here go to our discord developer tools here you can see this bot permissions section what we want to do is allow our bot to manage roles when we click on this it's going to give us a new url up here which has that permission added so we can just copy this url and we can paste this again into a new tab and we're going to go through the same process of adding the bot to this server clicking continue and now you can see it says do you want to allow your bot to manage roles we do so we're going to click authorize now if we come back into discord i'll just minimize this we're back at discord click on our server settings and go to the roles section you're going to notice something we now have a new role which is specifically assigned to the bot that we just created and this has the ability to manage roles as you can see right here manage roles is checked we could uncheck this and check it could also give them other roles if we wanted it's really up to you but usually i like to make these changes inside of the discord developer section and copy over that url as opposed to doing it here i just find it easier now you may think this is all we need to make our application work but when we run modmy we're going to run into another error and you're going to be really confused by this one i was the first time i ran into this if we just scroll down a little bit we're going to get the exact same error missing permissions and the reason for that is in discord the way that rules work is that the roles can only modify other roles below them so right now our moderator role is above our bot role we need to put our bot role first saying that it has abilities to control the moderator role now if we save that and we run this command we should have everything work so if i run mod me hit enter you can see immediately i now have that moderator role on my user so now this is great but there's one thing i kind of want to talk about a little bit before we start adding more commands to our bot because as we add more and more commands to our bot this file could get really messy so generally if you're going to have a bot prefix in our case exclamation point i like to just put that in a variable we're going to call this bot prefix and it's just equal to exclamation point then i like to put my commands inside of another type of thing here so we could say const mod me command is equal to mod me then when we check our message context all we need to do is check to see if it is the combination of our bot prefix and our mod me whoops mod me command this is just saying that we're now running that mod command and then here instead of directly doing this code what i would like to do instead is to create a com a function so we can say like mod user mod user and we're going to type in the message.member that we want to mod and then down here if we have a function called mod user which takes in a member we can run that code we can just say member dot roles bad ad this just makes your code a little bit cleaner and easier to work through instead of pasting all your code inside client on odd message because that's where a lot of your code is going to go instead we're breaking it out into individual functions and putting our commands up here and again if we save this and i remove that moderator role for myself and we can just check to make sure i am not a mod and if i run mod me you can see i now turned into a mod so it's still working which is great now another thing that we can do is actually make our bot react to messages let's just come in here and say if the message dot content is equal to i love wds this is not going to be an actual command this is just going to be a random piece of text similar to when we did ping and pong if this is the case i want the bot to put a heart on that message because anybody that loves wds is awesome in my opinion so we want this bot to react to the message so we can say message.react this allows us to add a reaction and what we need to do in here is just paste an emoji so we can copy any emoji you want in our case we're going to copy the heart emoji and it's going to react with this heart emoji and if you just google heart emoji you can copy it off the web pretty easily and now once we save this file real quick and i type in i love wds hit enter you can see the bot has added the heart emoji which is awesome so we're able to do some really cool stuff with the bot another thing i want to look at is a different type of event that we can use in our case i just want to come up here and do an event for whenever we delete a message because i don't really want anybody to delete messages off our server so i want the bot to yell at people that delete messages and this is going to take in the message that is deleted and all we want to do is get the channel for where this person deleted the message and all we're going to do is send a message that just says stop deleting messages oops messages just like that and now if we go in here and delete a message you're going to notice this doesn't actually work so if we click delete message and we click ok you're going to notice the bot doesn't do anything it doesn't yell at us and you may be wondering why that is so you may type out a new message hit enter and you delete that new message and then you notice that when we delete this the bot actually worked that time so why is it that the bot is working for new messages but not old messages this is because of something called partials when we create our client we can specify in here something called partials and partials essentially tell us what we want to be able to react to or listen to that happened before the bot logged in because before the bot logged in we had all these messages because we're resetting our bot every single time that we make changes and we want to be able to react to messages that occurred before the bot logged in so what we need to do is just say we want a parcel for message because we want to be able to interact with things on messages that happened before we actually logged into this server so now if we re-save our bot just logged in right now but if we delete one of these old messages it's going to still respond with stop deleting messages because partials is saying we want to interact with the things that are already there before we logged into this server so with that we have a really basic bot setup all it does is yell at us if we delete messages and it responds to a few different messages and what i want to do is make sure that this bot runs all the time because right now if i stop running this bot locally and now i for example type in something like i love wds it's no longer going to heart my message because the bot's not running and i obviously want the bot to heart this message every single time that it happens so we want to deploy this bot so that it's running 24 7 all the time and generally you would need to pay for something like this but i'm going to show you how to do this completely for free and before we do that we first need to commit all of our code to github so i'm just going to go inside of our git ignore and put node modules in here just so we don't have our node modules and then i'm going to type git init to initialize our git repository and if you don't have git installed just go down into the description below or in the cards i have a video that's going to show you how to use git and get it set up completely next what we need to do is we need to add all of our changes we need to commit our changes we can just say first bot tests and then what we need to do is push these changes but right now we don't have a repository to push to so we need to create one so i just went to github real quick and created a brand new repository called first bot test if we just come down to this bottom section to push an existing repository copy this paste it hit enter give it a couple seconds it should push all of the code over here and when we refresh you can see we have all of our code on this page which is great this means all of our code is now on github and we can very easily deploy this onto something called heroku completely for free so now what you're going to need to do is go to heroku.com which i've already done log in and create an account and you should be brought to this dashboard page where most likely you won't have anything at all i have my own discord bot that's running right now but yours should be blank and what you need to do is you need to create a new app so click new create new app when we do this we give our application a name i'm going to say my first bot and we can click create app and it looks like this is not available so we're just going to add some random numbers to the end it has to be a unique name so there we go create the application and now we've created the first bot app and what we need to do is connect this to github and luckily our deployment method is down here is we can easily connect directly to github so if we click on this and scroll down and we type in our repository name which i think was my first bot and we hit search it should find that for us it didn't find anything with my first bot so let's just try typing in bot and see what it comes up we'll click search and as you can see it says first bought test will connect to that one what's going to happen is it's going to connect to that repository and every single time that we make changes to our code and re-push them to github it's going to automatically deploy those changes to our application so that they automatically update our bot that's running on our server as you can see here it says what branch do you want to deploy we're going to choose our main branch and enable automatic deploys that way every time we push those changes they automatically get updated on our server so our bot constantly stays up to date and that's pretty much everything we need to do to get set up with our bot well there's a few extra changes that we need to make in order to make sure our bot runs a hundred percent so let me just maximize this on our screen we need to go to our settings here we need to set up an environment variable for our bot token because if you remember we don't push our bot token our env file to our github so right now we don't have access to that as you can see there's no env file so we need to add our bot token in here so we can call it bot token and we can copy that value directly from our bot so let's go to our bot scroll up here copy our token and we're going to paste that in here and click add this allows us to keep our environment variable here completely safe and we can even hide it so we don't accidentally expose this to other people like when we're screen sharing for example and that right there should be everything you need to get set up with your application but you're going to notice a slight problem if we come over here and we go to the view logs you're going to notice that our application hasn't even been deployed yet there's no code saying our applications run it should say our bot is logged in so if we just go to deploy here we want to trigger a manual deploy so we're going to click deploy branch right here this is just because we pushed our changes before creating our heroku so now as you can see it's actually building up and deploying our changes for us which is great and if we just come over here and view the logs we should see some things being run inside of our logs if we just give it a little bit of time so now once you have that set up you can see it says our bot is ready to go so if we open up discord which we already have open so let me just move this off to the side we type in i love wds we should see it heart our message which is exactly what we wanted so we have our entire application completely deployed for free but there's one limitation with heroku is you're only going to get so many hours of run time on your application before you run out of free hours and they reset every month but you can get 1 000 free hours which are more hours than are in the full month by just adding your credit card to heroku so if you go into i think it's account settings or whatever you can add your credit card information it won't actually charge you unless you actually choose to have a deployment which cost money so if we go to resources here you can see that we have our application here and this is a zero cost dyno you can change to not use a free one but as long as you have a free one selected once you run out of hours it just won't charge you to stop working so by adding your credit card you can go from 500 free hours a month to a thousand free hours a month which is enough for you to run one discord bot completely for free without ever having to pay a dime for it because 1000 hours is more than the number of hours in each month and that's all it takes to get set up and running with your very first discord bot if you enjoyed this video make sure to check out my other videos linked over here and subscribe to the channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 55,241

Keywords: webdevsimplified, discord bot, discord js, discordjs, discord bot js, discord bot deploy, discord bot tuorial, discord bot javascript, discord javascript, discord js tutorial, discord javascript tutorial, discord js bot, discord javascript bot, discord js guide, how to create a discord bot, create a discord bot, discord bot in javascript, discord js tutorial 2021, discord js tutorial 2020, discord bot maker, discord bot api, discord api, discord bot guide, javascript discord

Id: qv24S2L1N0k

Length: 25min 40sec (1540 seconds)

Published: Tue Dec 01 2020