Nerdpack file structure

Generate Nerdpack components

There are two ways to generate a Nerdpack template:

• Generate a Nerdpack: Use the New Relic One CLI command nr1 create and select Nerdpack to create a Nerdpack template that includes a Nerdlet and a launcher.
• Generate Nerdlet or launcher individually: Use the New Relic One CLI command nr1 create and choose either Nerdlet or launcher. This can be useful when adding Nerdlets to an existing Nerdpack.

For documentation on generating and connecting Nerdpack components, see our app building guides and the New Relic One CLI command reference.

Nerdpack file structure

When you generate a Nerdpack template using the nr1 create command, it has the following file structure:

my-nerdlet
├── README.md
├── launchers
│   └── my-nerdlet-launcher
│       ├── icon.png
│       └── nr1.json
├── nerdlets
│   └── my-nerdlet-nerdlet
│       ├── index.js
│       ├── nr1.json
│       └── styles.scss
├── node_modules
│   ├── js-tokens
│   ├── loose-envify
│   ├── object-assign
│   ├── prop-types
│   ├── react
│   ├── react-dom
│   ├── react-is
│   └── scheduler
├── nr1.json
├── package-lock.json
└── package.json

Nerdlet file structure

A Nerdpack can contain one or more Nerdlets. A Nerdlet folder starts out with three default files, index.js, nr1.json, and styles.scss. Here is what the default files look like after being generated using the nr1 create command:

index.js

The JavaScript code of the Nerdlet.

import React from 'react';

export default class MyAwesomeNerdpack extends React.Component {
  render() {
    return <h1>Hello, my-awesome-nerdpack Nerdlet!</h1>;
  }
}

nr1.json

The Nerdlet configuration file.

{
  "schemaType": "NERDLET",
  "id": "my-awesome-nerdpack-nerdlet",
  "description": "Describe me",
  "displayName": "MyAwesomeNerdpack"
}

Besides using the launcher as the access point for your application, you can also associate the application with a monitored entity to get it to appear in the entity explorer. To do this, add two additional fields to the config file of the first-launched Nerdlet: entities and actionCategory.

In the following example, the Nerdlet has been associated with all Browser-monitored applications and will appear under the Monitor UI category :

{
  "schemaType": "NERDLET",
  "id": "my-nerdlet",
  "description": "Describe me",
  "displayName": "Custom Data",
  "context": {
    "entities": [{ "domain": "BROWSER", "type": "APPLICATION" }]
  },
  "actionCategory": "monitor"
}

To see this application in the UI, you would go to the entity explorer, select Browser applications, and select a monitored application.

styles.scss

An empty SCSS file for styling your application.

icon.png

The launcher icon that appears on the Apps page in New Relic when an application is deployed.

Launcher file structure

Launchers have their own file structure. Note that:

• A launcher is not required; as an alternative to using a launcher, you can associate your application with a monitored entity.
• An application can have more than one launcher, which might be desired for an application with multiple Nerdlets.

After generating a launcher using the nr1 create command, its folder contains two files:

nr1.json

The configuration file.

{
  "schemaType": "LAUNCHER",
  "id": "my-awesome-nerdpack-launcher",
  "description": "Describe me",
  "displayName": "MyAwesomeNerdpack",
  "rootNerdletId": "my-awesome-nerdpack-nerdlet"
}

To connect a launcher to a Nerdlet, the rootNerdletId must match the id in the launched Nerdlet's nr1.json config file. For Nerdpacks with multiple Nerdlets, this needs to be done only for the first-launched Nerdlet.

icon.png

The icon displayed on the launcher for the app on the Apps page.