Discord Activity

Note

Docker is not mandatory to run the project, and is provided as an optional convenience, offering a simpler and quicker way to run the project. Otherwise, refer to the alternative setup section.

Setup

1. Environment Variables: Create a .env file in the root directory with the following content:

   VITE_DISCORD_CLIENT_ID=00000000000000000000
   DISCORD_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXX-XXXXXXXXXX

   Replace the placeholders with your Discord Application Client ID and Client Secret.

2. Run the Server & Client with Docker: Use Docker Compose to build and run the server and the client:

   docker compose up -d --build

   This command builds and starts the containers defined in the Docker Compose configuration file.

Tip

Use docker compose down to remove created containers.

3. Create Tunnel: Use cloudflared to create a tunnel for local development. Run the following command:

   cloudflared tunnel --url http://localhost:8080

   By doing this, Discord will be able to access safly to your local development server on port 8080 (client).

   • Keep Tunnel Running: If you close the terminal or stop cloudflared, the tunnel will be terminated, and you'll need to recreate it when you resume development.

   • Access URL: After successfully creating the tunnel, cloudflared will provide you with a publicly accessible URL (usually in the format https://a-subdomain.trycloudflare.com). Save the access URL for the next step.

4. Update Discord Developer Portal URL Mappings:

   • Update Activity URL Mappings: Change the TARGET URL for the following ROOT MAPPING: / with the URL generated by cloudflared.

5. Login to a Vocal Channel and Start Activity: Now that everything is set up, you're ready to try out your new activity !

Development

Important

For comprehensive development instructions regarding the client, please consult the dedicated client/README.md.

Alternative Setup:

If Docker isn't your preferred choice, you can set up the project manually following these steps.

1. Environment Variables: Create a .env file in the root directory with the following content:

   VITE_DISCORD_CLIENT_ID=00000000000000000000
   DISCORD_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXX-XXXXXXXXXX

   Replace the placeholders with your Discord Application Client ID and Client Secret.

2. Change the Vite server proxy: If you do not use Docker, make sure to change the target in the vite.config.js

   export default defineConfig({
   // ** //
   server: {
       proxy: {
       '/api': {
           target: 'http://localhost:3001', // <-- Change 'server' to 'localhost'
           // ** //
       },
       },
   },
   })

3. Run the Server: Make sure you are inside the ./server directory.

   npm install
   npm run build
   npm run dev

4. Run the Client: Make sure you are inside the ./client directory. Without using Discord SDK

   npm install
   npm run dev

   Additional details can be found in the client/README.md.

5. Create Tunnel: Use cloudflared to create a tunnel for local development. Run the following command:

   cloudflared tunnel --url http://localhost:5173

   By doing this, Discord will be able to access safly to your local development server on port 5173 (client).
   Save the access URL for the next step.

6. Update Discord Developer Portal URL Mappings:

   • Update Activity URL Mappings: Change the TARGET URL for the following ROOT MAPPING: / with the URL generated by cloudflared.

7. Test the app: Now that everything is set up, you're ready to try out your new activity ! Open the client: http://localhost:5173/
   Or
   Connect to a Vocal Channel and Start your Activity