Skip to content

Commit

Permalink
Merge pull request #259 from newrelic/setup-dev-env
Browse files Browse the repository at this point in the history
Setup dev env
  • Loading branch information
jerelmiller authored Jun 29, 2020
2 parents 6ef2b48 + b1d7817 commit f9ceffd
Show file tree
Hide file tree
Showing 7 changed files with 226 additions and 91 deletions.
12 changes: 12 additions & 0 deletions src/data/sidenav.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@
"displayName": "Build apps",
"url": "/build-apps",
"children": [
{
"displayName": "Set up your development environment",
"url": "/build-apps/set-up-dev-env"
},
{
"displayName": "Create a 'Hello, World!' app",
"url": "/build-apps/build-hello-world-app"
Expand All @@ -74,6 +78,10 @@
{
"displayName": "Add tables to your New Relic One application",
"url": "/build-apps/howto-use-nrone-table-components"
},
{
"displayName": "Add, query, and mutate data using NerdStorage",
"url": "/build-apps/add-query-mutate-data-nerdstorage"
}
]
},
Expand All @@ -85,6 +93,10 @@
"displayName": "New Relic One CLI",
"url": "/reference/nr1-cli"
},
{
"displayName": "New Relic CLI",
"url": "/reference/newrelic-cli"
},
{
"displayName": "Nerdpack file structure",
"url": "/reference/nerdpack-file-structure"
Expand Down
64 changes: 39 additions & 25 deletions src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,19 @@ description: 'NerdStorage is a document database accessible within New Relic One

NerdStorage is a document database accessible within New Relic One. It allows you to modify, save, and retrieve documents from one session to the next.

Using NerdStorage, you can create individual documents of up to 64kb in size, create different collections of documents, and store data by Entity, Account, or User level.
Using NerdStorage, you can create individual documents of up to 64kb in size, create different collections of documents, and store data by entity, account, or user level.

This guide explains how to add data and documents to NerdStorage. For a introduction to what NerdStorage is and how it works, see [Intro to NerdStorage on New Relic One](https://developer.newrelic.com/build-tools/new-relic-one-applications/nerdstorage).
This guide explains how to add data and documents to NerdStorage. For an introduction to what NerdStorage is and how it works, see [Intro to NerdStorage](/reference/nerdstorage).

</Intro>

## Before you begin

This guide requires that you have the following:

* A github account
* New Relic account
* An [API Key](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==) for building applications
* The [New Relic One CLI](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==)
This guide requires that you have an API key and the New Relic One CLI as described in [Set up your development environment](/build-apps/set-up-dev-env).

## Get started

First, you need to get the NerdStorage app running successfully inside New Relic One.
First, get the NerdStorage app running successfully inside New Relic One.

<Steps>

Expand All @@ -39,29 +34,35 @@ Clone the example applications from the [GitHub repo](https://github.com/newreli

<Step>

Next, use the New Relic One CLI to update the application UUID and run the application locally.
Use the New Relic One CLI to update the application UUID and run the application locally.

In the terminal, switch to the `/nr1-howto/use-nerdstorage` directory:
1. In the terminal, switch to the `/nr1-howto/use-nerdstorage` directory:

```
cd /nr1-howto/use-nerdstorage
```
Then update the UUID and serve the application:
2. Update the UUID and serve the application:

```
nr1 nerdpack:uuid -gf
nr1 nerdpack:serve
```

</Step>

</Steps>
<Step>

Once the app is successfully served, your terminal will return the URL to view your running application on New Relic One: [https://one.newrelic.com/?nerdpacks=local](https://one.newrelic.com/?nerdpacks=local).
Once the app is successfully served, your terminal will return the URL to view your running application on [New Relic One](https://one.newrelic.com/?nerdpacks=local).

Load the URL. Under **Your applications** you will see the **Use Nerdstorage** app listed. Click to launch the app.
Load the URL. Under **Your applications** you'll see the **Use Nerdstorage** app listed. Click to launch the app.

![Your applications view updated](../../images/build-an-app/NerdStorage-applications-view.png)

</Step>

</Steps>


## Add data to NerdStorage

Once the app is up and running on New Relic One, you can prepare the app and start adding data.
Expand Down Expand Up @@ -97,13 +98,13 @@ constructor(props) {

<Step>

Import the UserStorageMutation by adding it to your import statement at the top of the index.js file:
Import the `UserStorageMutation` by adding it to your import statement at the top of the `index.js` file:

```
import {UserStorageMutation } from 'nr1';
```

Then update the helper with the code below:
Then update the helper with this code beginning with `_addToNerdStorage`:

```
_addToNerdStorage(){
Expand All @@ -128,9 +129,9 @@ _addToNerdStorage(){

<Step>

Return to your running **How To Use NerdStorage** app screen on New Relic One and reload the page.
1. Return to your running **How To Use NerdStorage** app screen on New Relic One and reload the page.

Add some text in the text entry field and click the check button. This will update NerdStorage and trigger a `Toast` notification inside the app. You should then see the text you typed displayed as a table row below the text entry field.
2. Add some text in the text entry field and click the check button. This will update NerdStorage and trigger a `Toast` notification inside the app. You should then see the text you typed displayed as a table row below the text entry field.

![add data view 2](../../images/build-an-app/add-data-NerdStorage-2.png)

Expand All @@ -141,13 +142,13 @@ Add some text in the text entry field and click the check button. This will upda

## Query data from NerdStorage

Once you get data storage working as described in the section above and you also need to get the app properly reading data from NerdStorage, or the app will reload with an empty state every time you navigate away from the app page and back. To to this, you need to add the `UserStorageQuery` component and update the `1componentDidMount` method.
Once you get data storage working as described in the section above, you also need to get the app properly reading data from NerdStorage, or the app will reload with an empty state every time you navigate away from the app page and back. To do this, add the `UserStorageQuery` component and update the `componentDidMount` method.

<Steps>

<Step>

Import the UserStorageQuery by adding it to the import statement in the applications `./nerdlets/use-nerdstorage-nerdlet/index.js` file.
Import the `UserStorageQuery` by adding it to the import statement in the applications `./nerdlets/use-nerdstorage-nerdlet/index.js` file.

```
import {UserStorageMutation, UserStorageQuery } from 'nr1';
Expand All @@ -156,7 +157,7 @@ import {UserStorageMutation, UserStorageQuery } from 'nr1';

<Step>

Then add the following `componentDidMount` method to your application:
Then, add the following `componentDidMount` method to your application:

```
componentDidMount(){
Expand All @@ -174,15 +175,24 @@ componentDidMount(){
```
</Step>

</Steps>
<Step>

Back inside the NerdStorage app, test your changes by adding a few more rows using the text entry field, then exit and relaunch the application. The application should load and show all the data you entered before you navigated away.
Back inside the NerdStorage app, test your changes by adding a few more rows using the text entry field. Then exit and relaunch the application. The application should load and show all the data you entered before you navigated away.

</Step>

</Steps>


## Mutate data in NerdStorage

Each NerdStorage entry displayed in the table inside the app has a trash button that can be used to update a specific entry. The trash button works by making a call to the `_removeFromNerdStorage` helper method.

To get this process working, you need to update the code in `_removeFromNerdStorage`:
<Steps>

<Step>

To get this process working, update the code in `_removeFromNerdStorage`:

```
_removeFromNerdStorage(index, data){
Expand All @@ -208,6 +218,10 @@ Once this is done, clicking the trash button will remove the item it's associate

![mutate data](../../images/build-an-app/mutate-data-NerdStorage.png)

</Step>

</Steps>

## Delete collection from NerdStorage

While the trash button is a good method for removing specific entries one at a time, you may also want the ability to delete a whole NerdStorage document at once. You can do this by adding the **Delete Document** button to your app.
Expand Down
48 changes: 23 additions & 25 deletions src/markdown-pages/build-apps/publish-deploy.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ redirects:

<Intro>

When you build a New Relic One app, chances are you'll want to share it with others in your company. You might even want to share it through our open source channel. But first, you probably want to try it out locally to make sure it's working properly. The following sections describe how to serve your app locally, add it to New Relic One, and then share it with coworkers.
When you build a New Relic One app, chances are you'll want to share it with others in your organization. You might even want to share it through our open source channel. But first, you probably want to try it out locally to make sure it's working properly. The following sections describe how to serve your app locally, add it to New Relic One, and then share it with coworkers.

- [Serve it locally](#serve-locally). During development, you can locally serve it locally to test it out.
- Serve it locally: During development, you can serve it locally to test it out.

- [Publish it](#publish-app). When your application is ready for the world, you can publish it and [deploy it](#deploy-app), and users can [subscribe](#Subscribe) to it.
- Publish it: When your application is ready for the world, you can publish and deploy it, and subscribe accounts to it.


</Intro>
Expand All @@ -28,6 +28,18 @@ This guide requires the following:

- A New Relic One app or Nerdpack
- New Relic One CLI
- The Nerdpack manager role for publishing, deploying, and subscribing apps.

### About permissions

The Nerdpack manager role is a [New Relic add-on role](https://docs.newrelic.com/docs/accounts/accounts/roles-permissions/add-roles-permissions). When you create a Nerdpack, you have the Nerdpack manager role for handling that Nerdpack. New Relic account administrators or owners have the Nerdpack manager role automatically, and can subscribe their accounts to Nerdpacks available to that acount. You can learn about [permissions related to managing applications](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog#permission_for_managing_applications) in the product documentation.

### About versions

New Relic One requires that only one version (following semantic versioning) of a Nerdpack can be published. Thus, the `nr1 nerdpack:publish` command requires the following:

- The Nerdpack Manager role
- A unique version as specified in the version attribute found in the app's `package.json`.

<br/>

Expand All @@ -40,64 +52,50 @@ This guide requires the following:
While developing your application, you can locally serve the Nerdpack, which will display it in New Relic One.


1. Run the following in the parent root folder of your Nerdpack: `nr1 nerdpack:serve`.
1. In the parent root folder of your Nerdpack, run `nr1 nerdpack:serve`.

2. Go to [one.newrelic.com/?nerdpacks=local](http://one.newrelic.com/?nerdpack=local). The `?nerdpacks=local` URL suffix will load any locally served Nerdpacks that are available.


When you make a change to a locally served Nerdpack, New Relic One will automatically reload it.

For more on this, see [Local development](https://developer.newrelic.com/client-side-sdk/index.html#cli/LocalDevelopment).


</Step>

<Step>

## Publish

The [CLI command](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli#Commands) `nerdpack:publish` places your Nerdpack in New Relic One. To publish and deploy, you must be a Nerdpack manager (a type of [New Relic add-on role](https://docs.newrelic.com/docs/accounts/accounts/roles-permissions/add-roles-permissions)). Your New Relic account administrator can grant this role. For more on permissions, see [Authentication and permissions](https://developer.newrelic.com/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions).
Publishing places your Nerdpack in New Relic One. To publish or deploy, you must be a **Nerdpack manager**.

**Note**: New Relic One requires that only one version (following semantic versioning) of a Nerdpack can be published. Thus, the `nr1 nerdpack:publish` command expects the correct permissions (the aforementioned Nerdpack Manager role and a unique version (as specified in the package.json's version attribute).
- To publish your Nerdpack, run `nr1 nerdpack:publish`.

To publish, run: `nr1 nerdpack:publish`.

To learn how to switch the account a Nerdpack is associated with, see [App access to data](https://developer.newrelic.com/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions#Appaccesstodata).

To learn more about the command's capabilities, run: `nr1 nerdpack:publish --help`

</Step>

<Step>

## Deploy

One of the [CLI commands](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli#Commands) is `nerdpack:deploy`. Deploying a Nerdpack is how you choose which New Relic accounts have access to your application, and how you control which version of the application they’ll see.
Deploying is applying a Nerdpack version to a specific channel (for example, BETA, or STABLE). A channel can only have one Nerdpack version deployed to it at one time. If a channel has an existing Nerdpack associated with it, deploying a new Nerdpack version to that channel will undeploy the previous one. Channels are meant to be an easier way to control application version access than having to be concerned with many specific version numbers.

When you deploy a Nerdpack, you choose its "channel." A channel represents the development status of an application. There are three-channel choices: DEV, BETA, and STABLE. When you deploy your application (or a new version of your application) you assign it to one of these channels. Channels are meant to be an easier way to control application version access than having to be concerned with many specific version numbers.
1. To deploy an application, run `nr1 nerdpack:deploy`.

For more on permissions, see [Authentication and permissions](https://developer.newrelic.com/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions).

</Step>

<Step>

## Subscribe

Once an app is deployed, a user with a Nerdpack Manager role can use the [nr1 nerdpack:subscribe](https://developer.newrelic.com/build-tools/new-relic-one-applications/cli#Commands) command to subscribe the owner account, or any of its subaccounts, to that app. This is what allows the app to be accessible in New Relic One.

For details on subscribe permissions, see [Authentication and permissions](https://developer.newrelic.com/build-tools/new-relic-one-applications/guide-to-authentication--data-access--and-permissions).
You provide access to the Nerdpacks you create (or manage) by subscribing accounts to them. When you publish and deploy your application, it’s available to you in the New Relic One Catalog. Use the Catalog to manage the information that you want to share about your application, as well as how it appears on the New Relic One home page. Subscribe accounts to your applications with the Catalog too. For information about subscribing, see [Discover and manage applications with New Relic One Catalog](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog).

</Step>

</Steps>

### Next steps

Learn more about subscribing users to apps in the [New Relic One Catalog](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog).
</Steps>


### Related info

- [Discover and manage applications with New Relic One](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/build-new-relic-one/discover-manage-applications-new-relic-one-catalog)
- [Build a custom application](/build-apps/build-a-custom-app)
- [Create a "Hello, World!" application](/build-apps/build-hello-world-app)
Loading

0 comments on commit f9ceffd

Please sign in to comment.