DEV Community

loading...
Cover image for Discord Bot in Typescript hosted on Heroku

Discord Bot in Typescript hosted on Heroku

midasxiv profile image Midas/XIV ・5 min read

Hey guys! been a long time since I wrote an Article on Dev!
for the last few months I have been trying to develop using Typescript and host my own apps.

Since Glitch.me decided to ban pinging services like Uptime Robot which was commonly used to host Discord bots along with Glitch. So It was the perfect opportunity to practice my Typescript on this Bot and host on Heroku.

So here's a short and detailed article on how you can setup your own discord Bots written in typescript.



➡️ STEP 1: Add Discord Bot to your Server

Screens Steps
image 1. Open Discord developers portal

Click New Application
image 2. Give your BOT a new name and click Create
image 3. Customize your bot by giving an Image and description.
image 4. Under the Bot tab, click Add Bot
image 5. Set Icon and Username
image 6. Go to OAuth2 tab.

Tick the bot checkbox under scopes.

You can customize your BOT by setting the Bot Permissions.

Note changing the permissions updates the link that'll be used to invite your bot to your server.
image Inviting Your Bot
when you open the link from the step above, in a new tab you'll see the following page and now you can add the bot to any of your server

find detailed steps here


STEP 2: Code your Discord Bot

  1. Get your Bot's token, for this you must go back to the developer portal, select your bot and go to the Bot tab, there you can find your Bot's token.
    image

  2. The simplest way to code your bot would be to fork this repo and then work on bot-template branch.
    alternatively you can clone the repository specifically the bot-template branch.

   $ git clone -b bot-template --single-branch https://github.com/MidasXIV/hive-greeter.git
  1. Next create an .env file in the root of the repository and add your token like so:
   token=TOKEN_WHICH_YOU_GOT_FROM_DISCORD

the .env file takes in key and value pair so here the key is token, if you wish to give a different token name then make sure you update the same in src/sonfig/secrets.ts file, as it looks for the "token" key.

   export const DISCORD_TOKEN = process.env["token"];
  1. Now it's time to install and build the project
   $ npm install
   $ npm run start

you can view the NPM SCRIPTS in the package.json file, running the start command should build project and run the bot on http://localhost:5000/; you can modify the port in src/index.ts file.

  1. On Successfully building and running the project you'll see
   Server started on port 5000
   Hive Greeter has started

You should now be able to see your Bot online in your discord Server.

  1. To get you started the template consists of two commands greet and time to test your bot, go to any text channel of your server and type in > greet, you'll see your bot reply as such
    image

  2. To Add more commands you must add a new class in src/commands folder taking into reference greetCommand.ts file, then you should export the class using the src/commands/index.ts file so you can easily import it from your src/CommandHandler.ts.

  3. You can update the "prefix" ( > ) of the bot from the src/config/botConfig.ts file.


➡️ STEP 3: Deploying Bot on Heroku

  1. Install Heroku Cli
  2. login with your Heroku account credentials when you run
   $ heroku login
  1. Now create an app with name your-app-name by running:
   $ heroku create your-app-name
  1. add a Git remote named heroku pointing to Heroku:
   $ git remote add heroku https://git.heroku.com/your-app-name.git

Integrating Heroku with GitHub, This step is required if you plan on automatically deploying your bot every time you push changes to a GitHub repository. (detailed steps here)

  1. Select your app from the Heroku Dashboard.
  2. Go to Deploy tab of app,
    • Enabling GitHub integration: To configure GitHub integration, you have to authenticate with GitHub. You only have to do this once per Heroku account.
    • App Connected to Github: you have to select the repository with your Bot.
    • Automatic deploys: When you enable automatic deploys for a GitHub branch, Heroku builds and deploys all pushes to that branch. image

Testing your setup, This step is not required, but it's highly recommended. You should build your application locally to test if you've set up it correctly.

$ heroku local

The Heroku CLI will now run your app at http://localhost:5000/; if no errors are encountered, you're on the right track!

  1. Go to Settings tab of app to set your discord bot token in config vars section.
    image

  2. Deploying your bot Upon reaching this step you should have:

    • developed a functioning Discord bot
    • setup your repository for Heroku deployment

If all goes well, you can now deploy your app to Heroku by running:

   $ git push heroku master

Note: If you have setup Automatic Deploys, you'll able to deploy your app with every commit to your master branch.


On completion of the above steps Heroku Cli will give you a link to your hosted app something like this:
https://you-app.herokuapp.com. Most often than not you'll run into issues with your first deployment as might have some dependencies in dev-dependencies or some config issues.

if you run into any issues run

heroku logs --tail

find detailed steps here


If you come across any issues, please do let me know in the comments down below :)


you can find the repository here:

GitHub logo MidasXIV / hive-greeter

Discord bot created using Typescrit and Discord js hosted on Heroku

hive-greeter-logo



STEP 1: Add Discord Bot to your Server

Reveal Steps
Screens Steps
image 1. Open Discord developers portal

Click New Application
image 2. Give your BOT a new name and click Create
image 3. Customize your bot by giving an Image and description.
image 4. Under the Bot tab, click Add Bot
image 5. Set Icon and Username
image 6. Go to OAuth2 tab.

Tick the bot checkbox under scopes.

You can customize your BOT by setting the Bot Permissions.

Note changing the permissions updates the link that'll be used to invite your bot to your server.
image Inviting Your Bot
when you open the link from the step above, in a new tab you'll see the following page and now you can add the bot to any of your server

find detailed steps here


STEP 2: Code your Discord Bot

Reveal

Discussion

pic
Editor guide