Metaplay Docs

Appearance

Developing the LiveOps Dashboard

This article will guide you on how to set up a custom LiveOps Dashboard and run an instance of it locally.

Dependencies ​

  • Metaplay SDK core integration - This guide presumes that you already have an instance of the game server set up and running. Please read the Integrate the Metaplay SDK quick guide to learn how to run the game server locally.

Getting Started ​

Development Environment Setup ​

To develop and build the LiveOps Dashboard, you first need to install Node.js and PNPM:

  1. Download and install version 22 of Node.js. Tip: we recommend using the Node Version Manager.
  2. Install PNPM version 10 by running npm install -g pnpm@10 in your terminal of choice.
  3. Optional: Download a web development IDE of your choice. Tip: we prefer Visual Studio Code.

Initial Setup ​

The dashboard code is split into two parts: the core SDK and the game-specific part written by you. To start developing your custom game-specific part, you will need to first initialize a fresh dashboard project in your repo. You can do this with the Metaplay CLI:

bash
YourProjectRoot$ metaplay init dashboard

Your repo layout should now look like this:

text
YourProjectRoot
+--- Backend
|   +--- Dashboard
|   +--- Server
|   +--- ...
+--- MetaplaySDK
|   +--- Server
|   +--- ...
+--- pnpm-workspace.yaml
+--- pnpm-lock.yaml

The metaplay-project.yaml was updated with the fact that you've opted into a customized dashboard.

Add the newly generated files in YourProjectRoot/Backend/Dashboard and your repo root (including pnpm-lock.yaml) to your source control!

Running the LiveOps Dashboard ​

The game server ships with a pre-built copy of the dashboard that it serves on port 5550. However, for development, you'll want to run a standalone version for faster iterations. This standalone version is served on port 5551. These development builds come with Node.js debugging (breakpoints inside your editor!) and file hot loading, to name just a few benefits.

  1. Run the game server so the dashboard has something to connect to: YourProjectRoot$ metaplay dev server.
  2. Run the dashboard: YourProjectRoot$ metaplay dev dashboard.
  3. Open the local dashboard in your browser: http://localhost:5551.
  4. When done, stop the game server with q.

Further Reading ​

Once you have the LiveOps Dashboard set up and running locally, you can start configuring and customizing the LiveOps Dashboard.