Local development

For quick experimentation, try the online editor. For serious development, run locally:

Prerequisites

Node.js
pnpm (install with npm install -g pnpm)
git

Setup

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

Copy .env.template to .env and set your hub server:

# .env
VITE_GRAPHQL_URL=https://hub1.moneypot.com/graphql

For production builds, also create .env.production.

Note: You can develop a frontend for your own hub server or someone else’s. A hub server connects to a MoneyPot controller—if you run the hub yourself, players deposit into your controller’s wallet to fund gameplay. This demo uses MoneyPot’s production hub (hub1.moneypot.com).

Run locally

pnpm run dev
# http://localhost:5173/

Open in your browser. If it’s not loading, check the developer console for errors.

Playground mode

When iframed on MoneyPot.com, your experience receives a #userToken=... to authenticate users:

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

When running locally (outside the iframe), the SDK automatically creates a “playground” test session:

Browser -> Experience -> Hub server

TODO: Document useAuthenticate options for sticky sessions and auth modes.

Build for production

pnpm run build
# Outputs to ./dist

Next steps

Publish to MoneyPot - Add your experience to MoneyPot.com
Host your experience - Get a public https URL