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
.
As the next step, you must enter the URL to your Dynatrace environment, for example, https://abc12345.apps.dynatrace.com
.
After the Dynatrace App Toolkit creates a new app project in your current directory, you can 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'll find all the source code files needed to run the React frontend of your app.
This directory will contain all your React components, assets, and all additional TypeScript files needed to build your app.
api directory
If you use app functions within your Dynatrace App, you'll find all the corresponding files in this directory.
You can visit App functions to learn more.
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 will automatically open with your running app.
If you have any issues with local app development, visit the troubleshooting information.