@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
2. Then, you need to choose a name for extension.
3. 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.
4. 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.
5. 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.
6. 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.

Optionally, to expedite making extensions, you can provide defaults for StudioPro executable and Mendix app .MPR file by providing values for environment variables CREATE_MENDIX_EXTENSION_DEFAULT_STUDIOPRO_PATH and CREATE_MENDIX_EXTENSION_DEFAULT_APP_MPR_PATH.