Creating a Discord Activity in seconds with Robo.js
Tags: discord, sdk, javascript, bot
Published: 2024-04-09 15:00:00

Discord announced their new **[Embedded App SDK](https://github.com/discord/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](https://support.discord.com/hc/en-us/articles/4422142836759-Activities-on-Discord)** *in seconds*!

Not just that, **[Robo.js](https://roboplay.dev/docs)** 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:

```bash
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](https://react.dev/)** and **[TypeScript](https://docs.roboplay.dev/robojs/typescript)**.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edz894k32jlvaldf54xk.png)

> You'll need to create an app in the [**Discord Developer Portal**](https://discord.com/developers/applications) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kmzrj0hr9qqehbdqmyc.png)

> **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:

```bash
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](https://www.cloudflare.com/products/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**](https://discord.com/developers/applications). 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny52f1vct85yuilxnatt.png)

> **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.

```tsx
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.

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

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phntdtrc21w9h5kutl83.png)

## 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:

```ts
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`.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cip9ezdgpv21j15722uz.png)

## 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](https://docs.roboplay.dev/plugins/directory)**, so you can easily add new capabilities to your project with a single command. How cool is that?

```bash
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](https://docs.roboplay.dev/docs/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](https://roboplay.dev/discord)