Create a Nerdpack

A Nerdpack is a package that contains all the files that make up a New Relic application or visualization. Nerdpacks include files for metadata, Nerdlets, assets, and more. To create a Nerdpack, use the New Relic CLI:

$
nr1 create --type nerdpack

When nr1 prompts for a component name, use "ab-test" and watch the tool create the foundations of your Nerdpack. Once it's finished, explore the files it created for you.

Root directory

At the root level, you have a directory called ab-test. Everything inside this directory is part of the Nerdpack:

$
ls ab-test
README.md         nerdlets          nr1.json          package.json
launchers         node_modules      package-lock.json

Readme.md provides instructions for creating Nerdpack elements and serving your application locally. This and nr1 --help are useful if you forget how to interact with your Nerdpack using the command line tool.

Javascript files

package.json, package-lock.json, and node_modules are important for running your JavaScript application, but aren't unique to Nerdpacks. You can learn about these modules from JavaScript courses should you need to tweak them. For now, take a look at nr1.json, one of the most relevant files in this directory.

Metadata file

nr1.json is the Nerdpack's metadata file, containing a schema type, unique identifier, a display name, and a description. Since you're building a New Relic application for running and analyzing A/B tests, update the package's displayName to "A/B Test" and set the description to "A/B test your application using New Relic":

fileName=nr1.json
{
    "schemaType": "NERDPACK",
    "id": "311bcd0c-f7eb-4285-afed-4219179bf91d",
    "displayName": "A/B Test",
    "description": "A/B test your application using New Relic."
}

It's good to describe your application's purpose, especially if you're going to publish your application for others to use.

Next, look at the launchers and nerdlets subdirectories.

Launchers

launchers is a directory because you can create multiple launchers for your New Relic application. nr1 create only created one launcher for your Nerdpack and called it "ab-test-launcher". Inside its directory, there are two files:

• icon.png is an image that represents the application
• nr1.json is the launcher's metadata file

Use "A/B Test Launcher" for the launcher's displayName and "Open the A/B test Nerdlet" for the description in nr1.json:

fileName=launchers/ab-test-launcher/nr1.json
{
    "schemaType": "LAUNCHER",
    "id": "ab-test-launcher",
    "displayName": "A/B Test Launcher",
    "description": "Open the A/B test Nerdlet",
    "rootNerdletId": "ab-test-nerdlet"
}

Notice that the launcher has a rootNerdletId. This identifies the Nerdlet that the launcher opens when it's selected. This Nerdpack has only one Nerdlet, called ab-test-nerdlet, but some Nerdpacks may have multiple. Make sure that you set the rootNerdletId to the Nerdlet you want the launcher to open.

Nerdlets

The nerdlets directory contains all the Nerdlets that make up your New Relic application. Since ab-test-nerdlet is the only Nerdlet in this Nerdpack, there is only one subdirectory. In nerdlets/ab-test-nerdlet, there are three files:

• index.js is the JavaScript file that contains your Nerdlet component
• styles.scss holds the Sass stylesheet for your Nerdlet
• nr1.json contains the Nerdlet's metadata

Update your Nerdlet's displayName to "A/B Test" and description to "Control and view results of your A/B test":

{
  "schemaType": "NERDLET",
  "id": "ab-test-nerdlet",
  "displayName": "A/B Test",
  "description": "Control and view results of your A/B test"
}

Now, you've customized your Nerdpack, Nerdlet, and launcher with informative display names and descriptions, but what does your application actually do? Check out index.js to see what your default Nerdlet looks like:

import React from 'react';

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <h1>Hello, ab-test-nerdlet Nerdlet!</h1>;
    }
}

Here, you have AbTestNerdletNerdlet, which nr1 created for you. It's a React component that renders a first-level welcome heading. Because this is the root Nerdlet, as specified in your launcher's nr1.json file, when you click on your launcher in the New Relic platform, the launcher will open a view that displays this heading.

$
nr1 create --type nerdlet
$
nr1 create --type launcher

$
nr1 create
? What kind of component do you want to create? › - Use arrow-keys. Return to submit.
    nerdpack
❯   nerdlet - create a/an Nerdlet Nerdpack item inside your Nerdpack.
    launcher
    catalog
    visualization

In the next lesson, you'll learn how to serve your Nerdpack locally and see your app in action!