Experience quickstart

Templates
How to use the template
Local HTTPS setup

Templates

You can develop your experience frontend in any framework.

However, we have some quickstart templates that set up the basic boilerplate for you.

Framework	URL
React	https://github.com/moneypot/experience-react-template
Solid	https://github.com/moneypot/experience-solid-template

You can clone them to start building your game frontend right away. Or you can use them as a reference and build your own frontend from scratch.

How to use the template

Clone the template and install dependencies

git clone https://github.com/moneypot/experience-react-template.git my-experience
cd my-experience
npm install

Configure `VITE_GRAPHQL_URL` to point at a hub server

You can do this by renaming .env.template to .env.development and changing the VITE_GRAPHQL_URL variable.

# .env.development
VITE_GRAPHQL_URL=https://provably-fair-controller.moneypot.com/graphql

(Also create a .env.production file; npm run build will use it for the production build.)

Here is an interesting part about the MoneyPot architecture:

You can develop a frontend for your own hub server
But you can also develop a frontend for someone else’s hub server.

A hub server is connected to somebody’s MoneyPot controller. If you run the hub server yourself, then MoneyPot players will be depositing into your own controller’s wallet to have funds to spend on your game.

For this demonstration, we will create an experience that uses MoneyPot’s production hub server for the backend.

Run the experience locally

npm run dev
# Local: http://localhost:5173/

Open the experience in your browser

You should see the experience load, but it will complain that it has no userToken in the URL.

This is because experiences only work when they are iframed by MoneyPot.com. Here’s an example: https://moneypot.com/play/dan/coinflip - The game is running inside an iframe.

The MoneyPot website passes #userToken=... to the experience through its URL, and your experience sends it to the hub server listening at VITE_GRAPHQL_URL to authenticate and load the user.

We’re currently doing this:

Browser -> Experience frontend -> Hub server

But we want to do this:

Browser -> MoneyPot.com -> Experience frontend (iframe) -> Hub server

Get an HTTPS URL for your localhost frontend

You can use Cloudflare Tunnel or a self-signed certificate to get an HTTPS URL for your localhost frontend.

See the Local HTTPS setup section for more details.

Create an experience on MoneyPot.com

Go to https://moneypot.com/me/developer and create a new experience.

Name: Whatever you want, like “My Experience” (you can always change it later)
IFrame URL: http://localhost:5173 or wherever your experience is running

Note: Other people cannot access your experience when it is pointed to localhost.
Controller ID: dan/controller1

This is the identifier of the controller that our hub server is connected to.

When players put money into our experience, they actually transfer money to this controller. The hub server is able to credit them with a balance, and your experience will be able to observe the deposit.

Visit your experience play link

Once you’ve created your experience, it should show up in the table.

Click the “play link” to visit the casino’s dedicated page for your experience.

A play link looks like this:

https://moneypot.com/play/{uname}/{id}
https://moneypot.com/play/dan/coinflip

That is the public URL of your experience. It’s the page that loads your frontend in an iframe.

Test that your frontend works

With your experience loaded inside the play link:

You should be able to use the “Put” button to deposit money into it.
The money should soon appear inside your experience frontend.
You should be able to submit a coinflip bet to the hub server.

The bet works because our production hub server is configured to accept coinflip bets.

TODO: Show user how they could set this up on their own server (it’s a few lines of config)

Develop

You can now begin developing your experience frontend on your computer and test them on the play link.

TODO: Explain how the user can develop the frontend without it being nested inside the MoneyPot.com iframe. Development is much nicer when the SPA is running at the top level.

Local HTTPS setup

Since the MoneyPot.com website is served over https, the browser will only let it iframe experiences that are also served over https.

Here are some ways to get around this:

Solution A: Cloudflare Tunnel

This is the easiest and quickest solution.

Install cloudflared
Run cloudflared tunnel --url http://localhost:5173 --http-host-header localhost

(Ensure that’s the correct port your Vite server is running on.)

You should see a message like this:
```
Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):
https://hello-breeze-tiger-forwarding.trycloudflare.com
```
Yours will be different.
Visit the Cloudflare URL with your browser to confirm it works.
Go to MoneyPot.com and update your experience’s IFrame URL to the URL that cloudflared gave you.

Your localhost experience should now load on the MoneyPot.com play link.

Solution B: `ngrok`

Like cloudflared, ngrok is another tool that creates a public URL for your localhost frontend.

Install ngrok
Run ngrok http http://localhost:5173 --url https://<some-random-string>.ngrok-free.app
Update your experience’s IFrame URL to https://<some-random-string>.ngrok-free.app

TODO: I haven’t used ngrok in years, but if you need to log in to use it:

Register at https://dashboard.ngrok.com/
Run ngrok config add-authtoken <TOKEN>
Continue the prev steps

Solution C: Self-signed certificate

Install mkcert
Run mkcert -install to install the CA certificate.
Run mkcert localhost to create a self-signed certificate for localhost.

It created two files: localhost+2.pem and localhost+2-key.pem.

Now, you can tell vite.config.ts to use the self-signed certificate:

import { defineConfig } from "vite";
import fs from "fs";

export default defineConfig({
  server: {
    host: true,
    https: {
      key: fs.readFileSync("./localhost+2-key.pem"),
      cert: fs.readFileSync("./localhost+2.pem"),
    },
  },
  // ... rest of config ...
});

When you run npm run dev, you should see that it’s serving your frontend over https: https://localhost:5173.

Ensure that https://localhost:5173 loads in your browser without the warning page. If it does, then MoneyPot.com still won’t be able to load it.

You need go back to MoneyPot.com and update your experience’s IFrame URL to https://localhost:5173.