Skip to main content

React w/ Firebase (TS)

Starter Discord Activity built with Robo.js and React. Uses Firestore for real-time data storage. Just update the firebaseConfig in src/core/firebase.ts and map /firestore to firestore.googleapis.com in your Discord Developer Portal then you're good to go!

Ready to embark on this adventure?

Getting Started​

Create a project with this template, replacing <project-name> with your desired name:

Terminal
npx create-robo <project-name> --template discord-activities/react-firebase-ts

Then navigate into your project directory:

Terminal
cd <project-name>

Run development mode:

Terminal
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)

Authenticating​

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.

Terminal
npx robo add @robojs/ai @robojs/sync

Plugins integrate seamlessly thanks to the Robo File Structure. What's more, anyone can create a plugin.

Hosting​

Hosting your project keeps it running 24/7. No need to keep your computer on at all times, or worry about your Internet connection.

You can host on any platform that supports Node.js, or run robo deploy to host on RoboPlay - a hosting platform optimized for Robo.js.

Terminal
npm run deploy

Learn More​