Discord Activity App

Prerequisites

Before you can test, you need to enable developer settings in your Discord client:

1. Open User Settings (gear icon).
2. Go to Advanced.
3. Enable Developer Mode.
4. Enable Developer Activity Shelf. (This allows you to see your local unverified apps).

Setup

1. Install Dependencies:

   npm install

2. Environment Variables: Ensure you have a .env file with:

   VITE_DISCORD_CLIENT_ID=your_client_id
   DISCORD_CLIENT_SECRET=your_client_secret
   

Development

1. Start the Development Server

This command starts both the Vite frontend and the PartyKit backend (in dev mode).

npm run dev

2. Start the Tunnel

You need to expose your local Vite server (port 5173) to the internet so Discord can access it.

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

• Copy the URL generated (e.g., https://cool-app.trycloudflare.com).

3. Configure Discord Developer Portal

1. Go to Discord Developer Portal.
2. Select your App -> Activities -> URL Mapping.
3. Add a new mapping:
   • Prefix: /
   • Target: Your tunnel URL (e.g., https://cool-app.trycloudflare.com)

4. Update Environment Variables

1. Open .env.
2. Set VITE_PARTYKIT_HOST to your tunnel URL (without https://).
   • Example: VITE_PARTYKIT_HOST=cool-app.trycloudflare.com
   • Note: This tells the app where the "public" entry point is, but internally Vite proxies requests to localhost:1999.

5. Launch in Discord

1. Join a Voice Channel in a server where your app is installed.
2. Click the Rocket Icon.
3. Launch your Activity!

Architecture Note

To avoid CORS issues and Mixed Content warnings, this project uses a Proxy configuration in vite.config.ts.

• Frontend requests to /parties/* are proxied by Vite to localhost:1999.
• WebSocket connections are also proxied.
• This means you only need ONE tunnel (for port 5173).

Debugging

If you see issues:

1. Check the browser console (Ctrl+Shift+I in Discord if enabled, or open the tunnel URL in Chrome).
2. Ensure VITE_DISCORD_CLIENT_ID matches your App ID.
3. Ensure DISCORD_CLIENT_SECRET is correct for Auth.

Important Note on PartyKit Connection

By default, the app connects to localhost:1999. If you are testing with others or if you encounter Mixed Content errors (connecting to insecure WebSocket from secure HTTPS), you may need to tunnel the PartyKit server as well and update VITE_PARTYKIT_HOST.

To tunnel PartyKit:

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

Then update .env:

VITE_PARTYKIT_HOST=your-partykit-tunnel.trycloudflare.com

(Do not include https:// or wss://, just the host).