Welcome to Week 2 of Hacktoberfest 2024! This week our spotlight is one of the most accessible and creative ways to contribute to Robo.js during Hacktoberfest: Templates.

Not only are templates fun to make, but they also help others get started faster, and, of course, they qualify you for free Discord Nitro. Top contributors are also in the running for an exclusive Robo.js Hacktoberfest 2024 T-Shirt and other prizes. 🎁

For more details, check out the main event page.

• Hacktoberfest 2024

Robo.js is a framework that helps developers easily build a Discord Bot, Discord Activity, or Web App.

📦 What Are Templates?

Templates are boilerplate projects that give others a head start by providing a solid foundation to build on. They make it easy for anyone to spin up a project like a without starting from scratch. Using Robo.js, you can create templates that include all sorts of features—perfect for getting someone off the ground quickly.

Here are some ideas to get you started:

Discord Activities

• Game Engine Template: Create a starter template that integrates Robo.js with your favorite game engine, like Unity or Unreal Engine. This will help others set up Discord activities that use game engines with minimal configuration.

Discord Bots

• Music Bot Template: Build a music bot template that plays music from external platforms. This could be a popular project for those wanting to add a bit of life to their Discord servers.

Other Suggestions

• Integration Templates: Build templates that connect Robo.js with platforms like Notion or Better Stack. These integrations make it easy for others to use Robo.js alongside their favorite tools.

For more inspiration, check out the entire Templates Collection.

✨ Getting Started

Getting started is simple. Run the following command to set up a new Robo.js project:

npx create-robo <project-name>

Modify it, add features, and when you're ready, submit a pull request to the Robo.js repository to qualify for the rewards. Creating templates is an easy way to get your feet wet, help others, and potentially win prizes! 🎁

• GitHub: Submit a Pull Request
• Discord: Join the Community

We can't wait to see the creative templates you come up with. Remember, the more people who contribute, the better the rewards—so invite your friends to participate too! 🚀

📣 Spread the Word!

Share this event with your friends and help us reach our milestones. The more participants we have, the better the rewards for everyone. Let's make Hacktoberfest 2024 the best one yet! 🚀

If you have any questions or need help getting started, don't hesitate to reach out on our Discord Server. We're excited to see what you create!

• Discord: Join the Community

Happy coding and happy Hacktoberfest! 🎉

🎉 Welcome to Hacktoberfest 2024! 🎉

The time has come to show off your creativity and win free stuff! Ever built a Discord bot, activity, or website? Don't feel confident coding but like making videos about code? This is your time to shine! 🌟

Every participant gets free Discord Nitro. Top contributors get an exclusive Robo.js Hacktoberfest 2024 T-Shirt and more. The more people participate, the more and better prizes we'll give out. 🎁

✨ What is Robo.js?

Robo.js is a framework for building Discord Bots, Discord Activities, and Web Apps. It simplifies the process by providing an ecosystem of plugins and features to help you build your project faster and more efficiently. It's simple, straightforward to use, and easy to host.

Here's what you can expect:

• Ecosystem: A growing ecosystem of plugins, templates, and tools to help you build faster with less effort.
• Integrated Database: Robo.js has a built-in KV database that can be pointed to any data source via adapters.
• TypeScript Support: TypeScript works out of the box, so you can use it without any additional setup.

Check out our Documentation for more.

• Documentation: Getting Started

Note: Robo.js does not replace Discord.js for bots. It's a higher-level framework that allows you to build more complex projects with less effort. Use your favorite libraries and tools alongside Robo.js!

🎁 Rewards

Depending on the number of participants, we'll give out more and better prizes.

Starting Rewards

• Exclusive Robo.js Hacktoberfest 2024 T-Shirt for top 3 contributors
• Free Discord Nitro for everyone who makes a meaningful contribution, while supplies last.

Stretch Rewards

• Over 10 Participants: We include a free month of RoboPlay for the top 3 contributors.
• Over 25 Participants: We expand the top contributor rewards to include the top 5 participants.
• Over 50 Participants: The top 5 get to upgrade their T-Shirt to a higher prize (yet to be announced).
• Over 75 Participants: All top participants get free event stickers.
• Over 100 Participants: We expand the top contributor rewards to include the top 10 participants.

Share this event with your friends and help us reach these milestones and unlock more rewards! 🚀

🚀 How to Participate

Contribute plugins, templates, video content, or even features to the core framework. You can contribute as many times as you want, and each contribution counts as an entry for the prizes. The more you contribute, the more likely you are to win.

Sound complicated? It's really not! Run this in your terminal to get started:

npx create-robo <project-name>

Ta-dah! You now have a Robo.js project. Modify it, add features, and submit a pull request to qualify! 🎉

• GitHub: Submit a Pull Request
• Discord: Join the Community

Each type of contribution is worth a different amount of entries. They must be meaningful and add value to the community. Things like plugins that add "Hello World" commands won't count, but a plugin that adds a new way to interact will, even if it's not for Discord. Check out some ideas below!

🐞 Bug Fix (1 point)

Fix a bug in the core framework or a plugin. It's a small contribution, but it's a start! Documentation fixes don't count, but they're still appreciated.

• GitHub: How to Contribute

📦 Template (2 points)

Templates are boilerplate projects that help you get started with a specific type of project. For example, a template could be a Discord bot with a music feature or a Discord activity with a quiz.

Use the create-robo command to create a new project and modify it to your liking. Once you're done, submit a pull request to the Robo.js repository. Check out our Template Collection for inspiration!

• Documentation: Template Collection

🧩 Plugin (5 points)

Plugins are NPM packages that instantly add features to Robo.js projects. For example, a plugin could add a new command or a new way to interact with Discord.

Creating a plugin is no different from creating a normal Robo.js project, except that it's packaged as an NPM package. See our Plugin Directory for inspiration!

• Documentation: Creating Plugins

🎥 Video Tutorial (5 points)

Video tutorials are a great way to teach others how to use Robo.js or how to build something cool with it. They can be as simple as a screen recording with voiceover or as complex as a full-blown tutorial series.

Upload your video to YouTube and submit a pull request to the Robo.js repository with a link to your video.

🌟 Core Framework Feature (7 points)

This is the big one! Add a new feature to the core Robo.js framework. Please discuss your idea with the community first to make sure it's a good fit, and make sure to follow the Contributing Guidelines. It may also help to learn about the Robo Internals first.

We're strict about this one, but that's how we keep things high-quality. If you're not sure, start with a plugin or a template! Some ideas are best left as plugins, so don't be discouraged if your feature doesn't make it into the core framework.

• GitHub: Issues

🎨 Creation Ideas

Not sure what to contribute? Here are some ideas to get you started.

🎮 Discord Activities

• Game Engine: Create a template of your favorite game engine, like Unity or Unreal Engine, for Robo.js.
• Live Whiteboard: Create a plugin that allows users to draw on a shared canvas in real-time, built with WebSockets or @robojs/sync.
• Video Tutorial: Create a video tutorial on how to build a Discord activity with Robo.js. You could cover the basics, like setting up a project, or more advanced topics, like adding multiplayer support.

🤖 Discord Bots

• Music Bot: Create a template for a music bot that can play music from an external platform.
• Leveling System: Create a plugin that adds a leveling system to your Discord bot. Users can earn XP and level up by chatting in your server.
• Video Tutorial: Create a video tutorial on how to build a Discord bot with Robo.js. You could cover the basics, like setting up a project, or more advanced topics, modals and embeds.

Other Suggestions

• Integration Templates: Create templates for integrating Robo.js with other platforms, like Better Stack or Notion.
• Bot Dashboard: Create a plugin that adds a web dashboard to your Discord bot. Users could configure settings, view logs, and more. Could even be viewed as a Discord Activity!
• Video Showcase: Create a video showcasing your favorite Robo.js project. Maybe it's a bot, an activity, or a web app. Show off what you've built and how it works!

• Documentation: Plugin Directory
• Documentation: Template Collection

Spread the Word!

Share this event with your friends and help us reach our milestones! The more participants we have, the better the rewards for everyone. Let's make Hacktoberfest 2024 the best one yet! 🚀

If you have any questions or need help getting started, don't hesitate to reach out on our Discord Server. We're excited to see what you create!

• Discord: Join the Community

Happy coding and happy Hacktoberfest! 🎉

Got a fancy new Discord Activity but found that your Launch button went missing? We've got a patch for that!

This happens when your Discord App is too old to have it, or if you've acidentally deleted it when, say, cleaning up your Discord Bot's slash commands. We have different ways for you to choose, depending on what you're using.

Method 1: Node.js Script

We've open sourced a smol Node.js script that you can just run in your terminal. It'll automatically create the missing entry command for you if it doesn't exist. Download the script and run it like so:

node entry-fix.js <DISCORD_CLIENT_ID> <DISCORD_TOKEN>

• 🔗 GitHub: Download or copy script

Replace <DISCORD_CLIENT_ID> and <DISCORD_TOKEN> with the actual values in your Discord Developer Portal. Yes, you need a Discord Bot token to fix your Discord Activity.

This method is recommended for those with Node.js installed, even if making Discord Apps using other languages.

Method 2: @robojs/patch

Woah, you're using Robo.js? You're creating in luxury!

All you need to do is install @robojs/patch. That's it! It's a Robo Plugin, so it's integrated instantly.

npx robo add @robojs/patch

• 🔗 Documentation: @robojs/patch

This method is recommended for those using Robo.js to build their Discord Activities. If you're not using Robo.js, we highly recommend you check it out!

Discord Activities are Fun!

Discord Activities are a fun way to engage with your community. They're like mini-games or interactive experiences that you can create and share with others. Robo.js is a powerful framework that makes building Discord Activities easy and fun. Discord Activities are often built using HTML, CSS, and JavaScript like any other web app, but they run inside Discord itself.

If you don't already have a Discord Activity, you can create one in seconds with Robo.js.

npx create-robo <projectName> -k activity

Check out our tutorial to learn more.

• ✨ Documentation: Getting Started with Discord Activities
• 🔗 Tutorial: Creating a Discord Activity in seconds with Robo.js

Conclusion

Don't let a missing launch button ruin your day. Use one of the methods above to fix your Discord Activity and get back to building awesome experiences for your community.

You can join our Discord Server to chat with other developers, ask questions, and share your projects. We're a friendly bunch and always happy to help! Plus, our very own AI Robo, Sage, is there to assist you with any questions you may have.

• 🚀 Community: Join our Discord server

When running a Discord Activity through Discord, you may encounter Content Security Policy (CSP) issues. You can fix these by making sure network requests follow Discord Proxy rules.

This can be done manually... or you can let @robojs/patch handle it.

What is CSP?

Content Security Policy (CSP) is a security standard that helps prevent Cross-Site Scripting (XSS) attacks. It controls which resources a page can load and where it can send data.

When you run a Discord Activity in Discord, you're actually using the Discord Proxy as a middleman, meaning it sets its own CSP rules. If your network requests don't follow these rules, they'll be blocked.

• Relative requests like /api/token will be blocked unless prefixed with /.proxy.
• External requests like https://example.com/api/token will be blocked unless they're mapped or proxied.

Resolving CSP Violations

As stated above, all you have to do is make sure your network requests follow the Discord Proxy rules. In some cases, that includes adding /.proxy to the beginning of your request path.

// Before
fetch('/api/token')

// After
fetch('/.proxy/api/token')

However, WebSockets can be a bit trickier. Especially when relying on Hot Module Replacement (HMR) that loads before your own activity like in Vite. So, we created @robojs/patch to handle everything for you.

Patching Your Activity

@robojs/patch is a lightweight package that patches your network requests to follow Discord Proxy rules. It works by updating the fetch and WebSocket globals.

npm install @robojs/patch

We have different ways to apply this patch depending on your project setup.

Method 1: Vite Plugin (Recommended)

If you're using Vite, you can apply the patch as a plugin in your Vite config file.

import { DiscordProxy } from '@robojs/patch'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [DiscordProxy.Vite()]
})

We recommend this method because it allows the patch to run before before Vite's HMR client, ensuring that it works correctly.

Method 2: Function Call

If you're not using Vite, you can apply the patch by calling a function directly.

import { DiscordProxy } from '@robojs/patch'

DiscordProxy.patch()

Be sure to call this at the very beginning of your project, before other scripts are loaded. (e.g. the top of your index.js file)

➞ 📚 Documentation: @robojs/patch

External Requests

This does not affect requests made to external URLs. If you're having CSP issues with those, you may be able to fix them by creating your own Proxy or mapping them in the Discord Developer Portal.

➞ 📚 Tutorial: Resolve CSP Issues with a Proxy

Interested in Discord Activities?

Robo.js is a powerful framework for building Discord Activities with ease. It provides a wide range of features and tools to help you create epic Discord experiences!

Join our Discord Server to chat with other developers, ask questions, and share your projects. We're a friendly bunch and always happy to help! Plus, our very own AI Robo, Sage, is there to assist you with any questions you may have.

➞ 🚀 Community: Join our Discord server

➞ 📚 Tutorial: Creating a Discord Activity in seconds with Robo.js

Got a Discord Bot you'd like to enhance with advanced features? Robo.js is a powerful framework compatible with Discord.js with a plugin system so powerful, you can add new features to your bot without writing a single line of code. If you're a beginner, you can add powerful features as you learn how to code the rest of it!

Creating a New Discord Bot

If you haven't already created a Discord Bot, you can do so by running the following command in your terminal:

npx create-robo <projectName> -k bot

This will spawn a new Robo.js project ready to use as a Discord Bot. We call these Robos.

Adding Features

Once you have your Discord Bot set up, you can add new features using Robo Plugins. These plugins integrate seamlessly with your Robo to provide new functionality as if you had written the code yourself. For example, you can add AI chatbot capabilities, moderation tools, maintenance mode, economy systems, and more.

Run this in your terminal, replacing  with the name of the plugin you want to install (e.g. @robojs/ai):

npx robo add <package>

This will install the package and register it in your Robo's configuration. To install many at once:

npx robo add @robojs/ai @robojs/moderation @robojs/server

You can also create a new Robo project with plugins pre-installed:

npx create-robo <projectName> --plugins @robojs/ai @robojs/moderation

Existing Bots

If you have an existing Discord.js Bot and want to add new features, you'll need to migrate your bot to Robo.js. This process is straightforward and involves moving your existing code into the Robo File Structure.

Once your bot is migrated, you can add new features using Robo Plugins as described above.

Where to Find Plugins

You can find a list of available plugins in the Robo Plugin Directory. Browse through the directory to find plugins that suit your needs and add them to your bot. You can also create your own plugins and share them with the community.

➞ 🔌 Plugin Directory: Explore more plugins

What's more, Robo.js comes with a lot of other features and tools to help you build your bot faster and more efficiently, such as Flashcore Database to persist data easily, TypeScript, Easy Hosting, and so much more. You can even use it to build Discord Activities in seconds!

Don't forget to join our Discord server to chat with other developers, ask questions, and share your projects. We're here to help you build amazing apps with Robo.js! 🚀

➞ 🚀 Community: Join our Discord Server

Our very own Robo, Sage, is there to answer any questions about Robo.js, Discord.js, and more!

Discord Activities are web apps that run inside Discord, typically in the form of games or other interactive content using Discord's Embedded App SDK. They're currently in preview, but you can start building them today!

In this guide, we'll create a video player that everyone in a channel can control as a Discord Activity using Robo.js and React. Let's get started!

Creating the Activity Project

First, you'll need to have Node.js installed and an editor like VS Code to get started. Next, create a new Discord Activity project using the following command in your terminal:

npx create-robo <projectName> -k activity

This will spawn a new Discord Activity project ready to use and made easier with the Robo.js framework. For this guide, we'll be using TypeScript and React. We've named our project teamplay.

If this is your first time making a Discord Activity, you'll need to create an app in the Discord Developer Portal and get your Client ID and Client Secret.

Need more help? Check out Creating a Discord Activity in seconds with Robo.js

Running the Activity

Now that our project is set up, open it in your code editor and run the following command in your terminal:

npm run dev

This will start the Robo project in development mode, refreshing with every change in code. It will also create a free Cloudflare tunnel for testing.

Copy the tunnel URL and paste it into your Discord App's URL Mappings in the Discord Developer Portal. This will allow Discord to communicate with it.

With the project running, join a voice channel in your test Discord server and click the rocket button to join a Discord Activity. You should see your activity running in Discord!

Setting Up the Video Player

We need a video file to play. You can use any video file you like, but for this guide, we'll be using a sample video you can download from Coverr. Let's name it sample.mp4 and place it in the /public folder of your new project.

With the video file in place, let's add a <video> element to our main page. Open the Activity.tsx file in the /src/app folder and replace the existing code with the following:

import { useEffect, useRef, useState } from 'react'

export const Activity = () => {
	const [isPlaying, setPlaying] = useState(false)
	const videoPlayer = useRef<HTMLVideoElement>(null)

	const onPause = () => {
		if (isPlaying) {
			setPlaying(false)
		}
	}
	const onPlay = () => {
		if (!isPlaying) {
			setPlaying(true)
		}
	}

	useEffect(() => {
		if (isPlaying) {
			videoPlayer.current?.play()
		} else if (!isPlaying) {
			videoPlayer.current?.pause()
		}
	}, [isPlaying])

	return (
		<div>
			<img src="/rocket.png" className="logo" alt="Discord" />
			<br />
			<video ref={videoPlayer} className="video" src="/sample.mp4" controls={false} loop />
			<br />
			<button onClick={isPlaying ? onPause : onPlay}>{isPlaying ? 'Pause' : 'Play'}</button>
		</div>
	)
}

Let's also adjust the video player styling a bit. Add the following CSS to the App.css file in the /src/app folder:

video {
	width: 50%;
}

Ta-dah! We now have a video player in our Discord Activity that can be controlled by a button. Let's add some multiplayer features to it!

Controling the Video

To allow everyone to control the video player, we'll use the @robojs/sync plugin to sync the video player state across all clients in real-time. There's many ways to add multiplayer features but this is the easiest.

Run the following in your terminal:

npx robo add @robojs/sync

Then wrap the Activity component with SyncContextProvider in App.tsx:

import { SyncContextProvider } from '@robojs/sync'
import { DiscordContextProvider } from '../hooks/useDiscordSdk'
import { Activity } from './Activity'
import './App.css'

export default function App() {
	return (
		<DiscordContextProvider>
			<SyncContextProvider>
				<Activity />
			</SyncContextProvider>
		</DiscordContextProvider>
	)
}

We now have a websocket-powered connection between clients! This would normally require a lot of code, but @robojs/sync automatically upgrades your web server to handle websockets and syncs the state for you.

If you're already familiar with React's useState hook, you'll feel right at home with useSyncState. You can use it just like React's useState hook, but the state will be synced across all clients in real-time. Just provide a dependency array that acts as a unique identifier for the state.

To make it multiplayer, replace the useState hook in Activity.tsx with useSyncState and provide a unique identifier for the state. In this case, we'll use the string 'video':

import { useSyncState } from '@robojs/sync'
import { useEffect, useRef } from 'react'

export const Activity = () => {
	const [isPlaying, setPlaying] = useSyncState(false, ['video'])
	// ... rest of the code remains the same
}

Now, when you click the play button, everyone using your activity will see the video playing. And when you pause it, everyone will see it pause!

But wait, what if you want to sync state by channels? You can do that too! Just provide the channel ID as the second argument in useSyncState, which you can get from the Discord SDK.

import { useDiscordSdk } from '../hooks/useDiscordSdk'
import { useSyncState } from '@robojs/sync'
import { useEffect, useRef } from 'react'

export const Activity = () => {
	const { discordSdk } = useDiscordSdk()
	const [isPlaying, setPlaying] = useSyncState(false, ['video', discordSdk.channelId])
	// ... rest of the code remains the same
}

Now each channel has their own state! Invite a friend to join your Discord Activity and see the video player in action.

Wasn't That Easy?

With Robo.js and @robojs/sync, adding multiplayer features to your Discord Activity is a breeze. You can now create interactive experiences that everyone in a channel can enjoy together! You can also add more features like volume control, seeking, and even mouse tracking using useSyncState! 🚀

What's more, you can use the built-in Flashcore Database to persist data easily or Explore Plugins to add new features with one command, such as AI Chatbot Features or Web Servers. You can even create Discord Bots with it! If you're looking for something more powerful, we also have a Colyseus Discord Activity Template for real-time multiplayer games.

Don't forget to join our Discord server to chat with other developers, ask questions, and share your projects. We're here to help you build amazing apps with Robo.js! 🚀

➞ 🚀 Community: Join our Discord Server

Our very own Robo, Sage, is there to answer any questions about Robo.js, Discord.js, and more!

Discord launched a new feature called User Installable Apps in March that allows users to install your bots directly to their account, letting them use your Discord bot anywhere, even in DMS and servers your bot is not in!

This feature is currently in preview, but you can start using it today.

Got an existing Robo? Skip to making it installable

They're Still Discord Bots

You can use Discord.js to create your Discord bot and Robo.js to make things easier. We'll be creating Slash Commands and Context Commands and making them user installable.

Ready to start your adventure? Run the following in your terminal:

npx create-robo <projectName> -k bot

This will spawn a new Discord.js project ready to use as a Discord Bot, made easier with the Robo.js framework. We call these Robos.

For this guide, we'll be opting out of TypeScript to keep things simple.

Creating Commands

Let's create a slash command that responds with "Hello, World!" when used. Create a new file in the /src/commands folder called hello.js:

export const config = {
	description: 'Say hello to the world!'
}

export default (interaction) => {
	interaction.reply('Hello, World!')
}

Because we're using Robo.js, just having the file in the /src/commands folder is enough. It will automatically load and register commands.

Next, let's create a context menu command that responds with "Hello, ${user}!" when used. Create a new file in the /src/context/user folder called Hello.js:

export default (interaction, user) => {
	interaction.reply(`Hello, ${user.username}!`)
}

That's it! Your file structure should look something like this:

Now let's make these commands user installable.

Making It Installable

User installable apps are new, so let's enable this feature in our project's configuration. Open the robo.mjs file in the config folder and add the following:

export default {
	// ... rest of config
	experimental: {
		userInstall: true
	}
}

This will tell Robo.js to register all commands as user installable.

Next, enable the "User Install" authorization method for this app in the Discord Developer Portal and give it the application.commands scope. You can share the Discord Provided Link to let users install this app. Also, make sure the "Public Bot" setting is enabled there.

Trying It Out

Now that we've got a user installable app, let's try it out!

Use the Discord Provided Link to install the app to your account then run your project in development mode:

npm run dev

You can now use the /hello slash command in any server or DM, and the context menu command when right-clicking on a user. You may need to reload Discord to see the changes.

Be aware that you cannot reference other channels or certain features in commands when user-installable. For example, you cannot use it to kick out members of a server your bot is not in.

Wasn't That Easy?

User Installable Apps are just Discord Bots you can install and creating them is a breeze with Robo.js. It handles all the heavy lifting for you, so you can focus on building your app and making it awesome.

What's more, you can use the built-in Flashcore Database to persist data easily or Robo.js Plugins to add new features with one command, such as AI Chatbot Features or Web Servers. You can even use it to build Discord Activities in seconds!

Don't forget to join our Discord server to chat with other developers, ask questions, and share your projects. We're here to help you build amazing apps with Robo.js! 🚀

➞ 🚀 Community: Join our Discord Server

Our very own Robo, Sage, is there to answer any questions about Robo.js, Discord.js, and more!

If you've been following Discord's Building Your First Activity tutorial, you may have encountered an issue where the Embedded App SDK gets stuck on the READY event. This issue can be caused by a few different things, but the most common cause is Vite's hot module reloading (HMR) feature.

We've seen this issue pop up in a few different places, so we wanted to provide a quick guide on how to fix it. This post will explain it in more detail and suggest ways around it.

TLDR; Quick Fix

If you're in a hurry, the quickest way to fix this without disabling HMR is to make sure you're creating only one instance of the DiscordSDK close to the root of your app. Check out this template to see how it's done.

You can also create a new Discord Activity project with the fix already included by running this in your terminal:

npx create-robo <projectName> -k activity

What's Happening?

When you're developing a Discord Activity with Vite, the hot module reloading feature can cause the SDK to be re-created multiple times. This is because Vite reloads the module when you make changes, which can cause the DiscordSDK to be reinitialized.

Unfortunately, discordSdk.ready() gets stuck on the READY event because Discord sends the payload once per instance. That means your activity will be left waiting for the READY event to fire, but it never will until you restart it.

Starting Fresh with a Fix

To fix this issue, you need to ensure that you're only creating one instance of the DiscordSDK close to the root of your app. This way, the SDK won't be re-initialized every time you make changes, thus you won't need to await discordSdk.ready() more than once.

The easiest and fastest way to prevent this is to make sure you start from a template that already has this fix in place. You can clone this template or create a new project with the fix included by running:

npx create-robo <projectName> -k activity

This will create a new Discord Activity project with the fix already in place, so you won't have to worry about this issue. Check out our guide for more info!

➞ ✨ Guide: Creating a Discord Activity in seconds with Robo.js

Fixing Your Existing Project

If you're already working on a project and don't want to start over, you can fix this issue by ensuring that you're only creating one instance of the DiscordSDK close to the root of your app. For example, in a React app, you can use a Context to manage the SDK instance.

Here's a simplified example:

import { DiscordSDK, DiscordSDKMock } from '@discord/embedded-app-sdk'
import { createContext, useContext } from 'react'

export const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID)

const DiscordContext = createContext({ discordSdk })

export function DiscordContextProvider(props) {
	const { children } = props
	const setupResult = useDiscordSdkSetup()

	return <DiscordContext.Provider value={setupResult}>{children}</DiscordContext.Provider>
}

export function useDiscordSdk() {
	return useContext(DiscordContext)
}

function useDiscordSdkSetup() {
	// Your setup logic here (e.g., discordSdk.ready() in a useEffect)

	return { discordSdk }
}

Then apply the DiscordContextProvider at the root of your app:

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

export default function App() {
	return (
		<DiscordContextProvider>
			<Activity />
		</DiscordContextProvider>
	)
}

This way, Vite won't re-initialize the DiscordSDK every time you make changes, and you won't get stuck on the READY event. It works like so:

1. The DiscordSDK is created once and passed down through the context.
2. The SDK is initialized in the context provider.
3. Components can access the SDK through the custom useDiscordSdk hook.
4. The same SDK instance will be re-used, as long as you don't edit the useDiscordSdk file.

Conclusion

React's Context is a great way to manage global state in your app, and it's perfect for managing the DiscordSDK instance. By ensuring that you only create one instance of the SDK close to the root of your app, you can prevent the READY event from getting stuck and avoid the need to restart your activity every time you make changes.

We highly recommend using create-robo to create a Discord Activity project. These templates are designed to help you get started quickly and avoid common issues like this one. What's more, they come with a lot of other features and tools to help you build your activity faster and more efficiently, such as Multiplayer Support, TypeScript, Easy Hosting, Streamlined Tunnels, Built-in Database, Plugin System, and so much more!

Don't forget to join our Discord server to chat with other developers, ask questions, and share your projects. We're here to help you build amazing apps with Robo.js! 🚀

➞ 🚀 Community: Join our Discord Server

Our very own Robo, Sage, is there to answer any questions about Robo.js, Discord.js, and more

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 /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

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!

➞ 🚀 Community: Join our Discord server

You can now access your Discord bot's slash command options as a simple object in command functions, as of Robo.js v0.10!

We believe this is more straightforward and easier to understand than before. Keep in mind, you can still use the old way if you prefer!

Quick comparison

Before (v0.9 and below)

You had to access the options from the interaction object:

export const config = {
    description: 'Responds with Pong!',
    options: [
        {
            name: 'loud',
            description: 'Respond loudly?',
            type: 'boolean'
        }
    ]
}

export default (interaction) => {
    const loud = interaction.options.get('loud')?.value
    return loud ? 'PONG!!!' : 'Pong!'
}

After (v0.10 and above)

Directly access the options from the second parameter:

export const config = {
    description: 'Responds with Pong!',
    options: [
        {
            name: 'loud',
            description: 'Respond loudly?',
            type: 'boolean'
        }
    ]
}

export default (interaction, options) => {
    return options.loud ? 'PONG!!!' : 'Pong!'
}

Don't worry, you can still get the options from the interaction object if you prefer. All existing code will work the same. The new way is just a more convenient and modern approach.

TypeScript support

The new way also has full TypeScript support! This gets you better type checking and autocompletion in your editor, so you know exactly what options are available for your command.

import { createCommandConfig } from 'robo.js'
import type { CommandOptions, CommandResult } from 'robo.js'
import type { CommandInteraction } from 'discord.js'

export const config = createCommandConfig({
    description: 'Responds with Pong!',
    options: [
        {
            name: 'loud',
            description: 'Respond loudly?',
            required: true,
            type: 'boolean'
        },
        {
            name: 'text',
            description: 'The text to respond with',
            type: 'string'
        }
    ]
} as const)

export default (interaction: CommandInteraction, options: CommandOptions<typeof config>): CommandResult => {
    const { loud, text = 'Pong!' } = options
    return loud ? text.toUpperCase() : text
}

Notice the createCommandConfig function and as const keyword. These are important for TypeScript to infer types correctly.

The options object is so smart, that it will tell you not only the name and type of the option, but also whether it may be undefined or not, depending on the option's required property.

What is Robo.js?

Oh yeah, if you don't already know, Robo.js is a powerful framework for building Discord activities, bots, web servers, and more. It's designed to be simple, yet powerful, with a focus on developer experience and modern JavaScript/TypeScript features.

Bot development is just Discord.js, but with a sprinkle of Robo magic on top. Existing Discord.js code works with Robo.js because it is Discord.js. The main difference is that Robo.js provides a more structured way to build your bot, without boilerplate, and following best practices by default.

It's also super easy to use! For example, you can code an entire Discord bot with just one line of code:

// src/command/ping.js
export default () => 'Pong!'

The above is all you need to create a /ping command that responds with "Pong!". Robo.js takes care of the rest, including registering the command with Discord, handling interactions, and more. You're not limited by what you can do with Robo.js, but you're empowered to do more with less code.

Ready to get started?

Creating a new Robo.js project is as simple as running:

npx create-robo my-project

This will guide you through setting up your project. Check out our docs and tutorials for more!

➞ 🚀 Community: Join our Discord server

➞ 📚 Documentation: Getting started

➞ 📖 Tutorial: Creating a Discord Activity in seconds

We're excited to announce the release of Robo.js v0.10 - our biggest update yet! 🎉

There's a lot to unpack, so we'll cover new features in future posts. However, there's some important changes you should know about right now.

Not familiar with Robo.js? It's a framework for creating Discord.js bots with ease and best practices by default. Plugins extend your bot's features right away! Also, you can create Discord Activities with Robo.js now! 🚀

New Package Names

We've changed the core package name from @roboplay/robo.js to robo.js! We feel like this fancy new name is much easier to remember and type. Many thanks to the previous owner of robojs for letting us use the name!

Yes, this means you'll need to update your package.json and import statements. But trust us, it's worth it!

New Plugin Names

We've also updated our plugin names to be more consistent and easier to remember. Here are the new names:

• @roboplay/plugin-ai ➞ @robojs/ai
• @roboplay/plugin-ai-voice ➞ @robojs/ai-voice
• @roboplay/plugin-api ➞ @robojs/server
• @roboplay/plugin-better-stack ➞ @robojs/better-stack
• @roboplay/plugin-devtools ➞ @robojs/dev
• @roboplay/plugin-modtools ➞ @robojs/moderation

We've also deprecated the @roboplay/plugin-poll plugin now that Discord has built-in polls. You can still use the plugin, but we recommend using Discord's feature instead.

Breaking Changes

Of course, with a new 0.x release, there are some breaking changes. We've tried to keep these to a minimum, but here are the most important ones:

• Removed legacy runtime: We've removed the old process-based runtime in favor of the worker thread-based runtime introduced in v0.8. The thread-based runtime has been the default since v0.9, so this change shouldn't affect most users.
• Removed old robo.config.mjs support: We've removed support for the old robo.config.mjs configuration file. It was never recommended to use this file, but if you were, you'll need to switch to the standard /config/robo.mjs file.
• Moved heartbeat: We've removed the redundant heartbeat feature that previously built into Robo.js. The @robojs/better-stack plugin already provides a more robust solution for this, so use that instead if you need heartbeat functionality.
• Moved robo doctor command: The robo doctor command has been moved to the @roboplay/sage CLI tool.

These changes should affect very few users, but we wanted to make sure you were aware of them. Clean ups like these help us keep Robo.js lean and mean!

Upgrading to v0.10

Normally, you'd be able to run robo upgrade to upgrade to the latest version of Robo.js. However, due to the breaking changes in this release, we recommend uninstalling and reinstalling Robo.js to ensure a clean upgrade.

Here's how you can do that:

npm uninstall @roboplay/robo.js
npm install robo.js

Don't forget to update your import statements as well!

Plugins can be updated in a similar way:

npx robo add @robojs/ai
npx robo remove @roboplay/plugin-ai

We recommend adding the new plugin before removing the old one to get a chance to copy over any configuration files or data.

What's Next?

We're excited to show what else is new in Robo.js v0.10! Stay tuned for more posts covering the new features and improvements.

Need help upgrading or have questions about the new release? Feel free to ask us in our Discord server. ✨

We're beyond excited to unveil RoboPlay! It's not just another hosting service; it's a next-gen platform tailored for Discord.js bots, especially those powered by the Robo.js framework.

Currently in early beta. Plus, it's free to use, even post-beta, with some neat premium options for those looking for a little extra.

Deploy Your Bot in Under 5 Minutes

Getting your Discord.js bot up and running on RoboPlay is easy! Here’s how:

Node v18+: Make sure you have Node.js 18 or newer installed on your system.

Create Your Bot: Use npx create-robo to set up a Discord.js bot powered by Robo.js.

• Learn the Basics: Get started with our quick start guide to understand the basics of Robo.js or check out our to-do bot tutorial.

• Sign up for RoboPlay: Run npx robo login to open our auth page. Don't forget your invite code!

• Deploy Your Bot: Launch your bot into the world with npx robo deploy, ensuring it stays online 24/7, free of charge!

Each RoboPlay account comes with a free "Robo Pod" to host your bot. Think of it as a dedicated server for your bot, without the need to compete for resources, but much easier to use.

Remote Bot Management Made Easy

Until we have a full-fledged dashboard, you can manage your Discord.js bot powered by Robo.js using the command line:

• Start Your Bot: npx robo cloud start
• Stop Your Bot: npx robo cloud stop
• View Your Bot's Logs: npx robo cloud logs
• Check Your Bot's Status: npx robo cloud status

Robo.js: Simple, Powerful, and Fun

While RoboPlay provides the hosting, it's Robo.js that brings your bot to life! It's a powerful, yet simple, framework for Discord.js bots, with a built-in database, file-based structure, and so much more. All in just a few hundred kilobytes! (so smol)

➞ 📚 Documentation: Getting started

You can even install plugins to enhance your bot's functionality with a single command. Here are a few examples:

• Moderation: Equip your bot with essential tools to manage and maintain your server.

npx robo add @roboplay/plugin-moderation

• AI Chatbot: Transform your bot into an engaging chatbot using AI. Supports customized behaviors and Discord commands.

npx robo add @roboplay/plugin-ai

• Web Server: Effortlessly create and manage API routes, turning your Robo project into a full-fledged API server.

npx robo add @roboplay/plugin-api

➞ 📚 Learn how to make your own plugin

Ready to Join? Grab Your Invite Code!

Excited yet? We're including two invite codes for early access. If you miss out, don't fret! Join our Discord and summon an invite for yourself with the /claim-invite command.

• XY8G4SYZ-KT3BWRFN
• BMDOQZX3-6B6UK4BJ

Our Discord server is also home to our very own AI bot, Sage, ready to assist with answers to your queries. Plus, our friendly staff are always on deck to help out. UwU

Our commitment with RoboPlay is to provide a robust, user-friendly platform for bot developers at every skill level. From your first line of code to a fully functional bot, we're excited to support your journey.

Keep your eyes peeled for what's next, and let's create something awesome together!

It's now easier than ever to create AI-powered Discord bots with the latest updates to the Robo.js AI Plugin. This major update allows you to inject knowledge into your bot, enabling it to remember past interactions and respond accordingly, rewrites the core AI engine, and adds new slash commands for more dynamic interactions.

By the way, for those new, this plugin makes creating a fully customizable AI Discord chatbot as easy as one command!

Installation 💻

To add this plugin to your Robo.js project:

npx robo add @roboplay/plugin-ai

New to Robo.js? Start your project with this plugin pre-installed:

npx create-robo <project-name> -p @roboplay/plugin-ai

Insights: Long-Term Memory and Knowledge Injection

One of the most significant updates is the introduction of the Insights feature, adding depth to AI interactions:

• Contextual Long-Term Memory: Insights feature allows AI to remember past interactions for more nuanced responses per channel.
• Default Knowledge Injection: Inject your bot with knowledge by placing documents in the project's documents folder. Any documents in this folder are automatically loaded into the AI engine's RAG model.

- /documents
	- my-first-document.txt
	- my-second-document.md
	- my-third-document.json

This feature uses OpenAI's Assistant API in the default model. Just starting your bot will automatically set up an Assistant instance matching your bot's name, commands, system messages, documents, and more.

Insights is enabled by default, but you can disable it in the plugin configuration:

export default {
	insights: false
}

By the way, our very own Robo, Sage, uses this feature to help people learn about Robo.js. We fed it the Robo.js documentation and a few other documents, and it's been learning ever since!

Custom AI Engine Support

You can now use any AI model of your choice with the new engine configuration option. Just extend the BaseEngine class and pass it to the plugin configuration:

export default {
	engine: new MyCustomEngine()
}

By default, this plugin still uses OpenAI's API, but you can now use any AI engine you want. This feature is ideal for developers who want to use their own AI models or integrate with other AI APIs!

Note: This feature is still in beta. We're working on improving the API and documentation for custom AI engine support.

New Slash Commands for Dynamic Interaction

These new commands add a layer of versatility to how users interact with their AI-powered bots:

• /chat: Ideal for AI interactions when "Message Content" intent isn't enabled.
• /imagine: Enables your bot to generate images from text prompts.
• /ai say: A feature for moderators to communicate through the bot, with options for direct or AI-styled speech.

Advanced Natural Language Command Execution

The plugin now adeptly handles complex responses and options, enhancing the AI-bot interaction:

• Full Support for Dynamic Responses: Including embeds, files, and actions in AI-driven interactions.
• Improved Handling of Options: Accurate processing of "Role" or "GuildMember" options in natural language commands.

Simplified and More Powerful JavaScript API

The JavaScript API has been refined for better usability and more creative control:

• Renamed and Simplified AI API: AIEngine is now AI, offering a more intuitive interface.
• Enhanced Helper Functions: Functions like selectOne benefit from the new JSON mode, improving their reliability.

Breaking Changes: Key Updates to Note

This update includes some changes that may affect your current setup:

• Environment Variable Update: The plugin now uses OPENAI_API_KEY as the environment variable, replacing the previous openaiKey configuration option.
• API Renaming: The AIEngine export has been simplified and renamed to AI. This change streamlines the API and enhances its usability.

Expanded Interaction Capabilities

The update also enhances voice and web interactions, making AI bots more versatile:

• Voice Channel Interactions: With @roboplay/plugin-ai-voice, AI can now engage in voice channels. It will be updated within the next few days to support this latest update.
• Web API Integration: @roboplay/plugin-api adds a new web chat endpoint for AI interactions.

This major update to the @roboplay/plugin-ai opens up new possibilities for Discord.js bot developers using Robo.js. It brings sophistication and a new level of interaction to AI-powered bots!

➞ Documentation: Getting started

➞ Community: Join our Discord server

Experience the next level of bot interactions with the latest updates to the Robo.js AI Plugin!

We're happy to introduce @roboplay/plugin-devtools, a comprehensive development toolkit designed specifically for debugging Discord.js bots created with the Robo.js framework.

Whether you're testing APIs, monitoring resources, or emulating specific behaviors, this plugin streamlines the process, making development with Robo.js more efficient and enjoyable.

Installation 💻

To add this plugin to your Robo.js project:

npx robo add @roboplay/plugin-devtools

New to Robo.js? Start your project with this plugin pre-installed:

npx create-robo <project-name> -p @roboplay/plugin-devtools

Development-Focused Commands

The plugin offers a variety of commands to enhance your development workflow:

• /devtools example defer: Demonstrates Sage's auto deferral feature with different behaviors.
• /devtools example error: Intentionally triggers errors, useful for testing Sage's debug mode.
• /devtools example permission-dm: Shows how slash commands work outside direct messages.
• /devtools flashcore clear: Clears all values in Flashcore (use with caution!).
• /devtools flashcore delete: Deletes a specific key from Flashcore.
• /devtools flashcore get: Retrieves the current value of a specific Flashcore key.
• /devtools flashcore set: Sets a value for a given Flashcore key.
• /devtools flashcore watch: Monitors changes to Flashcore keys, sending notifications on updates.
• /devtools module check: Checks if a specific module is active.
• /devtools module set: Toggles the active state of a module.
• /devtools state get: Fetches a state value.
• /devtools state set: Sets a state value.

Dive into the plugin's source code for practical usage examples.

The above commands are an excellent way to test Robo APIs such as Flashcore, Sage, States, and more. They also provide a glimpse into the inner workings of Robo.js, helping you understand the framework better.

Essential Resource Monitoring

Stay ahead of performance issues with the resource monitoring feature. This function allows you to keep track of your Robo's CPU and RAM usage, helping you identify and address any performance bottlenecks.

Enable it in the plugin configuration:

export default {
    monitorInterval: 10_000, // Every 10 seconds
    monitorResources: true // Enable resource monitoring
}

A Note on Deployment

@roboplay/plugin-devtools is tailored for development environments. Remember to remove it before deploying your Robo to safeguard your server and database:

npx robo remove @roboplay/plugin-devtools

Join the Robo.js Adventure

New to Robo.js? Start building your own feature-rich Discord.js bot today:

npx create-robo <name>

➞ Documentation: Getting started

➞ Community: Join our Discord server

Upgrade your Robo.js development with @roboplay/plugin-devtools and experience a streamlined, efficient development process.

Managing a Discord server just got more streamlined and efficient with the release of the @roboplay/plugin-modtools. This powerful plugin is designed to elevate the moderation capabilities of your Robo.js projects, infusing them with advanced features for a smoother and more effective server management experience.

Installation 💻

To add this plugin to your Robo.js project:

npx robo add @roboplay/plugin-modtools

New to Robo.js? Start your project with this plugin pre-installed:

npx create-robo <project-name> -p @roboplay/plugin-modtools

What's New in Moderation?

The Enhanced Moderation Tools Plugin offers a comprehensive suite of commands, bringing flexibility and depth to server moderation:

Slash Commands

Empower your server's moderation team with these intuitive slash commands:

• /mod audit: Get a deep insight into member activities.
• /mod ban: Remove rule violators effectively.
• /mod forgive: Offer a clean slate to members by clearing past strikes.
• /mod kick: Temporarily remove disruptive members.
• /mod report: Streamline issue reporting within the community.
• /mod setup: Easily configure your moderation tools.
• /mod timeout: Implement cooling-off periods.
• /mod warn: Discreetly warn members, maintaining server decorum.

Context Commands

Context commands make moderation actions more accessible and user-friendly:

• Report Anonymously (Message): Facilitate anonymous reporting.
• Audit (User): Instantly audit user activities.

Moderation Channels

Organize and track server activities efficiently with specialized moderation channels:

• Moderator Logs: Keep a detailed record of all moderation actions.
• Moderator Mail: Centralize and manage user reports effectively.

Easy Setup

Setting up the plugin is hassle-free. Run /mod setup as a moderator to tailor the moderation tools to your server's needs. Choose your moderation channels, test actions safely with Test Mode, enable Confirmation Mode to avoid unintentional moderation actions, or restrict all commands to only moderators with Lockdown Mode.

Smarter Moderation with AI Integration

Imagine moderating your server using natural language commands. By integrating the @roboplay/plugin-ai, this becomes a reality:

npx robo add @roboplay/plugin-ai

Direct your Robo in plain language, like “SageBot, please ban Baguette for spamming bread,” and let the AI take care of the rest.

This plugin marks a significant leap in our ongoing efforts to make Discord server management more intuitive and efficient. We're excited for you to try the Enhanced Moderation Tools Plugin and take your server's moderation to the next level!

Join the Robo.js Journey

New to Robo.js? Start building your own feature-rich Discord bot today:

npx create-robo <name> -p @roboplay/plugin-modtools

➞ Documentation: Getting started

➞ Community: Join our Discord server

Experience an enhanced moderation experience with Robo.js today! 🚀