Wonderland Engine - Discord Activity Example

Example of a Discord Activity built with the fastest 3D engine for the web.

Setup

Retrieve a "Discord Client ID" and "Discord Client Secret" via the Discord Developer Portal, by creating a new app.

1. Copy the example.env as .env
2. Replace the DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET in the .env file with your app's.
3. npm i to install package dependencies

Run

1. Run via cd server && npm run dev and cd server && npm run tunnel
2. Update URL mapping of your Discord app to map / to the URL provided by the cloudflare tunnel.
3. Open DiscordActivityExample.wlp in Wonderland Editor.
4. Enable developer mode on your Discord client.

The npm server run via npm run dev will reverse proxy Wonderland Editor's webserver and websockets through the cloudflare tunnel.

Production deployment via WonderlandCloud

1. In src/index.js, replace the DISCORD_CLIENT_ID with your app's ID.
2. Build your project via Wonderland Editor
3. Create a new Docker image of your server via npm run build-server (make sure to replace the image name to yours, example image tag would look like this:alexkiriwle/discord-activity:v1)

   Caution

   You should avoid using the :latest tag when deploying containers in production as it is harder to track which version of the image is running and more difficult to roll back properly.

4. Publish this image via npm run push
5. Create a new Wonderland Apis deployment via npm run create-api replace ApiName and ImageTag with your own values
6. Publish the Wonderland project as a Wonderland Cloud Page via npm run create-activity-page this will publish your Discord activity to the web
7. Now you need to connect the Discord Activity to your API deployment, this can be done by using the npm run create-api-path command just make sure that the values are updated with your actual values for PageName and ApiName

That's it! Now you can use the projectDomain of your deployed Wonderland Cloud Page as a target for your URL mapping