Skip to main content

App Playground

The MachineMetrics CLI provides commands to assist with development and testing.

Playground Command​

mmdev playground

Launches the embedded app playground, which provides a development environment for testing and developing your MachineMetrics applications.

Usage Example​

To start the development playground:

mmdev playground
Playground is running at http://development.machinemetrics.com:4000

This will start the playground tool at http://development.machinemetrics.com:4000 where you can test and develop your application in an isolated environment. If port 4000 is taken, it will use the next available port through port 4010.

App Launcher​

The app launcher provides a quick way to launch your application in the playground environment.

Launching Your App​

  1. With your app running locally, open the app launcher:

    • On Mac: Press CMD+K
    • On Windows: Press CTRL+K
    • Or click the Launch button in the upper right corner

  2. In the launcher field, enter your app's URL:

    • Default URL: http://development.machinemetrics.com:3000
    • For specific widgets or apps, enter the appropriate route

  3. Select whether to launch the app or widget interface

  4. Press ENTER or click the return arrow button to launch

This will load your application in the playground environment, allowing you to test and develop in an isolated setting.

Launcher History​

When testing multiple widgets or apps, the launcher maintains a history of your last 10 entries. This makes it easy to quickly switch between different applications or widgets without having to re-enter the URLs manually.

OAuth Authorization​

When loading a widget for the first time, you must authorize the OAuth client to access MachineMetrics data on your behalf. To complete the authorization flow, simply click the authorization button when prompted. This is a one-time process that allows your widget to securely access the required MachineMetrics data.

This authorization interface will also be presented to end users when they first launch your application. You can customize the name and description shown to users by modifying your mm-app-manifest.json file. This allows you to provide clear, branded messaging about your application's data access requirements.

Widget Preview and Settings​

Once authorized, the widget displays in a preview panel on the right side of the interface. The left side contains configurable settings for your widget. For more information about the types of settings available and how they are defined, see the documentation for useMMAppSetting.

App Display and Routing​

Unlike widgets, apps take up the entire page and do not have settings panels. The URL in the host application will update to reflect the specific route within your application that you are on. This enables rich applications with deep navigation hierarchies where users can confidently bookmark individual pages and have them work as expected. Within the playground, the routes of subpages of your app will be reflected in the mock browser window displayed.