Merge pull request #11315 from SofiBili/development

Add more info on the template generator files

Author: quinntracy

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/extensibility-api/web/get-started.md

@@ -43,6 +43,10 @@ To accelerate your extension development, Mendix provides an extension generator
 
 To use the generator, navigate to your desired source code directory and run the command `npm create @mendix/extension@latest`. You may be prompted by `npm` to grant permission to install the generator. After installation, you will be guided through a series of questions to help configure your extension.
 
+{{% alert color="info" %}}
+Using `@latest` ensures you get the most recent version of the generator. Each generator release targets a specific Studio Pro version and its available APIs, so always use the latest template to make sure you have access to the full set of APIs for your target version. Some how-to guides in this documentation may not work correctly with older generator versions.
+{{% /alert %}}
+
 The generator asks the following questions:
 
 * Select the programming language (TypeScript is used in the tutorials)
@@ -125,6 +129,34 @@ In the source code, you should see the following:
 
 When you install the extension, you see a new menu item in Studio Pro.
 
+### Understanding Generated Files
+
+The generator creates a project with the following structure. Some files are standardized and can be left untouched, while others must be updated before you build or debug.
+
+#### Configuration Files
+
+* **`package.json`** – Defines project dependencies and scripts. Use `npm run build` to build once, or `npm run build:dev` to build and watch for changes. Edit this file only when you need to add packages.
+* **`tsconfig.json`** – Contains TypeScript compiler settings.
+* **`build.helpers.mjs`** – Provides shared esbuild utilities used by `build-extension.mjs`. You do not need to edit this file.
+
+#### Build and Deployment
+
+* **`build-extension.mjs`** – The build entry point that wires everything together using esbuild. It defines the output directory (`outDir`), the source entry points (`src/main/index.ts` → `main`, `src/ui/index.tsx` → `tab`), and supports a `--watch` flag for live rebuilding. Set `appDir` to the absolute path of your Mendix app folder so the built extension is automatically copied there after each build. You can provide all paths while setting up the template through the terminal prompts. If you update an entry point name or add a new one, update it in this file as well.
+
+{{% alert color="info" %}}
+The `dist/` folder is generated by `npm run build` and does not exist until you build for the first time. Never edit files inside `dist/` directly, as your changes will be overwritten on the next build.
+{{% /alert %}}
+
+#### Source Files
+
+* **`src/manifest.json`** – Tells Studio Pro how to load your extension, including which compiled JS files serve as entry points (`main.js`, `tab.js`) and what permissions the extension requires. Update this file if you rename your entry point files. If you add or rename an entry point here, also update it in `build-extension.mjs`.
+* **`src/main/index.ts`** – Contains the extension's main logic, which runs inside Studio Pro. It retrieves the Studio Pro API via `getStudioProApi`, registers a menu item under **Extensions** in the top menu bar, and opens a tab that renders the UI component when clicked. This is the primary file you will edit. If you rename this file, update the corresponding entry point in `build-extension.mjs`.
+* **`src/ui/index.tsx`** – The React component rendered inside the Studio Pro tab. In the template, it renders a simple heading and paragraph that you should replace with your own UI. If you rename this file, update the entry point in `build-extension.mjs` and the `uiEntrypoint` value passed to `studioPro.ui.tabs.open(...)` in `src/main/index.ts`. You can delete this file entirely if you also remove both of those references.
+
+#### Other Files
+
+* **`.gitignore`** – Excludes `node_modules/` and the compiled `dist/` output from source control. Leave as is, or extend it if you have local configuration files that should not be committed.
+
 ### Building, Installing, and Debugging the Extension
 
 Complete the following steps in Visual Studio Code: