• Log in

Create a "Hello, World!" application

15 min

Here's how you build a "Hello, world!" application in New Relic.

In this guide, you:

  • Create a local version of New Relic site where you prototype your application
  • Share your application with your teammates by publishing it to Instant Observability

Before you begin

Developing applications requires a New Relic account and the New Relic One CLI (nr1).

If you haven't already:

Now, you have a Nerdpack, called my-awesome-nerdpack. This Nerdpack has a Nerdlet and a launcher that you named (though, this guide uses the default launcher name, "launcher", and Nerdlet name, "home"). You use this Nerdpack throughout this guide.

Finally, make sure your nr1 is up-to-date:

bash
$
nr1 update

For additional details about setting up your environment, see Set up your development environment and Enable advanced configurations for your Nerdpack.

Tip

If you use VSCode, we have an extension and an extension pack you can use to build your app.

Update and serve your application locally

With nr1, you can serve a local build of your Nerdpack to New Relic. This helps you develop your application in a production-like environment before you publish it.

Before you change any code, familiarize yourself with the Nerdpack's directory structure:

my-awesome-nerdpack/
├───README.md
├───launchers/
│ └───launcher/
│ └───nr1.json
├───nerdlets/
│ └───home
│ ├───index.js
│ ├───nr1.json
│ └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json

The launchers and nerdlets directories contain the logic of your application. It's in these directories that you update most of your code. The nr1.json files throughout the Nerdpack hold metadata about your Nerdpack, Nerdlets, and launchers.

Tip

Read our documentation to learn more about the Nerdpack file structure.

Step 1 of 6

In my-awesome-nerdpack/nerdlets/home/index.js, change the default return message to "Hello, world!":

import React from 'react';
// https://docs.newrelic.com/docs/new-relic-programmable-platform-introduction
export default class HomeNerdlet extends React.Component {
render() {
return <h1>Hello, world!</h1>;
}
}
Step 2 of 6

As an optional step, you can add a custom launcher icon using any image named icon.png.

In launchers/launcher, add an image called icon.png:

my-awesome-nerdpack/
├───README.md
├───launchers/
│ └───launcher/
│ ├───icon.png
│ └───nr1.json
├───nerdlets/
│ └───home
│ ├───index.js
│ ├───nr1.json
│ └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json

This creates an icon for your launcher.

In the root directory, add the same image:

my-awesome-nerdpack/
├───README.md
├───icon.png
├───launchers/
│ └───launcher/
│ ├───icon.png
│ └───nr1.json
├───nerdlets/
│ └───home
│ ├───index.js
│ ├───nr1.json
│ └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json

This sets the icon for the app details page.

Step 3 of 6

Next, change the name of the launcher to something more meaningful. In my-awesome-nerdpack/launchers/launcher/nr1.json, change the displayName to "Hello world":

{
"schemaType": "LAUNCHER",
"id": "my-awesome-nerdpack-launcher",
"description": "Describe me",
"displayName": "Hello world",
"rootNerdletId": "my-awesome-nerdpack-nerdlet"
}
Step 4 of 6

To see your new changes locally, start a local Node server from within the Nerdpack:

bash
$
nr1 nerdpack:serve
Found and loaded 2 nr1.json files on MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2) Nerdpack.
Nerdpack:
✔ MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2) nr1.json
Launchers:
✔ launcher launchers/launcher/nr1.json
Nerdlets:
✔ home nerdlets/home/nr1.json
There is no certificate created yet.
New certificate created.
Webpack bundle analyzer is enabled (you need to wait for the first build to finish)
└ You can head to http://127.0.0.1:27888
NOTE: To verify how your assets will look in production, you need to
add "--mode=prod" when starting the development server.
🛠 Built artifact files for:ex.js...
123a4b95-678c-9012-3456-d7e8f90g1hi2--home built
Nerdpack built successfully!
Starting as orchestrator...
Server ready! Test it at: https://one.newrelic.com/?nerdpacks=local
Server will reload automatically if you modify any file!
Additionally, you can test the following artifacts at:
Launchers:
launcher https://onenr.io/0JBQrggmDwZ
You can use "npm start -- --mode=prod" to run the development server in prod mode.
Step 5 of 6

Use the url at the bottom of the output to open your launcher:

bash
Launchers:
launcher https://onenr.io/0JBQrggmDwZ
You can use "npm start -- --mode=prod" to run the development server in prod mode.
Step 6 of 6

Here, you see your Nerdlet with your "Hello, world!" message:

Hello, World in the browser

Publish your application

Because you're serving your Nerdpack locally, your colleagues can't see it. When you're ready, publish it to Instant Observability, our unified catalog of integrations, dashboards, alerts, Nerdpacks, and more. Read our documentation to learn about Nerdpack permissions if you have trouble publishing your Nerdpack.

Step 1 of 3

From its root directory, publish your Nerdpack:

bash
$
nr1 nerdpack:publish
Found and loaded 2 nr1.json files on MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2) Nerdpack.
Nerdpack:
✔ MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2) nr1.json
Launchers:
launcher launchers/launcher/nr1.json
Nerdlets:
home nerdlets/home/nr1.json
🛠 Built artifact files for:
123a4b95-678c-9012-3456-d7e8f90g1hi2--home built
Nerdpack built successfully!
Publishing Nerdpack MyAwesomeNerdpack (123a4b95-678c-9012-3456-d7e8f90g1hi2)
Nerdpack published successfully!
Tagged 123a4b95-678c-9012-3456-d7e8f90g1hi2 version 0.1.0 as STABLE.
Step 2 of 3

In New Relic, click Instant Observability:

Navigate to Instant Observability

Step 3 of 3

Find and click your new Nerdpack:

Find your Nerdpack in Instant Observability

When your new application opens, notice that it doesn't display any descriptive information. The next section shows you how to add descriptive metadata.

An empty application description in Instant Observability

Describe your project with catalog details

Now that your new application is in Instant Observability, you can add information to help users understand what your application does and how to use it.

Step 1 of 4

In your Nerdpack's root directory, execute the following:

bash
$
nr1 create --type catalog
created: launchers/launcher/catalog
created: nerdlets/home/catalog
catalog created successfully!
catalog is available at "./catalog"

This creates three directories:

  • launchers/launcher/catalog: This holds launcher screenshots
  • nerdlets/home/catalog: This holds Nerdlet screenshots
  • catalog: This holds documentation, screenshots, a description, and more information about your Nerdpack

Tip

If you had other launchers, Nerdlets, or custom visualizations, they would also get catalog directories from this command.

Here's how the results look in your project:

my-awesome-nerdpack/
├───README.md
├───icon.png
├───catalog/
│ ├───README.md
│ ├───additionalInfo.md
│ ├───config.json
│ ├───documentation.md
│ └───screenshots/
├───launchers/
│ └───launcher/
│ ├───icon.png
│ ├───catalog/
│ │ └───screenshots/
│ └───nr1.json
├───nerdlets/
│ └───home
│ ├───index.js
│ ├───nr1.json
│ ├───catalog/
│ │ └───screenshots/
│ └───styles.scss
├───node_modules/
├───nr1.json
├───package-lock.json
└───package.json
Step 2 of 4

In the root catalog directory of your project, add screenshots or various types of metadata to describe your project. You can also add screenshots in the catalog directories of your launcher or Nerdlet. For details about what you can add, see Update your Nerdpack's catalog metadata.

Step 3 of 4

After you add the screenshots and descriptions you want, execute the following to save your metadata to the Instant Observability catalog:

bash
$
nr1 catalog:submit
Step 4 of 4

Return to Instant Observability and refresh the page to see your new screenshots and metadata describing your project.

Overview View

And if you added screenshots to your launcher or Nerdlet, you can see them under What's inside:

What's Inside View

Subscribe accounts to your application

You need to subscribe to your application to use it. To learn about what users on your account have the ability to subscribe, read our permissions documentation.

Step 1 of 5

If you're not already there, navigate to your application in Instant Observability:

Find your Nerdpack in Instant Observability

Step 2 of 5

On your application's description page, click Add this app:

Add this app

Step 3 of 5

Select the accounts that you want to subscribe to the application, then update your accounts:

Update your accounts

Step 4 of 5

Go to the Apps page:

Apps page

Here, you find the apps your accounts are susbscribed to.

Step 5 of 5

Click your launcher:

Launcher

Here, you see your application:

Hello, World in the browser

Summary

Now that you've completed the steps in this example, you learned the basic steps to:

  • Create a local application
  • Publish the application to Instant Observability so you can share it with your colleagues
  • Add details to the project in the catalog so users understand how to use it
  • Subscribe accounts to your application so other users can use it
Copyright © 2022 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.