Before getting started, you'll need the following installed on your development machine:
- Node.js and NPM
- Yeoman
- Visual Studio Code, WebStorm, or a JavaScript/TypeScript IDE
- Mendix Studio Pro
Since Mendix Studio Pro can only be run on Windows, it's easiest to install the tools above there as well.
While you can write unit tests for your React components and run via the command line, it's very helpful to test your widget in a real Mendix project as well. Start by creating a blank app, stripping out all of the existing plugins, and create a folder called /CustomWidgets in the /widgets folder of your newly created Mendix project. Note that you can create a Git repository in this nested directory for versioning your widget code independently of your Mendix project.
If you'd like to test with a sample widget first, you can generate the skeleton for using a single command npm install @mendix/generator-widget -g. The Yeoman template walks through numerous options including:
- TypeScript or JavaScript
- Web and hybrid or native phone
- Unit tests, end-to-end tests, or none
Simply run git clone for this repository in /widgets/CustomWidgets.
To build your widget, simply use the command npm run dev or npm run build. Note that you have to sync the local project directory manually in Mendix Studio Pro by pressing F4 as well.
Running the npm run release produces an MPK file in the /dist folder that can be uploaded easily to the App Store.