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 (See Building the LiveOps Dashboard and using the Prebuilt Dashboard functionality on how to customize this). 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.

⚠️ Heads Up for Linux Users

We use Vite as a build tool for our Dashboard. Vite has a known issue on Linux that can cause it to fail. If you're running on Linux and running the dashboard fails, check out their troubleshooting pages. It's worth noting that we've experienced this as Vite reporting that it failed to run due to an "Internal server error" rather than simply stalling forever as they suggest.

Building the LiveOps Dashboard and Using the Prebuilt Dashboard Functionality ​

You can build the LiveOps Dashboard with the CLI command metaplay build dashboard from inside your project folder. This bundles up the Dashboard into one folder that can be launched in a browser or deployed to the cloud. The server image build operation (CLI: metaplay build image) handles building the Dashboard or using the pre-built dashboard from the PrebuiltDashboard folder when deploying to the cloud. The usual workflow (using metaplay dev dashboard to run the dashboard locally) can rely on the default server image build operation building the dashboard as well.

Server Image Build Operation

The CLI's metaplay build image uses the SDK's server docker file, Dockerfile.server, to build the server docker image, including building the dashboard if necessary. See MetaplaySDK/Dockerfile.server for details.

If you want to include your manually built dashboard into your server image (=into your cloud deployment), you must put it in the Backend/PrebuiltDashboard/ folder. You can achieve this with the CLI by supplying an additional --output-prebuilt flag: metaplay build dashboard --output-prebuilt. This directly builds the dashboard into the PrebuiltDashboard folder, thus skipping dashboard building at server image build time.

Furthermore, the contents of the Backend/PrebuiltDashboard/ folder can be committed to your version control, allowing all members of your team to locally use the customized version of your dashboard without having to build it themselves.

When your game server starts locally it will look for a built LiveOps Dashboard:

  • First - In the Backend/PrebuiltDashboard folder.
  • Second - In the Backend/Dashboard/dist folder.
  • Third - In the SDK folder.

The local server then serves the first dashboard it finds to port 5550, or localhost:5550. You can check which dashboard is being served on that default port in your local server logs.

Further Reading ​

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