DEV Community: DET171

Writing a Discord Bot with Eris (Slash Commands Edition)

DET171 — Sun, 11 Sep 2022 09:00:39 +0000

Writing a Discord bot with slash commands using Eris

Introduction

Yep, the title says it all. I decided to do this as there hasn't been any written guide I'm aware of that shows how to write a Discord bot with slash commands using Eris.

Anyways, let's get started! You first need the following few things:

Your Discord bot's token (refer to this if you don't know how)
Node.js installed on your computer (preferrably v16 or higher)
A good code editor/IDE (optional, but recommended)

Now install the required dependencies:

yarn add eris dotenv eslint consola
# or using NPM
npm i eris dotenv eslint consola

I'm also going to use ESLint to enforce code style and consola for nicer console messages.

And finally, add these scripts to your package.json:

"scripts": {
    "start": "node index.js",
    "lint": "eslint ."
}

You also need to set type to module in your package.json file.

Writing the code

Now create a file called index.js and add the following code:

import Eris, { Constants, Collection, CommandInteraction } from 'eris';
import fs from 'fs';
import console from 'consola';
import * as dotenv from 'dotenv';
dotenv.config();

We're importing Eris, the Constants and Collection from Eris, the native fs module, consola and dotenv.

Before I forget, you need to create a .env file and add your bot's token to it:

TOKEN=your-bot-token

Now let's creat the client:

const client = new Eris(`${process.env.TOKEN}`, {
    intents: [
        Constants.Intents.guilds,
        Constants.Intents.guildMessages,
        Constants.Intents.guildMessageReactions,
        Constants.Intents.directMessages,
        Constants.Intents.directMessageReactions,
    ],
});

Registering commands

Now let's register the commands. First, create a folder called commands and add a file called ping.js under it. Then add the following code:

export default {
    name: 'ping',
    description: 'Ping!',
    execute: (i) => {
        i.createMessage('Pong.');
    },
};

We basically export an object with the command information and the function to execute when the command is used for later use.

In index.js, add a ready event listener:

client.on('ready', async () => {
    console.info(`Logged in as ${client.user.username}#${client.user.discriminator}`);
    console.info('Loading commands...');
});

Inside the ready event listener, we're going to load commands:

client.on('ready', async () => {
    // ...

    // first create a collection to store commands
    client.commands = new Collection();
    // load all the js files under ./commands
    const commandFiles = fs.readdirSync('./src/commands').filter(file => file.endsWith('.js'));
});

We now have an array of file names, so we can loop through them and register them:

client.on('ready', async () => {
    // ...

    for (const file of commandFiles) {
        const command = (await import(`./commands/${file}`)).default;
        client.commands.set(command.name, command);

        client.createCommand({
            name: command.name,
            description: command.description,
            options: command.options ?? [],
            type: Constants.ApplicationCommandTypes.CHAT_INPUT,
        });
    }

    console.info('Commands loaded!');
});

Note that I used the dynamic import, as import ... from 'xxx' can only be used at the top level, and require() isn't available in ESM. The dynamic import retunrs an object with a default property, which is the exported object from the file, which is the reason for the .default at the end.

client.createCommand basically registers the command, and accepts an object with the command information. You can read more about it here.

Handling commands

Now, for the command handler! First, create an interactionCreate event listener:

client.on('interactionCreate', async (i) => {

});

We also need to check if the interaction is a command interaction, and whether it exists or not:

client.on('interactionCreate', async (i) => {
    if (i instanceof CommandInteraction) {
        if (!client.commands.has(i.data.name)) return i.createMessage('This command does not exist.');
    }
});

i instanceof CommandInteraction basically checks to see if i is a CommandInteraction object. If it is, we check if the command exists, and if it doesn't, we send a message saying that the command is not yet implemented. This is unlikely to happen as you aren't likely to register commands that don't exist yet, but in case you do (for certain reasons like testing or as a placeholder), this is a good way to handle it.

Remember the collection we created earlier on? We're gonna use it now:

client.on('interactionCreate', async (i) => {
    if (i instanceof CommandInteraction) {
        if (!client.commands.has(i.data.name)) return i.createMessage('This command does not exist.');

        try {
            await client.commands.get(i.data.name).execute(i);
        }
        catch (error) {
            console.error(error);
            await i.createMessage('There was an error while executing this command!');
        }
    }
});

We get the command from the collection and execute it, and if there's an error, we log it and send a message to the user.

Finally, don't forget to connect the client!

// ...
client.connect();

You can now run npm run dev and test your bot!

Conclusion

That's it! You now have a bot that can handle slash commands. You can add more commands by adding more files under the commands folder. You can also read more about slash commands and Eris.

Final Code

index.js:

import Eris, { Constants, Collection, CommandInteraction } from 'eris';
import fs from 'fs';
import console from 'consola';
import * as dotenv from 'dotenv';
dotenv.config();

const client = new Eris(`${process.env.TOKEN}`, {
    intents: [
        Constants.Intents.guilds,
        Constants.Intents.guildMessages,
        Constants.Intents.guildMessageReactions,
        Constants.Intents.directMessages,
        Constants.Intents.directMessageReactions,
    ],
});


client.on('ready', async () => {
    console.info(`Logged in as ${client.user.username}#${client.user.discriminator}`);
    console.info('Loading commands...');
    client.commands = new Collection();

    const commandFiles = fs.readdirSync('./src/commands').filter(file => file.endsWith('.js'));
    for (const file of commandFiles) {
        const command = (await import(`./commands/${file}`)).default;
        client.commands.set(command.name, command);

        client.createCommand({
            name: command.name,
            description: command.description,
            options: command.options ?? [],
            type: Constants.ApplicationCommandTypes.CHAT_INPUT,
        });
    }
    console.info('Commands loaded!');
});

client.on('error', (err) => {
    console.error(err); // or your preferred logger
});

client.on('interactionCreate', async (i) => {
    if (i instanceof CommandInteraction) {
        if (!client.commands.has(i.data.name)) return i.createMessage('This command does not exist.');

        try {
            await client.commands.get(i.data.name).execute(i);
        }
        catch (error) {
            console.error(error);
            await i.createMessage('There was an error while executing this command!');
        }
    }
});

client.connect();

commands/ping.js:

export default {
    name: 'ping',
    description: 'Pong!',
    execute: (i) => {
        await i.createMessage('Pong!');
    },
};

If you have any errors, you may ask me via Discord (𝓐𝓭𝓶𝓲𝓻𝓪𝓵 𝓒𝓪𝓷𝓪𝓻𝓲𝓼#0340).

How to manage your Node.js version on Replit

DET171 — Sun, 10 Oct 2021 09:23:18 +0000

How to manage your Node.js version on Replit

First, go to Replit and create a REPL. Select BASH and NOT Node.js (We'll install it later). Funnily enough, at the time of writing, if you ran node -v, you would see v14.17.1 (which is an LTS version, and also considering we didn't install Node).
Select Shell (which is just beside Console)
Copy and paste the following code below into Shell. On Windows, it's Ctrl+Shift+V. You can change the 16 below to any version you desire.

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
  export NVM_DIR="/config/nvm"
  [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
  [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
  nvm install 16 
  nvm use 16

Wait for a while. You may choose to go to the toilet or grab a few bites in the meantime.
After the code below has finished running and installing Node.js, run node -v && npm -v. You should see an updated Node.js (v16.x.x) and NPM (v8.x.x at time of writing) version.
Run the following to test:

 echo console.log(`Node version: ${process.versions.node}`) > test.js
 node test.js

You should now see an updated/different Node version, depending on which version you installed and used earlier on.

That's it! You can now install and use any Node.js version you wish!

Post was last updated on 10/10/2021

Automating the building and deployment of GitHub Pages

DET171 — Thu, 16 Sep 2021 09:01:35 +0000

"The most powerful tool we have as developers is automation."
— Scott Hanselman

This quote is quite true. Without automation, we would spend a lot of out time on things that would have to be done repetitively, for example, manually building and deploying your GitHub pages every time there is a change.

Luckily, you can easily use GitHub Actions to build and deploy your pages by just pushing your repository to GitHub! You don't even need to do anything except to add a configuration file to your repository.

In this post, I will be creating a workflow and using peaceiris/actions-gh-pages@v3 from GitHub Marketplace (it's free).

Getting your GitHub Access Token

We will need this token as we need to authorize the workflow to push to your repository. Make sure it has permission to write to your repositories (see this on how to get a token).

Now, head over to the repository where your project is located. Go to Settings > Secrets and select New Repository Secret. Name it ACCESS_TOKEN and put your token inside as the value. Click Add Secret. We can now access it by using ${{ secrets.ACCESS_TOKEN }}.

Setting up a workflow

Now, create a .github folder in your project and a workflows folder under it. Then, create a file named deploy.yml. Here's the base code:

name: Deploy to gh-pages

on:
  push:
    branches:
      - master

jobs:
    # ....

Now, create a job:

jobs:
  gh-pages-deploy:
    name: Deploying to gh-pages
    runs-on: ubuntu-latest # or macos-latest/windows-latest
    steps:
      # ...

Create steps that sets up Node.js and checks out the master branch (put the following under steps):

- name: Setup Node.js for use with actions
  uses: actions/setup-node@v1.1.0
  with:
    version:  16.8 # see https://github.com/actions/setup-node#supported-version-syntax for supported versions
  env:
    ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
- name: Checkout branch
  uses: actions/checkout@v2
  env:
   ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'

Now, create the steps to install the dependencies and build the app:

- name: Clean install dependencies
  run: npm ci # or yarn install --frozen-lockfile for yarn
  # if the above doesn't work, use npm i or yarn
  env:
    ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'

- name: Build app
  run: npm run build
  env:
    ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'

You can replace npm run build with your project's command for building static pages, which is npm run generate for Nuxt.js.
Now, the final step for deploying:

- name: deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
   github_token: ${{ secrets.ACCESS_TOKEN }}
   publish_dir: ./dist
  env:
   ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'

You can change ./dist for publish_dir to the directory your built pages are located. If you're not sure, run the build command locally to see where the pages are generated (e.g. for Vue.js and Nuxt.js, the publish_dir should be ./dist as the built pages are located there, but for VuePress, publish_dir should be <docs-dir>/.vuepress/dist).

Show the completed .github/workflows/deploy.yml file

name: Deploy to gh-pages

on:
  push:
    branches:
      - master

jobs:
    gh-pages-deploy:
      name: Deploying to gh-pages
      runs-on: ubuntu-latest
      steps:
        - name: Setup Node.js for use with actions
          uses: actions/setup-node@v1.1.0
          with:
            version:  16.8
          env:
            ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'
        - name: Checkout branch
          uses: actions/checkout@v2
          env:
           ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'

        - name: Clean install dependencies
          run: yarn install
          env:
            ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'

        - name: Build app
          run: yarn generate
          env:
            ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'

        - name: deploy
          uses: peaceiris/actions-gh-pages@v3
          with:
           github_token: ${{ secrets.ACCESS_TOKEN }}
           publish_dir: ./dist
          env:
           ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true'

And that's it! Now every time you push your repository to GitHub, this workflow will run, and the built pages will be pushed to a branch named gh-pages in your repository.

Troubleshooting

If your go to your GitHub site (e.g. bob.github.io), you should see your page there. However, if you don't, try the following:

Ensure that your GitHub pages are deploying from the branch gh-pages. Go to Settings > Pages, and under source, there is a Branch option. Click it and select gh-pages.
Ensure that your gh-pages branch has an empty .nojekyll file in the root directory. If not, you can add one manually there (Make sure it's empty!).

Hope you enjoyed this post and that it has helped you!

VuePress tips for development and productions

DET171 — Fri, 03 Sep 2021 05:49:10 +0000

Introduction

I assume that if you're reading this, you have used VuePress or want to use VuePress to make a site. I will be using VuePress 2 for this post.

Bundlers: Using Vite for development, Webpack for production

Vite is much faster than Webpack when it comes to bundling packages, as it uses esbuild to pre-bundle dependencies, and serves source code over native ESM. However, Vite cannot bundle code for older browsers (e.g. non ESM code). Webpack, on the other hand, can accomplish that, but is slower in bundling. Even its HMR can be quite slow when your project is humongous.

However, the question now is how do I accomplish it? In fact, it's quite easy.
Open your config.js (or config.ts). You should see something like the following:

module.exports = {
  // ...
  title: 'Title',
  description: 'Description',
  head: [
    ['meta', { name: 'theme-color', content: '#7354ff' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
  ],
  themeConfig: {
    // ...
  }
}

Put the following just before module.exports:

const isProd = process.env.NODE_ENV === 'production'

In case you haven't read the VuePress docs, you can set the bundler using the bundler option.
Add the following under module.exports:

bundler: process.env.DOCS_BUNDLER ?? (isProd ? '@vuepress/webpack' : '@vuepress/vite'),

We assume the scripts section of your package.json looks something like the following:

"scripts": {
  "dev": "vuepress dev src",
  "build": "vuepress build src"
}

Change it to the following:

"scripts": {
  "dev": "NODE_ENV=development vuepress dev src",
  "build": "NODE_ENV=production vuepress build src"
}

The NODE_ENV=development sets the value of process.env.NODE_ENV. If you want to specify what bundler you want to use without setting NODE_ENV, you just have to add DOCS_BUNDLER=@vuepress/webpack or DOCS_BUNDLER=@vuepress/vite to the scripts the same way we added NODE_ENV.

Using PrismJS during development and Shiki during production

PrismJS is regex based, so has known fail cases. As mentioned on the VuePress docs, Shiki has higher fidelity than PrismJS, and as an added bonus, accepts VS Code themes (which means it has more themes than PrismJS).

To use PrismJS and Shiki during development and production respectively, go to the plugins section under themeConfig, and add the following:

[
  '@vuepress/plugin-shiki',
  isProd
    ? {
      theme: 'dracula', // see https://github.com/shikijs/shiki/blob/main/docs/themes.md for themes
    }
  : false,
],

Your config.js or config.ts should now look something like this:

module.exports = {
  bundler: process.env.DOCS_BUNDLER ?? (isProd ? '@vuepress/webpack' : '@vuepress/vite'),
  // ...
  title: 'Title',
  description: 'Description',
  head: [
    ['meta', { name: 'theme-color', content: '#7354ff' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
  ],
  themeConfig: {
    // ...
    plugins: [
      [
      '@vuepress/plugin-shiki',
      isProd
        ? {
            theme: 'dracula',
          }
        : false,
      ],
    ]
  }
}

Hope this post helped!

I made a Vue CLI MPA

DET171 — Tue, 03 Aug 2021 10:50:48 +0000

A Vue MPA

I decided to create a Vue MPA with Vue CLI for fun, together with a search on GitHub and NPM function (REST API).
Here you go:
https://det171.surge.sh
Source code:
https://github.com/DET171/home

DET171 / home

Homepage written with Vue CLI

vue-app

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

View on GitHub

P.S. The tutorial included is just for fun.
P.P.S. Please comment on how you think!

Part IV: The Guild object in Eris and a FUN command!

DET171 — Sat, 24 Jul 2021 01:43:11 +0000

Part 4

In this post, I will be teaching you how to write a guild command.

The `guild` command

Here's the code As usual, here's the code (put it in ./commands/guild.js):

const { Command } = require('yuuko');
const moment = require('moment');
module.exports = new Command(['guild', 'server'], (message) => {
    const guild = message.channel.guild;
    const owner = guild.members.get(guild.ownerID);
    message.channel.createMessage({
        embed: {
            title: 'Guild Information',
            description: `Guild information for ${guild.name} (id: \`${guild.id}\`)`,
            color: 11272041,
            thumbnail: {
                url: guild.iconURL,
            },
            fields: [
                {
                    name: 'Owner:',
                    value: `${owner.username}#${owner.discriminator} (id: \`${guild.ownerID}\`)`,
                    inline: false,
                },
                {
                    name: 'Created at:',
                    value: `${moment.utc(guild.createdAt).format('MMMM, Do YYYY, h:mm:ss a')}`,
                    inline: false,
                },
                {
                    name: 'Member count:',
                    value: `${guild.memberCount} members`,
                    inline: false,
                },
            ],
        },
    });
});

Again, this is quite simple. This is mostly properties of the guild object. More can be found here. I will not be covering this in detail, as I will also be covering a roll command, which is more complex.

The `roll` command

As usual, here's the code (put it in ./commands/roll.js):

const { Command } = require('yuuko');
require('dotenv').config();
module.exports = new Command(['roll', 'rolladie', 'rolladice'], (message, args) => {
    const arg = args.join(' ');
    if(!args.length) {
        message.channel.createMessage({
            embed: {
                title: `${message.author.username} rolled a die!`,
                description: `${message.author.mention} rolled a die and got **${Math.floor(Math.random() * 6) + 1}**!`,
                color: 12252021,
                fields: [
                ],
            },
        });
    }
    else {
        try {
            const num = arg.trim().split('d');
            const times = parseInt(num[0]);
            const max = parseInt(num[1]) || 6;
            const nums = [];
            for(let i = 0; i < times; i++) {
                let result = Math.floor(Math.random() * max); // eslint-disable-line prefer-const
                result = result + 1;
                nums.push(result);
            }
            message.channel.createMessage({
                embed: {
                    title: `${message.author.username} rolled a ${times} dice!`,
                    description: `${message.author.mention} rolled a ${times} dice and got [ **${nums.join(' ')}** ]!`,
                    color: 12252021,
                },
            });
        }
        catch(err) {
            console.warn(err);
            message.channel.createMessage(`${message.author.mention}, the correct usage would be \`${process.env.PREFIX} roll <number of dice to roll>d<highest number on the die>\``);
        }
    }
});

Now, let me explain.
A user is supposed to type the command in the followoing format, assuming the prefix is !:

!roll

!roll 10d6
# or !roll 10 d 6

btw there are few aliases for this command:

['roll', 'rolladie', 'rolladice']

We check for arguments, and if there are none, we roll a random number from 1 to 6 and send it in an embed:

if(!args.length) {
        message.channel.createMessage({
            embed: {
                title: `${message.author.username} rolled a die!`,
                description: `${message.author.mention} rolled a die and got **${Math.floor(Math.random() * 6) + 1}**!`,
                color: 12252021,
                fields: [
                ],
            },
        });
    }

And if there are arguments, we join the arguments:

const arg = args.join(' ');

and split it by d.
We first initialize an empty array[], use the for loop to roll a random number between the number the user specified (if not, the default is 6) and push the result to the array the number of times the user specified.

After that has been completed, we join the array with spaces and send it in an embed:

else {
        try {
            const num = arg.trim().split('d');
            const times = parseInt(num[0]);
            const max = parseInt(num[1]) || 6;
            const nums = [];
            for(let i = 0; i < times; i++) {
                let result = Math.floor(Math.random() * max); // eslint-disable-line prefer-const
                result = result + 1;
                nums.push(result);
            }
            message.channel.createMessage({
                embed: {
                    title: `${message.author.username} rolled a ${times} dice!`,
                    description: `${message.author.mention} rolled a ${times} dice and got [ **${nums.join(' ')}** ]!`,
                    color: 12252021,
                },
            });
        }
        catch(err) {
            console.warn(err);
            message.channel.createMessage(`${message.author.mention}, the correct usage would be \`${process.env.PREFIX} roll <number of dice to roll>d<highest number on the die>\``);
        }
    }

EZPZ.
PS tell me in the comments if you have any trouble.

Conclusion

Woohoo! We made a fun command today, and also accessed the guild object. That's about the end of it for today.
Take care and goodbye!

Part III: The Member Object in Eris

DET171 — Thu, 22 Jul 2021 09:45:51 +0000

Part 3

In this post, I will be teaching you how to write a whois command.

The `whois` command

So, here's the code:

const { Command } = require('yuuko');
const moment = require('moment');
module.exports = new Command(['whois', 'member'], async (message, args, context) => { // eslint-disable-line no-unused-vars
    if (!args[0]) {
        return message.channel.createMessage(`${message.author.mention}, apologies! Please specify a particular member!`);
    }
    const user = message.mentions[0];
    const guild = message.channel.guild;
    const member = await guild.members.get(user.id);
    message.channel.createMessage({
        embed: {
            title: `User information for ${user.username}#${user.discriminator}`,
            thumbnail: {
                url: user.avatarURL,
            },
            color: 0x008000,
            fields: [
                {
                    name: 'Account created at:',
                    value: `${moment.utc(user.createdAt).format('MMMM, Do YYYY, h:mm:ss a')}`,
                    inline: false,
                },
                {
                    name: 'User ID:',
                    value: `\`${user.id}\``,
                    inline: false,
                },
                {
                    name: 'Roles:',
                    value: '<@&' + member.roles.map((r) => `${r}`).join('>, <@&') + '>',
                    inline: false,
                },
                {
                    name: 'Joined server at:',
                    value: `${moment.utc(member.joinedAt).format('MMMM, Do YYYY, h:mm:ss a')}`,
                    inline: false,
                },
            ],
        },
    });
});

Create a file in ./commands, and name it whois.js. Proceed to dump the above code into whois.js. You MIGHT have to run npm i moment --save to install the moment module.

Now, let me explain the code.
As usual, we require the packages, create the command, and export it:

const { Command } = require('yuuko');
const moment = require('moment');
module.exports = new Command('whois', async (message, args, context) => {
  // code here
});

We will then check for arguments. If there are none, we stop the code (or it will return undefined):

if (!args[0]) {
    return message.channel.createMessage(`${message.author.mention}, apologies! Please specify a particular member!`);
}

We use message.author.mention to mention the message author.

We get the first user that is mentioned in the message, get the guild the message was sent in, and get the member object from the guild object:

const user = message.mentions[0];
const guild = message.channel.guild;
const member = await guild.members.get(user.id);

After that, we proceed to send the embed message with the member and user information:

message.channel.createMessage({
        embed: {
            title: `User information for ${user.username}#${user.discriminator}`,
            thumbnail: {
                url: user.avatarURL,
            },
            color: 0x008000,
            fields: [
                {
                    name: 'Account created at:',
                    value: `${moment.utc(user.createdAt).format('MMMM, Do YYYY, h:mm:ss a')}`,
                    inline: false,
                },
                {
                    name: 'User ID:',
                    value: `\`${user.id}\``,
                    inline: false,
                },
                {
                    name: 'Roles:',
                    value: '<@&' + member.roles.map((r) => `${r}`).join('>, <@&') + '>',
                    inline: false,
                },
                {
                    name: 'Joined server at:',
                    value: `${moment.utc(member.joinedAt).format('MMMM, Do YYYY, h:mm:ss a')}`,
                    inline: false,
                },
            ],
        },
    });

However, what if you wanted this command the have two triggers (e.g. whois and member) instead of just one trigger(whois)?
That's quite easy. You just have to replace module.exports = new Command('whois', async (message, args, context) => with module.exports = new Command(['whois', 'member'], async (message, args, context) =>

This are just some user and member properties, more of them can found at the following pages:

Member
User

Conclusion

In this article, we learnt how to send more advanced embed with fields, create command aliases, and fetch members from the guild objects. In my next post, I will be making a guild command that shows information about the guild the message was sent in.
Have a nice day!

Part II: Making more commands with Eris and Yuuko - Embeds

DET171 — Tue, 20 Jul 2021 05:16:29 +0000

Part 2

If you want to skip the next part, click here.

Code from Previous Post

As promised, I will be putting the code here for those who just want to grab and go:
Your project directory:

│   .env
│   index.js
│   package-lock.json
│   package.json
│
├───commands
│       owo.js
│
├───events
│       ready.js
│
└───node_modules
    │   ...

./.env

TOKEN=<your-token-here>
PREFIX=<your-bot-prefix>

./index.js

const { Client } = require('yuuko');
const path = require('path');
const dotenv = require('dotenv');
var env = dotenv.config();
env = process.env;

const bot = new Client({
    token: env.TOKEN,
    prefix: env.PREFIX,
    ignoreBots: true,
});

bot.extendContext({
    variableOne: 'Variable number 1!',
});
bot.editStatus('dnd'); // edits bot status

bot.on('error', (err) => {
    console.error(err);
});

bot.globalCommandRequirements = {
    guildOnly: true,
};

bot
    .addDir(path.join(__dirname, 'commands'))
    .addDir(path.join(__dirname, 'events'))
    .connect();

./package.json + ./package-lock.json
I will not be showing this, but you should have yuuko, eris, and dotenv installed.
./commands/owo.js

const { Command } = require('yuuko');
module.exports = new Command('owo', (message, args, context) => {
  message.channel.createMessage('OwO');
});

./events/ready.js

const { EventListener } = require('yuuko');
module.exports = new EventListener('ready', ({client}) => {
  console.log(`Logged in as ${client.user.usename}`);
});

That should be all the code for now.

The `Meme` Command

Now, for the Meme command! For this, we will need to get the memes from reddit. For that, we will be using got to get the JSON from https://www.reddit.com/r/memes/random/.json.
Install got first:

npm i got --save

Create a file in ./commands and name it meme.js.
Put the following code inside (I will be explaining it later):

const { Command } = require('yuuko');
const got = require('got');
module.exports = new Command('meme', (message) => {
    got('https://www.reddit.com/r/memes/random/.json')
        .then((response) => {
            const [list] = JSON.parse(response.body);
            const [post] = list.data.children;

            const permalink = post.data.permalink;
            const memeUrl = `https://reddit.com${permalink}`;
            const memeImage = post.data.url;
            const memeTitle = post.data.title;
            const memeUpvotes = post.data.ups;
            const memeNumComments = post.data.num_comments;
            message.channel.createMessage({
                embed: {
                    title: memeTitle,
                    url: memeUrl,
                    image: {
                        url: memeImage,
                    },
                    color: 15267908,
                    footer: {
                        text: `👍 ${memeUpvotes} 💬 ${memeNumComments}`,
                    },
                },
            });
        })
        .catch(err => {
            console.error(err);
        });
});

Now start the project by navigating to the root folder of the project and running

node index.js

or if you have nodemon installed

nodemon index.js

Let me break the code up into smaller pieces to explain it.

const { Command } = require('yuuko');
const got = require('got');
module.exports = new Command('meme', (message) => {
  // code here
})

So, we first import the modules as usual, and create a command as we did before. Easy.

got('https://www.reddit.com/r/memes/random/.json').then((response) => {
  // code here
}).catch(err => {
            console.error(err);
});

Now, we use got to get the JSON from reddit (the subreddit r/memes actually), and save the response as the response variable. Note that we are using Promises here, thus the .then().catch() in the code. You can, however, use the async/await in ES6.

Good?

const [list] = JSON.parse(response.body);
const [post] = list.data.children;

Now, we parse the response body by using JSON.parse (Note: You will get an error if you just use JSON.parse(response)), and get the information about the reddit post which we saved inside the post variable. Understand? Excellent.

const permalink = post.data.permalink;
const memeUrl = `https://reddit.com${permalink}`;
const memeImage = post.data.url;
const memeTitle = post.data.title;
const memeUpvotes = post.data.ups;
const memeNumComments = post.data.num_comments;

Now we save the post url as memeUrl, the meme image url as memeImage, the meme title as memeTitle, the number of meme upvotes as memeUpvotes, and the number of comments as memeNumComments.

message.channel.createMessage({
                embed: {
                    title: memeTitle,
                    url: memeUrl,
                    image: {
                        url: memeImage,
                    },
                    color: 15267908,
                    footer: {
                        text: `👍 ${memeUpvotes} 💬 ${memeNumComments}`,
                    },
                },
});

We then send the embed object. That's the end of it. Easy, right?

Conclusion

In this post, we used a REST API, and learnt how to send an embed in Eris. For my next post, I will be writing a whois command. See you until next time!

Part I: Make a Discord Bot with Eris - The Basics

DET171 — Mon, 19 Jul 2021 10:47:56 +0000

Part 1 Introduction

Hello there, this sentence will mark the beginning of my first ever article released to the public. In this article, I will be writing how to build a Discord bot with Eris and Yuuko.

In this tutorial, I will be using the following format for the code:

+ // This line should be added to your code
- // This line should be removed from your code

Prerequisites

A basic knowledge of JavaScript
Node.js (v12) and NPM (v7) installed on your machine
A basic knowledge of the Discord API

Background Info

So, what is Eris exactly?

A lightweight NodeJS Discord Library.

What is Yuuko, then?

A Discord command framework for Javascript and Typescript.

I assume that if you've ever wanted to make a Discord Bot, you would have at least googled it up. The first and most common answer you'd see is probably "How to build a Discord Bot with Discord.js". What exactly is the difference between Eris and Discord.js?

Features

D.js covers 100% of the Discord API while Eris does not. However, covering 100% of the Discord API has its disadvantages.
D.js has a larger memory footprint, and when the bot is in many servers, it starts having performance issues. That is why many large bots, like Dank Memer (The 4th largest Discord Bot), are made using Eris.

However, there are some packages on NPM that can help with the functions that Eris lacks, for example, Eris Additions. There are even command handlers for Eris on NPM, like Yuuko and Eris Boiler. For developers moving from D.js to Eris, there is Chariot.js.

Getting started

Now, without further delay, let us dive into the magical world of Discord Bots.

Creating a Discord Bot account

Now, the first thing you need to do is to create a Discord Bot account.

Head over to the Discord Applications page.
Click the New Application button on the top right corner.
Now name your application (You can change it afterwards). Enter the name and hit Create.
Now that you have created the application, now you need to create the bot account. Head over to Bot and click on Add Bot, and then click Click on Yes, do it!.
Under the TOKEN section, click Copy.
Awesome! Now you have your Bot Token!

Last but not least, do remember to invite your bot into your server in order to "talk" to it.

Set up your project

Create your project folder and package.json.

mkdir <your-project-name>
cd <your-project-name>
npm init

Ensure that the main in your package.json is set to index.js.

Install the relevant dependencies now.

npm i eris yuuko dotenv

Should you be using a version of NPM below 4.5 (you shouldn't), run the following instead:

npm i eris yuuko dotenv --save

Install nodemon as well.

npm i -g nodemon

Create a .env and index.js file, and a commands and events folder.

Optional Steps

Install bufferutil, zlib-sync or abalabahaha/erlpack
Install a linter and create the config file

 npm i eslint -D
 # -D is short for --save-dev
 npx eslint --init
 # Just answer the prompts

That's about the end of setting up your project!
Your project tree should look something like this now:

|   .env
│   index.js
│   package-lock.json
│   package.json
│
├───commands
├───events
└───node_modules
    │   ...

Now, let's start coding!

Note: The final code will be included at the end :)

First, open the project in you favourite text editor, and fill in the .env file with the following:

TOKEN=<your-token-here>
PREFIX=<your-bot-prefix>

Of course, replace <your-token-here> with the Bot token you obtained earlier, and <your-bot-prefix> with your bot prefix.
If you do not understand dotenv and .env files,
Now that we are no longer concerned with the bot configurations, let us write our basic bot code!
Head over to your index.js file, and insert the following at the top to require the packages.

const { Client } = require('yuuko'); // Imports the Client constructor
const path = require('path'); // For joining paths
require('dotenv').config(); // Imports the variables in the `.env` file

As you can see, we have imported the Client constructor from Yuuko but not the Command constructor. Why? We will be putting the commands in js files in the command folder, so our index.js file will not be crowded with commands. Neat!

We can create a client with the following:

const bot = new Client({
    token: process.env.TOKEN,
    prefix: process.env.PREFIX,
    ignoreBots: true,
});

The ignoreBots: true in the code tells our bot to ignore all messages sent by other bots.
If you want to allow commands to be used in only servers, you can set it using the following:

bot.globalCommandRequirements = {
    guildOnly: true,
};

However, if you want to allow commands to be used in only DMs, you can set it using the following:

bot.globalCommandRequirements = {
    dmOnly: true,
};

To pass context/variables to the commands in other files, you can set in index.js by doing

bot.extendContext({
  variableOne: 'Variable number 1!',
});

The variables set here will be passed to commands and event listeners under context.<variable-name>.

Now get you bot to scan the directories and import any event listeners and commands, and lastly, connect to Discord:

bot
    .addDir(path.join(__dirname, 'commands'))
    .addDir(path.join(__dirname, 'events'))
    .connect();

Your index.js file should now look something like this:

const { Client } = require('yuuko');
const path = require('path');
const dotenv = require('dotenv');
var env = dotenv.config();
env = process.env;

const bot = new Client({
    token: env.TOKEN,
    prefix: env.PREFIX,
    ignoreBots: true,
});

bot.extendContext({
    variableOne: 'Variable number 1!',
});
bot.editStatus('dnd'); // edits bot status

bot.on('error', (err) => {
    console.error(err);
});

bot.globalCommandRequirements = {
    guildOnly: true,
};

bot
    .addDir(path.join(__dirname, 'commands'))
    .addDir(path.join(__dirname, 'events'))
    .connect();

The `Ready` event

Create a file in ./events and name it ready.js.
Require the EventListener:

const { EventListener } = require('yuuko');

and create an event listener:

module.exports = new EventListener('ready', (context) => {
  // context.client = bot
  console.log(`Logged in as ${context.client.user.usename}`);
});

Alternatively, you may also do:

module.exports = new EventListener('ready', ({client}) => {
  // client = bot
  console.log(`Logged in as ${client.user.usename}`);
});

instead of importing the whole context. You may be thinking:
'Hey, I didn't define the client variable in bot.extendContext({})! Why can it be used here?'
Well, Yuuko automatically sets the client as the bot, so you do not need to worry about it!

Now, start your project:

nodemon .

Your final ready.js code:

const { EventListener } = require('yuuko');
module.exports = new EventListener('ready', ({client}) => {
  // client = bot
  console.log(`Logged in as ${client.user.usename}`);
});

You first command

Now, create a file in ./commands.
What command should we create, then?
Let's look to our dear friend Dank Memer for some inspiration:

There! Let's make this command then. Name the file you created owo.js.

Open it, and put the following code inside:

const { Command } = require('yuuko');
module.exports = new Command('owo', (message, args, context) => {
  message.channel.createMessage('OwO');
});

and you're done! Your bot should now respond with 'OwO' when you type in the command. It's that easy!

Conclusion

Eris is a great library to build Discord Bots, as it is lightweight and fast! I will be teaching you how to make a meme command in my following post. Stay tuned!
(PS You might have to wait quite a while as I have a lot of homework, and have upcoming National Exams to take.)

Oops. I nearly forgot. The tree of your project folder should now be something like

│   .env
│   index.js
│   package-lock.json
│   package.json
│
├───commands
│       owo.js
│
├───events
│       ready.js
│
└───node_modules
    │   ...

Take care and goodbye for now!
I will be putting the final code for all the files in my next post.

DEV Community: DET171

Writing a Discord Bot with Eris (Slash Commands Edition)

Writing a Discord bot with slash commands using Eris

Introduction

Writing the code

Registering commands

Handling commands

Conclusion

Final Code

How to manage your Node.js version on Replit

How to manage your Node.js version on Replit

Automating the building and deployment of GitHub Pages

Getting your GitHub Access Token

Setting up a workflow

Troubleshooting

VuePress tips for development and productions

Introduction

Bundlers: Using Vite for development, Webpack for production

Using PrismJS during development and Shiki during production

I made a Vue CLI MPA

A Vue MPA

DET171 / home

Homepage written with Vue CLI

vue-app

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

Lints and fixes files

Customize configuration

Part IV: The Guild object in Eris and a FUN command!

Part 4

The guild command

The roll command

Conclusion

Part III: The Member Object in Eris

Part 3

The whois command

Conclusion

Part II: Making more commands with Eris and Yuuko - Embeds

Part 2

Code from Previous Post

The Meme Command

Conclusion

Part I: Make a Discord Bot with Eris - The Basics

Part 1

Introduction

Prerequisites

Background Info

Features

Getting started

Creating a Discord Bot account

Set up your project

Optional Steps

Now, let's start coding!

The Ready event

You first command

Conclusion

The `guild` command

The `roll` command

The `whois` command

The `Meme` Command

The `Ready` event