How to Deploy a Discord Bot on Vercel 🚀

Woohoo! My First Ever Article! ✌️

Stuck at any step? Join us on Discord.

Got an error? Join us on Discord.

Found a bug? Join us on Discord.

You get the point! If you need help with discord.https, join our Discord community: https://discord.gg/pSgfJ4K5ej

Creating a Discord Application

First, we need to create a Discord Application and obtain its credentials.

Open the Discord Developer Portal. Ensure you have a Discord account and are signed in.

In the top-right corner, click New Application:

Enter a name for your application and, if you want, review the terms.

Now, let’s personalize it.

Next, invite the bot to a server. I recommend using a test server you own.

Go to the Installation tab and copy the invite URL:

Paste the invite link into your browser and add the bot to your chosen server.

Creating a New Project

To simplify bot creation, we’ll use a CLI tool called create-discord-https. Fun fact: Its code was stolen inspired from create-vite ✨.

What is discord.https ?

discord.https is a robust, modular library for handling Discord HTTP interactions, built with a router architecture similar to the popular Express library.

Now, let’s get started. Run the CLI:

npx create-discord-https@latest

Follow the prompts to set up your project.

Project Structure

If you are wondering, don’t wonder! Assuming your CLI ran smoothly, you should see something like this:

Again, don't wonder, Let me explain a each few files:

• index.js: Name speaks itself.
• api/interactions.js: Read the doc.
• DevLayer.js: Simplifies development by managing a local tunnel (details in the file for beginners) and automatically registering commands when they change. Do not delete the generated __dev_layer_cache__ file, it’s used to detect command changes.
• spawner.js: Runs vercel dev and opens a local tunnel for you. Why not put this in index.js? Because in a serverless environment, state is lost between HTTP requests, so this ensures the tunnel stays nicely.

Registering Commands

Run the development server:

npm run dev

When you see this:

Either copy the link into your browser or Ctrl+click it. The system will detect command changes and register them automatically, super handy for development!

Once done, press Ctrl+C to stop the Vercel server.

Deploying to Vercel

Time to install the Vercel CLI Oh, nevermind it’s already installed from the previous npm i.

Deploy your project with:

npx vercel --prod

If you’re not logged in, log in to Vercel, then press Enter to accept the default options, they’re sufficient.

Visit vercel.com, find your project in the dashboard (it’ll appear if the deploy command succeeded), and note the deployment URL.

Interaction Endpoint Configuration

Locate your Vercel deployment URL (e.g., https://cool-bot.vercel.app) in the Vercel dashboard. Append /interactions to it (e.g., https://cool-bot.vercel.app/interactions) and visit the URL in your browser. If everything is set up correctly, you’ll see:

haha.. very funny... :/

You should see a message saying "server is alive!"

Now, go to the Discord Developer Portal, select your application, and navigate to the General Information section:

Paste your interaction endpoint URL (e.g., https://cool-bot.vercel.app/interactions):

Click Save Changes. If successful, you’ll see:

If not, retrace your steps, buddy!

Final Steps

Head to the server where you invited the bot. Type / in a channel, and you should see:

Try the /jokes command:

You’ve got jokes, with a sprinkle of discord.https branding—because why not? 😅 (Feel free to tweak the commands to make them your own!)

Don't forget to star discord.https

Bonus Notes

discord.https supports features like editReply, followUp, and more. In a serverless environment like Vercel, use waitUntil to handle these functions. Methods like .reply() or, deferReply() will close the connection, so you need to use waitUntil for any follow-up actions.