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 setup and running. Please read the Adding the SDK to a Unity Project 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 20 of Node.js. Tip: we recommend using the Node Version Manager
  2. Install PNPM version 9 by running npm install -g pnpm@9 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. The easiest way to accomplish this is to use the "project installer" tool in Unity Editor:

  1. Run dashboard project setup by clicking on Metaplay → Setup Custom Dashboard Project in the Unity menu.
  2. Navigate to YourProjectRoot in a terminal and type pnpm install to install all required dependencies.

Your repo layout should now look like this:

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

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.
  2. Run pnpm dev in the dashboard project folder (ie: YourProjectRoot/Backend/Dashboard/)
  3. Open the resulting URL in your browser.
  4. When done, stop the 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.