Local development

You can run and edit the React template in an online editor: http://localhost:4000/docs/experience-dev/quickstart/

But for serious development, you’ll want to run the template locally on your machine.

Here’s how to do that.

Prerequisites

  • Node.js - Installs deps and runs the dev server
  • git - Clones the template from GitHub

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://hub1.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 (https://hub1.moneypot.com/graphql) for the backend.

Run the experience locally 

npm run dev
# Running at http://localhost:5173/

Open the experience in your browser

You should see the experience load, and you should be able to make bets and use the chat.

If it’s not loading, open the browser’s developer console to check for errors.

You can also open the browser’s network tab to see if the requests to the hub server are failing.

Playground mode

When an experience is iframed by MoneyPot.com, the MoneyPot website passes #userToken=... to the iframed experience through its URL, and your experience sends it to the hub server listening at VITE_GRAPHQL_URL to authenticate and load the user.

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

If our experience is not running inside a MoneyPot iframe, how are we authenticated as a user and able to make HOUSE currency bets against hub1.moneypot.com?

Browser -> Experience frontend -> Hub server

The answer is that when the experience detects that it’s not inside a MoneyPot iframe, it creates a “playground” session (a test user) on the hub server.

TODO: Explain how useAuthenticate options can be used to set sticky experience / sticker user / auth mode.

Bundling for production

When it comes time to publish your experience, you’ll want to compile your frontend source code into production-ready static files like index.html, app.js, style.css, that can be served by any web server.

npm run build

This compiles your TypeScript source code into HTML/JS/CSS files in the ./dist directory.

Next steps

Now you can begin developing your experience locally.

  1. Publish to MoneyPot - Add your experience to MoneyPot.com so others can play it
  2. Host your experience - Get a public https url for your experience