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 multitude of plugin-powered skills to unlock along the way.
Ready to embark on this adventure?
Getting Started
Create a project with this template, replacing <project-name>
with your desired name:
npx create-robo <project-name> --template web-apps/react-js
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.
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 App.jsx
file to get started!
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 the Server Plugin - 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' }
}
Easy, right? Check out the Server Plugin documentation for more info!
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.
Plugins
This Robo boasts an intuitive plugin system that grants new capabilities instantly!
npx robo add @robojs/ai
Swap out
@robojs/ai
with your chosen plugin's package name
With that, your Robo automatically equips itself with all the features the plugin offers. Want to revert? Simply use robo remove
to uninstall any plugin.
Crafting something unique in your Robo project? You can turn your innovations into plugins, be it specific functionalities or your entire Robo. Share your genius with the world!
Deployment
Run the deploy
command to automatically deploy to RoboPlay once you're ready to keep your robo online 24/7.
npm run deploy
You can also self-host your robo anywhere that supports Node. Just make sure to run build
followed by start
:
npm run build
npm start