Creating a Discord Activity in seconds with Robo.js

waveplay-staff

WavePlay Staff

Posted on April 9, 2024

Creating a Discord Activity in seconds with Robo.js
Hacktoberfest 2024 - Build stuff, win free swag

Discord announced their new Embedded App SDK last month, making it easier for developers to create interactive experiences within Discord. Now, with Robo.js, you can build your own Discord Activity in seconds!

Not just that, Robo.js also manages your project's server, API, and client-side code, so you can focus on building your activity. Let's get started!

Creating a new project

First, create a new Robo.js project by running the following command:



npx create-robo my-activity --kit activity


Enter fullscreen mode Exit fullscreen mode

This will launch an interactive setup process to configure your project just the way you like it. For this guide, we'll stick with the default recommendations - React and TypeScript.

Image

You'll need to create an app in the Discord Developer Portal if you haven't already.

Once you're done with the setup, run cd my-activity to navigate to your new project.

Your new project

Your project is now set up and ready to go! Here's a quick overview of the project structure:

  • /config: Configuration files for your project.
  • /public: Static files like images, fonts, and other assets.
  • /src/app: Your client-side code, where you can build your web app using React, Vue, or any other front-end framework.
  • /src/api: Your server-side code, where you can build your API, webhooks, and other fancy server-side features.

Image

Don't worry! There's a lot of files but your code only goes in the /src folder.

While the api and app folders are reserved for your server and client-side code, you are free to create anything else in the /src directory!

Got it? Great! Let's move on to running your activity.

Running your activity

To start your activity in development mode, run the following command:



npm run dev


Enter fullscreen mode Exit fullscreen mode

This will start your Robo project in development mode, refreshing with every change you make. You will also get a free Cloudflare tunnel for easy testing.

Go ahead and copy the tunnel URL and paste it into your activity's URL mapping in the Discord Developer Portal. This will allow Discord to communicate with your activity.

Then, join a voice channel in your test Discord server and click the "Create Activity" button. You should see your activity running in Discord!

Image

Heads up: Discord currently limits activities to servers with less than 25 members (including bots).

Authenticating with Discord

As you can see, your project includes an API route called /api/token. This route is used to authenticate your activity with Discord securely.

The React starter template includes handy code that handles the authentication process for you. Let's add props to the provider in the App.tsx file and see what happens.



import { DiscordContextProvider } from '../hooks/useDiscordSdk'
import { Activity } from './Activity'
import './App.css'

export default function App() {
    return (
        <DiscordContextProvider authenticate scope={['identify', 'guilds']}>
            <Activity />
        </DiscordContextProvider>
    )
}



Enter fullscreen mode Exit fullscreen mode

Now when you run your activity, Discord will prompt you to authenticate with your app!

You can get the SDK and other goodies from the useDiscordSdk hook.



const { accessToken, authenticated, discordSdk, error, session, status } = useDiscordSdk()


Enter fullscreen mode Exit fullscreen mode

Image

Adding your own features

Now that you have your activity running, you can start adding your own features. You can create new routes in the /src/api folder, new components in the /src/app folder, and more. Seriously, it's super easy!

For example, let's create a new route at /api/health by creating a new file named health.ts in the /src/api folder:



export default () => {
    return { status: 'ok' }
}


Enter fullscreen mode Exit fullscreen mode

And that's it! You've just created a new API route. You can now access this route at http://localhost:3000/api/health.

Image

Final thoughts

Building a Discord Activity with Robo.js is a breeze. With its intuitive project structure and built-in features, you can focus on creating a fun and engaging experience for your users.

But wait, there's more! Robo.js also supports plugins, so you can easily add new capabilities to your project with a single command. How cool is that?



npx robo add @robojs/ai


Enter fullscreen mode Exit fullscreen mode

Did you know that Robo.js was originally built for Discord Bots? Check out the getting started guide for creating a Discord bot with Robo.js.

📚 Documentation: Getting started

Got any feedback or questions? Join our Discord server and let us know. We're here to help you build amazing activities!

🚀 Community: Join our Discord server

💖 💪 🙅 🚩
waveplay-staff
WavePlay Staff

Posted on April 9, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related