Creating Discord Activities with raylib - raysan5/raylib GitHub Wiki

NOTE: This guide assumes you already have setup and built a raylib WebAssembly project and you have generated the following files with emscripten:

game.js
game.wasm
index.html
game.data (Optional)

Official Discord documentation on the process can be found here.

Discord setup

First create a discord application on Discord.

Template setup

You next steps are to download the template like so:

git clone [email protected]:discord/getting-started-activity.git raylib-activities
cd raylib-activities
cp example.env .env

You will notice some fields in your .env file that has been newly created. We will now fill these out.

To get VITE_DISCORD_CLIENT_ID from OAuth2 > CLIENT ID > Copy To get DISCORD_CLIENT_SECRET from OAuth2 > CLIENT SECRET > Reset Secret

You can now enter the client directory and set it up like so:

cd client
npm install
npm run dev

(NOTE: Replace npm here with your preferred tool if you have manually installed an alternative)

You should now see a basic "Hello, World!" app when you go to the server in your browser. Now stop your dev command.

In your raylib-activities/client/index.html replace with this content:

<!DOCTYPE html>

<html lang=en-us>
    <head>
        <meta charset=utf-8>
        <meta content="text/html; charset=utf-8" http-equiv=Content-Type>

        <title>raylib Discord Activity</title>

        <style>
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: block;
            border: none;
            background-color: black;
        </style>
    </head>

    <body>
        <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
        <script>
            var Module = {
                canvas: document.getElementById("canvas"),
            };
        </script>
        <script async type="text/javascript" src="game.js"></script>
    </body>
</html>

File management

You will need to copy game.js and game.wasm to the raylib-activites/client directory. You can also remove files such as rocket.png, main.js and style.css.

This should be your ideal file structure for raylib-activities/client:

client git:(main) ✗ tree -I node_modules 
.
├── game.js
├── game.wasm
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js

1 directory, 6 files

You can now start your dev server with npm run dev and check that it is working in your browser.

Tunnelling

It's time for tunnelling (unless you port forward). We can do this with services such as:

cloudflared (recommended by discord)
ngrok
serveo (recommended by me)

The reason I recommend Serveo for such a temporary purpose is because you don't have to install anything to use it as it uses ssh.

So, let's tunnel, you can either use cloudflare with cloudflared tunnel --url http://localhost:5173 after installing their tool.

Or with serveo (my recommendation) ssh -R 80:localhost:5173 serveo.net.

Either way, these tunnels should give you some form of URL that you can use, e.g. https://1588ccfc75808e5dba340d02f1624031.serveo.net or https://funky-jogging-bunny.trycloudflare.com.

Setting URL mappings

Now, go back to Discord applications and go to ACTIVITES > Getting started and press Get started. Then go to ACTIVITIES > URL Mappings and copy paste that URL you got from the tunnel (or your alternative solution, e.g. port forwarding) and put it in TARGET.