Woah, that's a mouthful, huh? And I didn't even mention TypeScript!
Since there are a lot of steps involved in making a Discord Activity, I decided to create this template as a starting point for anyone like me, who wants to create activities with react and websockets. It is based on the net code I wrote for my very first Discord Activity which I ended up liking so much that I also used similar implementations for my other activities.
- Discord Embedded App SDK
- React + Vite + Typescript Template
- Working websocket client and server
- Completed authentication flow
Start by getting the authentication flow to work with your Discord app! Discord's Guide "Building Your First Activity in Discord" goes into more detailed, but here's an abridged version:
- Enable Developer Mode on Discord
- Create an App on Discord
- In OAuth2 add https://127.0.0.1 as redirect
- Add your proxy in the Activity URL Mappings
- Enable Activities in your app
- Rename .env_template to .env and add your app's ID and secret
- Add the host of your proxy in
client/vite.config.ts - Start client and server (see below)
- Start your activity on Discord
This is what it should look like in the end!
Throughout the code, I marked places of interest. For example, in server/src/close.ts I marked the place where you would put user disconnection logic with YOU: put player disconnection logic in here!. Just search the repository for comments starting with YOU:!
The client and server are two separate packages and as such must be installed and started individually. Open both the client as well as the server folder, run npm install and then npm run dev. For the client, you may need to run npm run dev -- --host instead, to make it accessible from the internet.
I also included an example launch.json for vscode with the run commands and a placeholder for a reverse proxy. Any reverse proxy should do, but I managed to get this setup working for ngrok, ssh, and frp each.