{"id":13929358,"url":"https://github.com/dmx-systems/dmx-plugin-template","last_synced_at":"2025-04-12T08:53:25.504Z","repository":{"id":57213522,"uuid":"88764254","full_name":"dmx-systems/dmx-plugin-template","owner":"dmx-systems","description":"A starter project for developing a DMX plugin","archived":false,"fork":false,"pushed_at":"2023-06-17T12:59:57.000Z","size":73,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T08:53:20.325Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dmx.berlin","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dmx-systems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-19T16:01:19.000Z","updated_at":"2023-06-17T12:58:36.000Z","dependencies_parsed_at":"2024-01-14T18:09:26.749Z","dependency_job_id":null,"html_url":"https://github.com/dmx-systems/dmx-plugin-template","commit_stats":null,"previous_names":["jri/dm5-plugin-template"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmx-systems%2Fdmx-plugin-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmx-systems%2Fdmx-plugin-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmx-systems%2Fdmx-plugin-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dmx-systems%2Fdmx-plugin-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dmx-systems","download_url":"https://codeload.github.com/dmx-systems/dmx-plugin-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248543882,"owners_count":21121838,"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":[],"created_at":"2024-08-07T18:02:17.359Z","updated_at":"2025-04-12T08:53:25.485Z","avatar_url":"https://github.com/dmx-systems.png","language":"JavaScript","funding_links":[],"categories":["others"],"sub_categories":[],"readme":"# DMX 5 Plugin Template\n\nThis project is aimed at [DMX 5](https://github.com/dmx-systems/dmx-platform) plugin developers.\n\nA plugin for the DMX platform can contain both, a server-side part, and/or a client-side part. At client-side a plugin either *extends* the DMX Webclient, or *creates* a complete custom web front-end (which possibly provides its own extension mechanism).\n\nThis template project assumes you want develop a DMX plugin that extends the DMX Webclient. It is *not* suited for developing a custom web front-end. You can also use this template to add a server-side part to the plugin later on, however this is not demonstrated here.\n\n### Build DMX 5 from source\n\nThe template project assumes you have built DMX 5 from source.\n\nThese tools are needed:\n\n- Java 8\n- Maven\n- Node.js\n- git\n\nBuild from source:\n\n```sh\ngit clone https://github.com/dmx-systems/dmx-platform.git\ncd dmx-platform\nmvn clean install -P all\n```\n\nOnly when you build DMX 5 from source you will get Hot Module Replacement. Hot Module Replacement provides you a comfortable development experience.\n\n### Clone the template project\n\nClone the template project inside DMX's `modules-external` directory:\n\n```sh\ncd modules-external\ngit clone https://github.com/dmx-systems/dmx-plugin-template.git\n```\n\nCloning inside `modules-external` gives you 2 features without requiring manual configuration:\n\n- For building the production version of the plugin the existing Webpack installation of the DMX installation will be reused (you don't need install Webpack for every plugin project again and again).\n- The production build of your plugin is automatically copied to DMX's `bundle-deploy` directory in order to get hot deployed.\n\n### Configure Hot Module Replacement\n\nIn `dmx-platform/modules/dmx-webclient/src/main/js/plugin-manager.js` look for the comment `// while development add your plugins here` and add a `initPlugin()` call as follows:\n\n```js\n// while development add your plugins here\ninitPlugin(require('modules-external/dmx-plugin-template/src/main/js/plugin.js').default)\n```\n\nThis gives you Hot Module Replacement. That is every time you modify any of your plugin's front-end files (e.g. `.js`, `.vue`) the browser provides you instant feedback. Hot Module Replacement is handled by Webpack Dev Server.\n\n### Start the server(s)\n\n1. Start the DMX server:\n\n    ```\n    cd dmx-platform\n    mvn pax:run\n    ```\n\n    By default the DMX server listens on port `8080`.\n\n2. In another terminal: start the Webpack Dev Server:\n\n    ```\n    cd dmx-platform\n    npm run dev\n    ```\n\n    The Webpack Dev Server (which listens on port `8082`) will build the DMX Webclient along with your plugin (as you have added it to `plugin-manager.js`), and then launches the Webclient along with your plugin in a browser window (`http://localhost:8082`).\n\n### What the plugin does\n\nThe plugin mounts a \"Greetings!\" button into the Webclient's toolbar. When you click it, another \"Greetings\" Note topic is created in the database and revealed on the topicmap.\n\n![greetings-button](img/greetings-button.png)\n\nAlthough this is trivial functionality the plugin's source code demonstrates a couple of crucial plugin concepts:\n\n* Mounting Vue.js components into the DMX Webclient\n* Registering a Vuex store module for managing the plugin's state\n* Injecting Webclient dependencies (e.g. `dmx-api`) into components and store module\n* Dispatching Webclient actions (e.g. `revealTopic`)\n\n### Start developing\n\nNow adapt the plugin to your own needs. Every DMX plugin which extends the standard Webclient has a `src/main/js/plugin.js` file. The `plugin.js` file declares the various assets your plugin provides (e.g. Vue.js components, Vuex store module). Start your inspection there.\n\nWhile development the result of every modification you make is immediately visible in the browser due to Hot Module Replacement.\n\n### Build plugin for production\n\n```sh\ncd dmx-plugin-template\nmvn clean package\n```\n\nThis will build a `.jar` file for production and copy it to DMX's `bundle-deploy` directory. The `.jar` file contains your plugin (minified Javascript, extracted CSS, both hashed for longterm caching) and is deployable in every DMX 5 installation. The production build is handled by Webpack. The DMX server serves the plugin front-end assets via http(s).\n\nTest the production build of your plugin by opening the Webclient, but this time as served from the DMX server `http://localhost:8080/systems.dmx.webclient/` (note that the trailing slash is needed). The \"Greetings!\" button is supposed to appear and function like before. But note that this time the DMX Webclient fetches the plugin's front-end assets (Javascript, CSS) from the DMX server (no Webpack Dev Server involved). You can see this in the browser console:\n\n![fetch-plugin](img/fetch-plugin.png)\n\n### Learn more\n\nTo learn more about DMX plugin development have a look at the DMX Developer Guide:  \nhttps://docs.dmx.systems/en/latest/devel.html\n\n## Version History\n\n**0.7.2** -- Jun 17, 2023\n\n* Compatible with DMX 5.3\n\n**0.7.1** -- Jul 23, 2021\n\n* Compatible with DMX 5.2\n\n**0.7** -- Jan 2, 2021\n\n* Code Examples:\n    * Dispatching Webclient actions (`revealTopic`)\n    * Adding Vuex state (`greetingCount`)\n* Chore:\n    * Adapt URLs to `github.com/dmx-systems`\n    * Code run through `eslint`\n* Compatible with DMX 5.1\n\n**0.6.1** -- Aug 17, 2020\n\n* Chore:\n    * Compatible with DMX 5.0\n    * Revised README\n\n**0.6** -- Mar 30, 2020\n\n* Improvement:\n    * Support code splitting also for CSS\n* Chore:\n    * Adapt to `clean-webpack-plugin` 3.0\n* Requires DMX 5.0-beta-7\n\n**0.5** -- Nov 25, 2019\n\n* Improvement:\n    * Default config supports code splitting\n* Chore:\n    * Adapt to DMX 5.0-beta-6\n    * Revised README\n\n**0.4.1** -- Apr 24, 2019\n\n* Chore:\n    * Adapt to newer `clean-webpack-plugin`\n    * Depends on DMX 5.0-beta-2\n\n**0.4** -- Feb 4, 2019\n\n* Plugin production build:\n    * CSS extraction\n    * Add hashes to js and css files to support longterm caching\n    * Remove old builds\n* More example code annotations\n* Simplified pom.xml\n* Change license to `GPL-3.0-or-later`\n\n**0.3** -- Oct 14, 2018\n\n* Illustrates dependency injection (`dm5`, `axios`, `Vue`)\n    * into `plugin.js`\n    * into a Vuex store module\n    * into a Vue component\n* Illustrates CSS usage\n* New script `stats` runs the Webpack Bundle Analyzer\n* Uses the Webpack installation of the DMX platform\n\n**0.2** -- Mar 26, 2018\n\n**0.1** -- May 1, 2017\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmx-systems%2Fdmx-plugin-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdmx-systems%2Fdmx-plugin-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdmx-systems%2Fdmx-plugin-template/lists"}