React (JS)
Welcome to your fresh Robo.js project!
Build, deploy, and maintain your Discord Activities with ease. With Robo.js as your guide, you'll experience a seamless, file-based setup, an integrated database, TypeScript support, and a rich ecosystem.
Ready to embark on this adventure?
Getting Started
Create a project with this template, replacing <project-name>
with your desired name:
npx create-robo --template discord-activities/react-js --name <project-name>
Then navigate into your project directory:
cd <project-name>
Run development mode:
npm run dev
Notes: A free Cloudflare tunnel is included for easy testing. You can copy and paste it into activity's URL mapping to test things out.
️ App Development
You can find your client-side code in the /src/app
folder. This is where you can build your web app using React, Vue, or any other front-end framework.
Things are powered by Vite under the hood, so you get the latest ES modules, hot module reloading, and more! ⚡
Try editing the main
file to get started! (Activity.tsx
if you're using React)
Authentication
The React template makes it easy to authenticate your activity with Discord. The <DiscordProvider>
components in App.tsx
accepts authenticate
and scope
props.
<DiscordContextProvider authenticate scope={['identify', 'guilds']}>
<Activity />
</DiscordContextProvider>
You can then get the SDK and other goodies from the useDiscordSdk
hook!
️ Backend Development
Your server-side code is located in the /src/api
folder. This is where you can build your API, webhooks, and other fancy server-side features.
This backend is powered by @robojs/server - a powerful Robo plugin that creates an manages a Node http
server for you. If you install Fastify, the server will automatically switch to it for better performance!
Everything Robo is file-based, so you can create new routes by making new files in the /src/api
directory. The file's name becomes the route's path. For example, let's try making a new route at /health
by creating a new file named health.js
:
export default () => {
return { status: 'ok' }
}
Folder Structure
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!
Folders only become reserved when you install a plugin that uses them. For example, bot functionality uses the commands
and events
folders.
Robo Ecosystem
By building with Robo.js, you gain access to a growing ecosystem of plugins, templates, and tools. Robo Plugins are special. They can add features with one command.
npx robo add @robojs/ai @robojs/sync
Plugins integrate seamlessly thanks to the Robo File Structure. What's more, anyone can create a plugin.