A quick guide to building pluggable widgets inWindows 10 with Mendix and Cmder
It can be difficult for new developers to compile and build their pluggable widget in Windows 10. That’s why I’m writing this quick guide on how to overcome this.
Before we start
We will need some tools to manage our node node version, and a good terminal with which to execute our commands.
First of all, you will need a good command line interface. Currently, I use Cmder version 1.3.18. You can able download it here.
It’s a portable one, meaning there is no installation needed. You can just extract the files after download and keep it somewhere on your drive and use the .exe file to run it.
Second is NVM which is a node module management tool. You can download it here on Github. And of course this is a .exe file - just click next to complete the installation.
When you are able to get all these tools, let’s open Cmder and check it out from command line.
To see a list of node LTS versions currently available you can run the command
nvm list available
To check which version is currently in use run the command
nvm list
To install specific version, for example 12.22.3 you can run the command
nvm install 12.22.3
After installing a version it is not automatically selected as active. To select the newly installed version run the command
nvm use 12.22.3
Installing Yeoman
Now for the Mendix part. You will need to install Yeoman before installing the Mendix widget generator. To do this you can run the command
npm install -g yo
Now we can install the Mendix widget generator which will create our widget scaffold. Run the command
npm install -g @mendix/generator-widget
To make sure it is working we can create a test widget, which I will call TestWidget. Navigate to your Mendix app’s project directory in Cmder and create a folder named CustomWidgets with the command
mkdir CustomWidgetsNext navigate into the file you just created by running the command
cd CustomWidgetsWe can now call the Mendix widget generator we installed previously to create a test widget, which I have called TestWidget. Run the command
yo @mendix/widget TestWidgetThen complete all the required inputs for the generator. When you finish, you should see something like this
Testing the build function
To make sure everything is working as expected, we can test the build process by removing the dist folder inside of the TestWidget file which was created by the generator inside the CustomWidgets file we created previously.
Now Run the command
npm run build 
Your new widget will be in the recreated dist file.
Done.
Read More
From the Publisher -
If you enjoyed this article you can find more like it at our Medium page or at our own Community blog site.
For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.
Interested in getting more involved with our community? You can join us in our Slack community channel or for those who want to be more involved, look into joining one of our Meet ups.
