Building a Bot to Fetch Discord Scheduled Events with 11ty and Netlify
If you haven’t heard of 11ty (Eleventy) yet, we are here to share why you should be excited about this new-ish static site generator on the block!
For clarification, a static site generator (SSG) is a tool that generates a static HTML website based on raw data and a set of templates.
11ty is an SSG with a small bundle size and no runtime, which means it only ships your code to the browser. It supports multiple templating engines providing flexibility to use templating languages like njk, .html, .md, and more. For this article, we will be using nunjucks (.njk) templating.
It’s worth pointing out that 11ty is NOT a javascript framework.
This article is a recap of the JS Drop training by Domitrius Clark where he showed us how to build a Discord Scheduled Event List with 11ty and Netlify.
In this workshop, you will learn how to build a static generated site for a list of scheduled events fetched from a Discord server using 11ty and Netlify.
A Notion document outlining the steps for this workshop. (Thanks Dom!)
👋 Before getting into the steps, make sure you have:
- A GitHub account and a repo created to house your workshop code
- A Discord account & a server for us to connect your bot to
- A Netlify account to deploy your application at the end
Initial Project Scaffold and Install Dependencies
npm init -y to init a package.json with default values
yarn add -D @11ty/eleventy @netlify/functions tailwindcss node-fetch@2 dotenv npm-run-all
Open the new project in your favorite code editor
Edit the script property of the package.json file:
`
The above scripts are the build commands for 11ty production, CSS build for Tailwind, and also to run the dev server for testing our application.
Now that we have our packages and scripts defined, let’s scaffold out the folders and files we’ll need for the site.
First edit the .gitignore:
`
Next, define the 11ty configs:
- Types of templating files (Nunjucks)
- Directories to use include build output, where get components, layouts, and includes.
- Defining plugins
Edit the _eleventy/config.js file with the following:
`
Next, we edit the netlify config file netlify.toml to config Netlify deployment with the following:
- Build commands
- Path to Netlify functions
`
Creating base layout and setting up Tailwind
We created the _includes folder with two sub-folders, for our components (or macros), simply named components and layouts, which is where we’re going to be focused in this lesson.
11ty exposes the _includes folders so that we have access to our layouts and components inside of our pages and inside of each other (for example using macros inside of other macros).
Let’s go ahead and create the HTML scaffold for our pages. Inside of /src/_includes/layouts/ we’ll create the base.njk file.
`
The layout will be used to wrap all of our pages. We can also create sub-layouts and new layouts depending on the needs of the page. For this tutorial we will need only this base layout.
For the base.njk we:
- We made the Tailwind styles visible to our page by adding a link tag for /styles.css
- We are using the title variable, because of 11ty’s data cascade, and we’re able to pull variables in from our pages frontmatter. In our files, we’ll need to define a title to ensure our layout doesn’t break.
- Notice the {{ content | safe }}. The content variable is the page content itself. So, in our case, this will be our .njk page and components. the safe variable is a builtin filter to nunjucks, to make sure it will not be HTML escaped.
Next, we will modify tailwind.config.js to make our Tailwind work as expected:
`
And modify the styles.css file to import Tailwind utilities, base, and components:
`
Then we edit the index.njk file with the default content and frontmatter:
`
Now to test that everything works, start the dev server:
`
Everything should work!
Now navigate to http://localhost:8080 in your browser.
Creating a Navbar component in Nunjucks
Let's create a Navbar component for our layout with Nunjucks, in the src/_includes/components/ add a navbar.njk:
`
Next, we modify the index.njk file to include the navbar in our pages and add:
`
Now the final document should look like this:
`
Initialize a Discord BOT from the Discord server
Now that we have the template and base file set up, next we should connect the Discord bot to the page.
Before we start to initialize a discord bot, we need to put some things in place, so head over to your discord.
Go to the User Settings, navigate to the Advanced tab and enable the Developer Mode.
Head over to the Discord Developer Portal and click on New Application to create an application.
Fill in the necessary details and click on create.
On the sidebar menu, navigate to Bot and click on add bot.
We will need a few details for our app to connect with the Discord server.
Let’s copy them to the .env file.
Add environment variables DISCORD_BOT_TOKEN & DISCORD_GUILD_ID and assign the value for discord token from the Bot page by clicking reset token.
For the DISCORD_GUILD_ID, head over to a Discord server that you manage, or create one for this tutorial, side-click on the server and click on Copy ID.
Now paste the ID to set the value for the DISCORD_GUILD_ID environment variable.
Next, add the bot to your server https://discordapp.com/api/oauth2/authorize?scope=bot&client_id=YOUR_CLIENT_ID
Find the client ID from the 0Auth2 tab and click on copy.
Now we are all set and connected to the server.
Using global data files in 11ty to fetch scheduled events from Discord
In 11ty, data is merged from multiple different sources before the template is rendered. The data is merged in what 11ty calls the Data Cascade.
We will be fetching data from discord from a javascript function in the global data file. Inside of src/_data, create a new file named events.js.
Previously, we created environment variables called DISCORD_BOT_TOKEN & DISCORD_GUILD_ID. Now, we can fetch our events endpoint, grab our events, and inject them into our templates.
Our file will look like this:
`
Creating the events page
In the src directory, create an events.njk file:
`
Currently we’ve just got a page rendering some static content. Let’s use Nunjucks loops to render a card for each of our events.
The data we care about right now from the large event object coming back are:
- creator
- name
- scheduled start time
- description
- and if it’s not inside of Discord, where is it
We also need to make sure we check the event for any meta data that could point us toward an external link for this event. Thankfully, this is another quick fix with Nunjucks if blocks.
Our final card (should) end up looking something like below.
`
Before we test the application, schedule a test event on Discord, restart the dev server, then click on events tab in the navbar:
You should see your newly scheduled events.
Pushing to GitHub and deploying to Netlify
Pushing to Github
Let’s initialize a repo so we can track our changes and deploy live to the web as we go.
Start off with a quick command to initialize the repo:
`
Then let’s get all of our current changes added and pushed to main, so we can create a repo.
`
Using the GitHub CLI, create a repo and push it,
`
This will create your repo, name it, and push up the commits all in one command.
To confirm that the repo is up, run:
`
Deploy to Netlify
To create a new project on Netlify with the new repo as the base, run:
`
Fill in the prompts. You should be asked the following:
- Choosing to create and configure a new site
- Choose your team
- Set your unique site name
Now, you should have an admin URL and base URL link in the console.
There will be a few more prompts:
- Authenticate Github through Netlify
- leave build command blank
- leave netlify functions folder blank
Once all that is done, we’re going to want to run a few commands:
- git push
- netlify open
If something was wrong with your initial linking of your code, try to run a new production deploy using:
- netlify deploy --prod
Netlify CLI will deploy the local project to the Netlify server and generate a random URL which you can visit to see the live app.
Conclusion
In this workshop, you learned to use 11ty to fetch and display your scheduled events from a discord server and deploy an app to Netlify. That was pretty easy! Did you run into any issues?
There is more! Watch the full training on the ThisDot YouTube Channel
Are you excited about 11ty? What are you building using it? Tell us what excites you!...
