Discord Bot in Typescript hosted on Heroku

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.

---

Add Discord Bot to your Server	Code your Bot	Deploying Bot on Heroku

---

➡️ STEP 1: Add Discord Bot to your Server

Screens	Steps
	1. Open Discord developers portal Click New Application
	2. Give your BOT a new name and click Create
	3. Customize your bot by giving an Image and description.
	4. Under the Bot tab, click Add Bot
	5. Set Icon and Username
	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.
	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.
   

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
   

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.

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.
   

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:

MidasXIV / hive-greeter

Discord bot created using Typescrit and Discord js hosted on Heroku

---

Add Discord Bot to your Server	Code your Bot	Deploying Bot on Heroku

---

STEP 1: Add Discord Bot to your Server

Reveal Steps

Screens	Steps
	1. Open Discord developers portal Click New Application
	2. Give your BOT a new name and click Create
	3. Customize your bot by giving an Image and description.
	4. Under the Bot tab, click Add Bot
	5. Set Icon and Username
	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.
	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

…

View on GitHub