Skip to main content

First app in 5 minutes

Build a basic Dynatrace app​

Want to see how easy it is to build your first Dynatrace app? Follow this short tutorial and create your first Dynatrace app in just 5 minutes.

You have two options to get started:

  • Watch and learn with this quickstart video tutorial.
  • Read and code along with this doc.

Before you begin​

You'll need a basic understanding of React and TypeScript, and some tools to build your first app:

  • A code editor such as Visual Code Studio or one of your choosing.

  • The latest Node.js LTS version. You can verify the installed version by running this command in your terminal:

    node --version

1. Create your app​

  1. Run the following command in your code editor terminal. This will download the project file and node dependencies you'll need to continue.

    npx dt-app@latest create

  2. Name your app my-first-app when prompted.

  3. Enter your environment URL in your terminal. This will install all the node dependencies and the project file.

    Tip

    If you're already logged in, the previous create command will include your environment URL.

2. Adapt your app​

  1. Go to your new directory when the toolkit finishes creating the app.

    cd my-first-app

  2. Run the following command in your terminal to run your project.

    npm run start

    Your new app will automatically open in a browser to show what you've created.

    If you have any issues with local app development, check out this troubleshooting information

  3. Open the file src/app/pages/Home.tsx in your code editor.

  4. Locate and change the Heading element to My first app. The highlighted line in the following code snippet shows the relevant change.

import React from "react";
import { Flex, Heading, Paragraph, Strong, useCurrentTheme } from "@dynatrace/strato-components-preview";
import { Card } from "../components/Card";

export const Home = () => {
  const theme = useCurrentTheme();
  return (
    <Flex flexDirection="column" alignItems="center" padding={32}>
      <img src="./assets/Dynatrace_Logo.svg" alt="Dynatrace Logo" width={150} height={150} style={{ paddingBottom: 32 }}></img>
      <Heading>My first app</Heading>
      <Paragraph>
        Edit <Strong>src/app/pages/Home.tsx</Strong> and save to reload the app.
      </Paragraph>
      …
  );
};

After saving your file, the new heading automatically updates in the browser.

3. Keep learning​

Congratulations! You've created your very first Dynatrace app and can expand it depending on your needs:

  • Looking to explore a specific use case or feature in AppEngine or Grail? We suggest you look at our Develop section, where you can easily add code snippets to extend your app.

  • Want to keep learning how to build a Dynatrace app? We recommend you look at our longer get started tutorial.

Still have questions?
Find answers in the Dynatrace Community