twix/raylib
1
0
Fork 0
mirror of https://github.com/raysan5/raylib.git synced 2026-02-03 04:39:18 -05:00
Code Issues Packages Projects Releases Wiki Activity

Updated Discord activities with Raylib (markdown)

Ray
2024-03-19 08:52:17 +01:00
parent 20ad81280e
commit b17781f7d2
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
Discord-activities-with-Raylib.md

@ -1,34 +1,40 @@
**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))) **NOTE: This guide assumes you already have setup and built a [raylib WebAssembly project](https://github.com/raysan5/raylib/wiki/Working-for-Web-(HTML5)) and assumes you have these gnerated the followinf files with emscriptem:** (NOTE: [guide here]()
- `game.js` - `game.js`
- `game.wasm` - `game.wasm`
- `index.html`
- `game.data` (Optional)
Official documentation can be found [here](https://discord.com/developers/docs/activities/building-an-activity). Official Discord documentation on the process can be found [here](https://discord.com/developers/docs/activities/building-an-activity).
## Discord setup ## 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.
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 ## Template setup
You next steps are to download the template like so: You next steps are to download the template like so:
```sh ```sh
git clone git@github.com:discord/getting-started-activity.git raylib-activities git clone git@github.com:discord/getting-started-activity.git raylib-activities
cd raylib-activities cd raylib-activities
cp example.env .env 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 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: You can now enter the `client` directory and set it up like so:
```sh ```sh
cd client cd client
npm install npm install
npm run dev npm run dev
``` ```
(Note: replace `npm` here with your preferred tool if you have manually installed an alternative) (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. 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: In your `raylib-activities/client/index.html` replace with this content:
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -37,7 +43,7 @@ In your `raylib-activities/client/index.html` replace with this content:
<meta charset=utf-8> <meta charset=utf-8>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type> <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<title>Raylib activities</title> <title>raylib Discord Activity</title>
<style> <style>
width: 100%; width: 100%;
@ -63,9 +69,11 @@ In your `raylib-activities/client/index.html` replace with this content:
``` ```
## File management ## 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`. 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`: This should be your ideal file structure for `raylib-activities/client`:
``` ```
client git:(main) ✗ tree -I node_modules client git:(main) ✗ tree -I node_modules
. .
@ -82,12 +90,14 @@ client git:(main) ✗ tree -I node_modules
You can now start your dev server with `npm run dev` and check that it is working [in your browser](http://localhost:5173/). You can now start your dev server with `npm run dev` and check that it is working [in your browser](http://localhost:5173/).
## Tunnelling ## Tunnelling
It's time for tunnelling (unless you port forward). We can do this with services such as: It's time for tunnelling (unless you port forward). We can do this with services such as:
- `cloudflared` (recommended by discord) - `cloudflared` (recommended by discord)
- `ngrok` - `ngrok`
- `serveo` (recommended by me) - `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`. 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. So, let's tunnel, you can either use cloudflare with `cloudflared tunnel --url http://localhost:5173` after installing their tool.
@ -96,4 +106,5 @@ 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`. 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 ## 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`.
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`.