{"id":29170310,"url":"https://github.com/mendixlabs/generator-mendix","last_synced_at":"2025-07-01T12:39:50.798Z","repository":{"id":41787297,"uuid":"44983963","full_name":"mendixlabs/generator-mendix","owner":"mendixlabs","description":"Yeoman generator for Mendix widgets","archived":false,"fork":false,"pushed_at":"2022-12-04T10:00:56.000Z","size":524,"stargazers_count":17,"open_issues_count":21,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-13T17:55:35.006Z","etag":null,"topics":["generator","mendix-widget"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mendixlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-26T17:02:01.000Z","updated_at":"2023-12-20T12:57:04.000Z","dependencies_parsed_at":"2023-01-22T23:15:42.674Z","dependency_job_id":null,"html_url":"https://github.com/mendixlabs/generator-mendix","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/mendixlabs/generator-mendix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fgenerator-mendix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fgenerator-mendix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fgenerator-mendix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fgenerator-mendix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mendixlabs","download_url":"https://codeload.github.com/mendixlabs/generator-mendix/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mendixlabs%2Fgenerator-mendix/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262964072,"owners_count":23391949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["generator","mendix-widget"],"created_at":"2025-07-01T12:39:41.765Z","updated_at":"2025-07-01T12:39:50.701Z","avatar_url":"https://github.com/mendixlabs.png","language":"JavaScript","readme":"# generator-mendix [![Build Status](https://secure.travis-ci.org/mendix/generator-mendix.png?branch=master)](https://travis-ci.org/mendix/generator-mendix) [![npm version](https://badge.fury.io/js/generator-mendix.svg)](http://badge.fury.io/js/generator-mendix) [![DAVID](https://david-dm.org/mendix/generator-mendix.svg)](https://david-dm.org/mendix/generator-mendix) [![Development Dependency Status](https://david-dm.org/mendix/generator-mendix/dev-status.svg?theme=shields.io)](https://david-dm.org/mendix/generator-mendix#info=devDependencies)\n\n[![NPM](https://nodei.co/npm/generator-mendix.svg?downloads=true\u0026stars=true)](https://nodei.co/npm/generator-mendix/)\n\n\u003e [Yeoman](http://yeoman.io) generator for Mendix widgets.\n\n## About\n\nThis generator uses the Yeoman scaffolding tool to let you quickly create a [Mendix widget](https://world.mendix.com/display/public/howto50/Custom+Widget+Development) based on the latest [AppStoreWidgetBoilerPlate](https://github.com/mendix/AppStoreWidgetBoilerplate). You can either use the full boilerplate with example code, or choose to use an empty widget.\n\nIf you want to see a short demo (this uses the older 1.x widget generator and only Grunt), please look at our [webinar](http://ww2.mendix.com/expert-webinar-developing-widgets.html)\n\n---\n\n## Prerequisites _(you only have to do this once)_\n\nFirst, you need to have [Node.js](https://nodejs.org/en/) installed. (We recommend a 6.x LTS version, the generator is tested against 6). After that, you need to install Yeoman and the Mendix Widget generator:\n\nOpen a command-line window (Press Win+R and type ``cmd`` or use Powershell)\n\n```bash\n  npm install -g yo generator-mendix\n```\n\nMake sure you have the latest version of ``yo``. The version we work with currently is 1.8.5 (which you can check by running ``yo --version``)\n\nNext, based on your preference, you need to install either Gulp (**recommended**) or Grunt. Install this by typing:\n\n```bash\n  # If you want to use Gulp, run:\n\n  npm install -g gulp-cli\n\n  # If you want to use Grunt, run:\n\n  npm install -g grunt-cli\n\n```\n\n---\n\n## Scaffold a widget\n\n### 1. Start the generator in the folder you want to create a widget\n\n```bash\nyo mendix\n```\n\n### 2. Provide the following information about your widget:\n\nThe following information needs to be provided about your widget:\n\n* name\n* description\n* copyright\n* license\n* version\n* author\n* Github username (optional)\n\nYou can press \\\u003cEnter\\\u003e if you want to use the default values.\n\n### 3.1. Which task runner do you want to use?\n\n#### Gulp\n\nThe widget generator will include a **Gulpfile.js** and the necessary package.json for running Gulp tasks. We recommend using Gulp because of the speed.\n\n#### Grunt\n\nEarlier versions of the widget generator added Grunt as the default taskrunner. We included this option as well if you want to use this.\n\n### 3.2. Which template do you want to use?\n\n#### AppStoreWidgetBoilerplate\n\nThis uses the standard boilerplate which is on Github. This is recommended if you are a beginner. It includes example code with jQuery* and templates.\n\n#### Empty widget\n\nThe empty widget will use a slim version of the AppStoreWidgetBoilerplate. It only provides the essential methods and setup. Furthermore, it will ask you if you want to use templates and jQuery*.\n\n\\* **We do not recommend using jQuery in your widgets, please [read this issue](https://github.com/mendix/AppStoreWidgetBoilerplate/issues/38). For simple DOM-manipulation you can use Dojo, which is provided by Mendix. Only use jQuery when you need it for certain external libraries that depend on it.**\n\n---\n\n## Use a taskrunner for development\n\nThe widget generator will scaffold a widget for you. It provides a convenient setup to develop you widget and publish it on Github. To make it even more easy, we add files for taskrunners.\n\n\n### Gulp\n\nThe following tasks are provided in the **Gulpfile.js** and can be started by running ``gulp \u003cTASKNAME\u003e`` or ``npm run \u003cTASKNAME\u003e``:\n\n* ``default``\n\nYou can omit this taskname and just run ``gulp``. This will watch for any changes in your ``src`` directory. If a change occurs, it will automatically create a new **MPK** and copy this to your ``widgets`` directory.\n\nIt will also copy any changed Javascript files to your deployment folder. This means you do not have to redeploy locally, you can just refresh your browser. For changes in ``XML`` or ``CSS`` you will still need to synchronize your project directory (press F4 in the modeler) and redeploy.\n\n* ``modeler``\n\nThis will try to start the test-project that is included in the ``test`` folder. It automatically opens the Modeler with this project. If you have your test-project in a different location, you can change the following options in ``package.json``:\n\n```json\n  \"paths\": {\n    \"testProjectFolder\": \"./test/\",\n    \"testProjectFileName\": \"Test.mpr\"\n  },\n```\n\nNote: If you provide a different path to the test-project in Windows, make sure you escape backslashes. So for example: ```C:\\Projects\\TestFolder``` needs to be properly written in the JSON as:\n\n```json\n    \"testProjectFileName\": \"C:\\\\Projects\\\\TestFolder\"\n```\n\n* ``version``\n\nThis task will show you the version number of the widget by reading the ``packages.xml`` file. You can set the version number with this task by typing:\n\n``gulp version -n=X.X.X`` or ``npm run version -- -n=X.X.X``\n\n* ``folders``\n\nThis will tell you which folders Gulp is using. You can change the folder of the test-project folder (See ``modeler`` task)\n\n* ``build``\n\nThis will build the widget for you. It will output a new **MPK** file to both your ``dist`` folder, as well as the ``widgets`` folder in your test-project directory.\n\n* ``icon``\n\nThis task will read the ``icon.png`` file (or any other image file if you provide the task a filename using ``gulp icon --file=\u003cfilename\u003e``) and outputs a base64 string that you can use in your widget.xml.\n\n\n### Grunt\n\nThe tasks that are provided by Gulp are also provided in the **Gruntfile.js**. The following tasks are configured:\n\n* ``start-modeler`` : same as ``gulp modeler``\n* ``build``\n* ``version`` and ``version:X.X.X``\n* ``folders``\n* ``icon``*\n* ``watch`` : is the same as ``gulp default``\n\n\\*This task can only read ``icon.png``, but it will automatically set the base64 string in your widget.xml for you.\n\n---\n\n## Use a taskrunner in an existing widget\n\n* _My widget repository does not have a ``Gruntfile.js`` or ``Gulpfile.js``._\n\nWe thought about that. Make sure you open a command-line terminal in your widget repository. It needs at least the widget files in the ``src`` folder. By simply running the generator there, it will ask you if you want to install a taskrunner. It also needs two parameters (widget name and version number) that it tries to read from the package.xml and widget.xml\n\n* _My widget repository contains a package.json and ``Gruntfile.js`` or ``Gulpfile.js``_\n\nGreat! If you have made sure you have Grunt/Gulp installed (See above, prerequisites), you can start using it. The only thing you need to do is install the dependencies for the different tasks. Run the same folder:\n\n```bash\n  npm install\n```\n\nNow you can use the Grunt/Gulp tasks as described.\n\n---\n\n## Troubleshooting\n\n* _I get an error that it cannot find a dependency or local Grunt/Gulp._\n\nDid you make sure you have the dependencies installed? Run ``npm install`` in your widget folder (it needs to have a package.json and **Gulpfile.js**/**Gruntfile.js**)\n\n* _Some of the tasks cannot be found_\n\nCheck the version of your **Gruntfile.js**/**Gulpfile.js** (stated in the top of the file). The tasks described here are written for the 2.0 version of the widget generator. Any previous versions are outdated. If you run the widget generator in your widget folder again, it will update the file and dependencies for you.\n\n* _I am getting weird errors_\n\nPlease report your issues [here](https://github.com/mendix/generator-mendix/issues). and we'll troubleshoot together with you.\n\n---\n\n## TODO:\n\n* Add LICENSE files [request](https://github.com/mendix/generator-mendix/issues/19)\n* Add JSHint (Grunt/Gulp)\n* Add SASS support (add ``_sass`` folder that will output CSS to your src folder)\n\n## Issues\n\nIssues can be reported on [Github](https://github.com/mendix/generator-mendix/issues).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmendixlabs%2Fgenerator-mendix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmendixlabs%2Fgenerator-mendix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmendixlabs%2Fgenerator-mendix/lists"}