Added documentation for this https://discord.com/build/embedded-app-sdk but specific to Raylib.

1 年之前 · 20ad81280e
--- a/Discord-activities-with-Raylib.md
+++ b/Discord-activities-with-Raylib.md
@ -0,0 +1,99 @@
 **NOTE: this guide assumes you already have setup and built a Raylib project and assumes you have these files from emscriptem (possibly different file stems):** (NOTE: [guide here](https://github.com/raysan5/raylib/wiki/Working-for-Web-(HTML5)))
 - `game.js`
 - `game.wasm`

 Official documentation can be found [here](https://discord.com/developers/docs/activities/building-an-activity).

 ## Discord setup
 First create a discord application on [Discord](https://discord.com/developers/applications) 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:
 ```sh
 git clone git@github.com: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:
 ```sh
 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](http://localhost:5173) in your browser. Now stop your dev command.

 In your `raylib-activities/client/index.html` replace with this content:
 ```html
 <!DOCTYPE html>

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

 		<title>Raylib activities</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](http://localhost:5173/).

 ## 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`.