@mendix/create-extension

This repository contains generator for creating Mendix Studio Pro extensions.

Prerequisites

This template assumes that you have the following software installed:

- Node.js (LTS version recommended)
- npm (usually comes with Node.js)
- Mendix Studio Pro (supports version 10.24.0 or later and version 11.0.0 or later)
- git

Mendix recommends that you use Visual Studio Code for developing the extension as Studio Pro extensions
can easily be debugged directly from Visual Studio Code.

Usage

To use the generator run npm create @mendix/extension. It will ask you questions in the following order:

1. First, you need to make a choice between using TypeScript or JavaScript for developing the extension
1. Then, you need to choose a name for extension.
1. Then, you need to choose if you will be using React for developing UI of the extension. If you do not choose
React, no other framework will be used, and you will have to set it up yourself.
1. Under Windows, you will be asked to provide path to Studio Pro binary. Path to Studio Pro is necessary to
enable debugging the extension directly from Visual Studio Code. If you do not provide the path, you can update
it later by changing property runtimeExecutable in file .vscode/launch.json. Running the generator under
macOS will skip this question since debugging extensions from Visual Studio Code is not available on macOS.
1. The next question assumes that you already have a Mendix application to which you want to deploy the
extension. If you provide path to this application's MPR file, after building the extension, it will automatically
be copied to the right subdirectory in the Mendix application.
1. The last question lets you choose between major Mendix versions and corresponding NPM packages for extensions API
for each of these versions.

Extension development, debugging and deployment

After the extension was initialized, you need to open terminal in the directory with the name of the extenstion that generator created and run npm install followed by npm run build to build it.
If you provided path to Mendix application in step 4 of the generator, the extension will be copied
to the application directory.

To debug the extension from Visual Studio Code (available only on Windows),
ensure that you have specified the path to Studio Pro executable and set up break points.
Then, click on the 'Run and Debug' button in Visual Studio Code Activity Bar (left-hand side menu)
and then click on the play button (or press F5). This will launch Studio Pro and open the application that you have setup in the last step.

After the application is loaded in Studio Pro, the breakpoints that you have set up will be hit.
You can also inspect the DOM that your extension shows by clicking on Open Browser DevTools button in
the Visual Studio Code debug floating menu (the rightmost button).

It is also possible to run the extension in watch mode which will recompile and copy the extension
to the application directory every time the source code of extension changes. To enable watch mode run
npm run build:dev which will notify you every time the code is recompiled. To reload recompiled code in Studio
Pro, you have to choose menu item 'App > Synchronize App Directory' or press F4 with Studio Pro window in focus.