---
title: Nerdpack file structure
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/nerdpack-file-structure
---

A New Relic 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

## Generate Nerdpack components [#generate-nerdpack-components]

There are two ways to generate a Nerdpack template:

-   **Generate a Nerdpack**: Use the New Relic CLI command [`nr1 create`](https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/nr1-cli/nr1-common/#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 CLI command [`nr1 create`](https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/nr1-cli/nr1-common/#nr1-create) and choose either `Nerdlet` or `launcher`. This can be useful when adding Nerdlets to an existing Nerdpack.

## Nerdpack file structure [#nerdpack-file-structure]

When you generate a Nerdpack template using the [`nr1 create`](https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/nr1-cli/nr1-common/#nr1-create) command, it has the following file structure:

```txt copyable=false lineNumbers=false
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 [#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`](https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/nr1-cli/nr1-common/#nr1-create) command:

### `index.js` [#index-js]

The JavaScript code of the Nerdlet.

```jsx copy=false lineNumbers=false
import React from 'react';

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

### `nr1.json` [#nr1-json]

The Nerdlet configuration file.

```json copy=false lineNumbers=false
{
  "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](https://docs.newrelic.com/docs/new-relic-solutions/new-relic-one/core-concepts/new-relic-explorer-view-performance-across-apps-services-hosts/). To do this, add two additional fields to the config file of the first-launched Nerdlet: `entities` and `actionCategory`.

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

```json copy=false lineNumbers=false
{
  "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](https://docs.newrelic.com/docs/new-relic-solutions/new-relic-one/core-concepts/new-relic-explorer-view-performance-across-apps-services-hosts/),
select **Browser** applications, and select a monitored application.

### `styles.scss` [#styles-scss]

An empty SCSS file for styling your application.

### `icon.png` [#icon-png]

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

## Launcher file structure [#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](https://docs.newrelic.com/docs/new-relic-solutions/tutorials/attach-nerdlet-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`](https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/nr1-cli/nr1-common/#nr1-create) command, its folder contains two files:

### `nr1.json` [#nr1-json2]

The configuration file.

```json copy=false lineNumbers=false
{
  "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` [#icon-png2]

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