Skip to main content

Five minutes to your first app

Want to see how easy it is to create your first Dynatrace App?

Follow this quickstart tutorial and have your first app deployed in five minutes!

You have two options:

  • If you prefer to watch and code along, see our quickstart video.
  • If you prefer to read and code along, skip the video and jump to the prerequisites.

Prerequisites​

Install Node.js 16.13.0 or later. Verify the installed version by running the following command in the terminal:

node --version

Create a new app​

Execute the following command in the terminal:

npx dt-app create

After running the previous command, the Dynatrace App Toolkit prompts you to enter an app name. Enter My first app.

tip

Look at the App naming guidelines that can help you choose an appropriate name for your app.

When the toolkit is done creating the app, navigate to the new directory:

cd my-first-app

Adapt the app​

Next, start the development server to see what you've created:

npm run start
tip

Ensure you either select an environment in the top menu bar or provide your environment URL within the app.config.ts file.

This command opens a new browser window with your app running.

info

If you have any issues with local app development, please check out the troubleshooting information.

Open the file src/app/pages/Home.tsx and edit the content of the Heading element to This is 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>This is my first app</Heading>
      <Paragraph>
        Edit <Strong>src/app/pages/Home.tsx</Strong> and save to reload the app.
      </Paragraph>
      …
  );
};

After saving your changed file, the new heading is visible in the app.

Deploy the app​

Execute the following command in the root directory of the project to deploy the app so that others can access it:

npm run deploy
info

If your app has an identical ID to another app that already exists in the environment, the Dynatrace App Toolkit will ask for permission to overwrite it. The toolkit generates the app ID from the app name you provide, and you can configure it in the app property of the app.config.ts file.

Your app is deployed and ready to use. Open it by selecting the link provided by the toolkit, or find it in the launcher of your Dynatrace environment.

Next steps​

Now that you've created your first app, you can expand it depending on your needs.

If you already have a use case in mind or a specific AppEngine or Grail feature you'd like to explore, we suggest you look at our Develop section, where you can simply add the included code snippets into your app to extend it.

If you’d instead continue your learning experience in the same interactive way, we recommend you look at our longer getting started tutorial.

Still have questions?
Find answers in the Dynatrace Community