Skip to content

Creating Discord Activities with raylib

Jump to bottom Edit New page
Ray edited this page Mar 19, 2024 · 5 revisions

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

  • 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 and get it's Application ID and Bot token. These will be important later so put them somewhere safe.

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. You can fill these in with your Application ID for CLIENT_ID and your bot token for CLIENT_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.

www.raylib.com   |   itch.io   |   GitHub   |   Discord   |   YouTube

Library Design

Development Platforms

IDE Configurations

Misc Help

Frequently Asked Questions

Wiki History

Clone this wiki locally