**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.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
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
You next steps are to download the template like so:
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:
```sh
cd client
npm install
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.
In your `raylib-activities/client/index.html` replace with this content:
```html
<!DOCTYPE html>
@ -37,7 +43,7 @@ In your `raylib-activities/client/index.html` replace with this content:
@ -63,9 +69,11 @@ In your `raylib-activities/client/index.html` replace with this content:
```
## 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
.
@ -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/).
## 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`.
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.
@ -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`.
## 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`.
Ray
1 jaar geleden