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
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.
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.
Don't worry! There's a lot of files but your code only goes in the
/srcfolder.
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
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!
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>
)
}
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()
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' }
}
And that's it! You've just created a new API route. You can now access this route at http://localhost:3000/api/health.
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
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!
Top comments (0)