Create a new project

To create a new Dynatrace App we've made it simple, all you need to do is use the create command of the Dynatrace App Toolkit. The Dynatrace App Toolkit will create your new project and all the needed dependencies.

Open your terminal and execute the respective command for the operating system.

1. Execute Dynatrace App Toolkit command

npx dt-app@latest create --template empty

The Dynatrace App Toolkit will ask you to name your app. For this guide, we use Booking Analytics.

note

As the next step, you need to enter the URL to your Dynatrace environment, for example, https://abc12345.apps.dynatrace.com.

After the Dynatrace App Toolkit created a new app project in your current directory. Open your project directory in the IDE of your choice.

2. Get familiar with the project structure

After you have opened your project within an IDE, you'll find many files and directories. This section explains the most important ones:

src directory

In the src directory, you will find all the source code files needed to run the React frontend of your app.

This directory will consist of all your React components, your assets, and all additional TypeScript files you would need to build your app.

api directory

If you use app functions within your Dynatrace App, you will find all the corresponding files in this directory.

For more information on App functions click here.

App configuration file

Within your app configuration file (app.config.ts or app.config.json), you can configure options like the used Dynatrace environment, metadata of your app, and other development or build-related configurations.

You can find all the possible options in the reference.

3. Start the local development server

The Dynatrace App Toolkit ships with a local development server. Go to the app directory created in step 1 by running:

cd booking-analytics

Next, start the development server by running this command:

npm run start

After executing this command, a new browser window with your running app is automatically opened.

note

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