Skip to content

PaulMarisOUMary/Discord-Activity

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

  1. 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.

  2. 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.
  3. 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