Skip to main content

First app in 5 minutes

  • Tutorial
  • 3-min read

Build a basic Dynatrace App in only 5 minutes​

See how easy it is to build your first Dynatrace App. With this short tutorial, you'll create your first app in five minutes.

There are two different ways to do this tutorial:

  • Watch and learn with the video tutorial.
  • Read and code along with this page.

Before you begin​

  • You'll need a code editor such as Visual Studio Code or another code editor of your choice. Verify that NodeJS version 24 is installed by running node --version in the terminal.
Tip

You'll want a basic understanding of React and TypeScript to do this tutorial manually. Alternatively, go to Build apps with AI to vibe code a Dynatrace App.

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 to install all the node dependencies and the project file. You can find your environment URL in the browser's address bar, similar to the following:

    https://{your-environment-ID}.apps.dynatrace.com/
    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.

    npx dt-app dev

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

    Note

    For Chrome 142 or later, you need to give the browser permission to connect to any device on your local network.

    If you encounter issues with local app development, visit Troubleshoot app development for hints.

  3. Open the file ui/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.

ui/app/pages/Home.tsx
import React from "react";
import { Flex, Heading, Paragraph, Strong, useCurrentTheme } from "@dynatrace/strato-components";
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>ui/app/pages/Home.tsx</Strong> and save to reload the app.
      </Paragraph>
      …
  );
};

When you save your file, the new heading will automatically update in the browser.

3. Keep learning​

Congratulations, you created a Dynatrace App! Now you can keep building and extend it.

  • Check out the Develop section for how-to guides, explanations, and references to extend your app.

  • Learn to build a more advanced Dynatrace App with the App building tutorial.

Still have questions?
Find answers in the Dynatrace Community