Nerdpack file structure

A New Relic One application is represented by a Nerdpack folder, which can include one or more Nerdlet files, and (optionally) one or more launcher files. Here we explain:

  • The file structure for a Nerdpack, a Nerdlet, and a launcher
  • How to link a launcher file to a Nerdlet
  • How to link your application with a monitored entity

For basic component definitions, see our component reference.

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 a Nerdlet or a launcher. This may be useful when adding Nerdlets to an existing Nerdpack.

For documentation on generating and connecting Nerdpack components, see our workshop.

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 New Relic One 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 New Relic Browser-monitored applications and will appear under the Monitor UI category :

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

To see this application in the UI, you would go to the New Relic One 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 one.newrelic.com home page when an application is deployed.

Launcher file structure

When an application with a launcher file has been deployed, its launcher is located on the New Relic One home page (one.newrelic.com ). Note that:

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 launcher icon that appears on the one.newrelic.com home page when an application is deployed.