diff --git a/Discord-activities-with-Raylib.md b/Discord-activities-with-Raylib.md new file mode 100644 index 0000000..45f1aac --- /dev/null +++ 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 + + + + + + + + Raylib activities + + + + + + + + + + +``` + +## 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`. \ No newline at end of file