{"id":16362716,"url":"https://github.com/enzolutions/generator-marionette-drupal","last_synced_at":"2025-03-21T00:31:50.071Z","repository":{"id":17931715,"uuid":"20905713","full_name":"enzolutions/generator-marionette-drupal","owner":"enzolutions","description":"Scaffold a headless Drupal backend, Backbone Marionette app client, and Jasmine tests","archived":false,"fork":false,"pushed_at":"2015-05-18T17:55:28.000Z","size":1775,"stargazers_count":48,"open_issues_count":2,"forks_count":10,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-08T11:27:44.537Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/enzolutions.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}},"created_at":"2014-06-17T01:05:57.000Z","updated_at":"2024-10-03T16:39:52.000Z","dependencies_parsed_at":"2022-09-02T08:44:19.622Z","dependency_job_id":null,"html_url":"https://github.com/enzolutions/generator-marionette-drupal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzolutions%2Fgenerator-marionette-drupal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzolutions%2Fgenerator-marionette-drupal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzolutions%2Fgenerator-marionette-drupal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzolutions%2Fgenerator-marionette-drupal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enzolutions","download_url":"https://codeload.github.com/enzolutions/generator-marionette-drupal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244094266,"owners_count":20397020,"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-10-11T02:25:10.093Z","updated_at":"2025-03-21T00:31:47.871Z","avatar_url":"https://github.com/enzolutions.png","language":"JavaScript","funding_links":[],"categories":["Scaffolding Tools"],"sub_categories":["Security tools"],"readme":"[Yeoman](http://yeoman.io) [MarionetteJS](http://marionettejs.com) + [Drupal](http://drupal.org) generator\n\nThis generator create a HTML 5 application using a MVC pattern implemented with MarionetteJS and Backbone.Drupal for data model.\n\nAlso the HTML 5 application includes [Grunt](http://gruntjs.com) support to automate tasks and [Jasmine](jasmine.github.io) for Unit Tests.\n\nAll Models, Collections, Views, Regions, Actions (Route + Controller) and Forms as generated as **RequireJS** modules encapsulated enabling the option to reuse each concepts in different areas of your application.\n\nCompass is used to generate CSS using bootstrap-sass.\n\n[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/enzolutions/generator-marionette-drupal?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\n- [Application Structure](#application-structure)\n- [Drupal Configuration](#drupal-configuration)\n- [Getting Started](#getting-started)\n    - [Install Generator](#install-generator)\n    - [Create a Marionett + Drupal Project](#create-a-marionette-drupal-project)\n    - [Execute Sample Application](#execute-sample-application)\n- [Scaffolding](#scaffolding)\n- [Integration with Jasmine](#integration-with-jasmine)\n- [Integration with Grunt](#integration-with-grunt)\n- [ToDo](#todo)\n\n##Application Structure##\n\n```\n├── Gruntfile.js\n├── bower.json\n├── node_modules\n├── package.json\n└── web ( Configurable: web is recommended)\n    ├── 404.html\n    ├── actions\n    ├── collections\n    ├── favicon.ico\n    ├── form ( Configurable: Model edit Form with Backform)\n    ├── images\n    ├── index.html\n    ├── js\n    ├── models\n    ├── robots.txt\n    ├── scripts (application scripts)\n    ├── styles\n    ├── test (Configurable: Jasmine Unit Test folder)\n    ├── templates\n    ├── vendor ( Configurable: vendor is recommended)\n    └── views\n```\n\n##Drupal Configuration##\n\nThe step zero is configure and prepare your Drupal installation to accept request specially if you are planning to execute your HTML5 application in another domain, all details about how to do this could be check in page project of [Backbone Drupal](https://github.com/enzolutions/backbone.drupal)\n\n##Getting Started##\n\n### Install Dependencies\n\nIn order to use the Marionette Drupal generator is required install  Yeoman, Bower and Grunt running the following command:\n```bash\n$ npm install -g yo grunt-cli bower\n```\n\nInstall Marionette Drupal generator\n\n```bash\n$ npm install -g generator-marionette-drupal\n```\n\n### Create a Marionette Drupal project\n\nFinally, initiate the generator in a empty folder\n\n```bash\n$ yo marionette-drupal\n```\n\n![yeoman generator](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/yo_marionette_drupal_generator.png \"yeoman generator\")\n\nThe Yeoman wizzard enable you define settipgs of your HTML5 + CSS3 Backbone/MarionneteJS application.\n\n### Execute sample application\n\nThe generator create a simple sample application using an empty model, simple view and render inside a content region.\n\nYour new project has integration with Grunt and more specifically  with [connect](https://github.com/gruntjs/grunt-contrib-connect) and [livereload](https://github.com/gruntjs/grunt-contrib-livereload) and [watch](https://github.com/gruntjs/grunt-contrib-watch). So to open your new project just execute grunt using one of the following commands.\n\n```bash\n$ grunt\n\n$ grunt watch\n```\nThis command above will open your application in the following URL **http://localhost:9001** and you will see a similar result as shown in following image.\n\n![MarionetteJS sample application](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/you_marionette_drupal_sample_app.png \"MarionetteJS sample application\")\n\n**No webserver is requiered.**\n\nThe objetive of this sample application is just demostrate the environment is ready to work and you can use the [Scaffolding](#scaffolding) commands to build your application.\n\n##Scaffolding##\n\n### Generate a template\n\n```bash\n$ yo marionette-drupal:template\n```\n\nThe command above will create an empty template inside application folder app_folder/templates_folder using [Twig.js](https://github.com/justjohn/twig.js)\n\nThis command is interactive as you can see in the follwing image\n\n![Template Generation](https://github.com/enzolutions/generator-marionette-drupal/blob/master/images/generator_marionette_drupal_template.png \"Template Generation\")\n\n### Generate a Model\n```bash\n$ yo marionette-drupal:model\n```\nThe command above start an interactive interface to provide a Model Name and if a Jasmime Test unit must be created for new Model.\n\nIn the following image you see how the command looks\n\n![Model Generation](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/generator_marionette_drupal_model.png \"Model Generation\")\n\nIf you choose **None** you can define a custom end point for your model\n\n### Generate a Collection\n```bash\n$ yo marionette-drupal:collection\n```\nThe command above start an interactive interface to provide a Collection Name, select **Model** to be used in collection items and if a Jasmime Test unit must be created for new Model.\n\nRight now you must to set the end point URL relative to Drupal Backend Server.\n\nIn the following image you see how the command looks like.\n\n![Collection Generation](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/generator_marionette_drupal_collection.png \"Collection Generation\")\n\nAlso in this sub generator is possible create a collection extending from other collection like **students** extending from **people**.\n\n### Generate a View\n\n```bash\n$ yo marionette-drupal:view\n```\n\nThe command above start an interactive interface to provide a View Name to create a Marionette ItemViewand defining what **Model** or **Collection** will be integrate with the new view, also a what **Template** will be associated with view ( a new template could be generated or choose one from templates available)\n\nOptionally Jasmime Test unit could be created for new Model.\n\nIn the following image you see how the command looks\n\n![Model Generation](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/generator_marionette_drupal_view.png \"Model Generation\")\n\nInternally the generator store the MVC relation between view and model/collection to be used in **Action** Subgenerator.\n\n### Add a Region\n\n```bash\n$ yo marionette-drupal:region\n```\n\nRegions are HTML containers where views are render, an you can create as many regions your design require.\n\nEach region match with and HTML element where the view is render inside.\n\n![Add Region](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/generator_marionette_drupal_region.png \"Add Region\")\n\nAfter add a region you must to add inside your HTML app file to match with ID, let me show an example.\n\n```\n\u003cdiv id=\"sidebar\"\u003e\u003c/div\u003e\n```\n\nIn our App example is located in **web/index.html**, remember **web** could change if you choose a different location for App.\n\n### Generate an Action\n\nThis generator took some terms from Symfony Application where they have the concepts of Routing, Class Controller and Actions methods. These terms match with Backnone routing and controller and actions are functions in controller associated to routes.\n\nInstead of create three commands, I decided to combine in a single command named **Action**\n\nThis command enable you to add dynamically a new Route to your application and associate to a Controller function to response to the routing.\n\nAlso the system avoid to create an inline function in controller, a new RequireJS module **Action** is generated and is invoked inside the controller.\n\nThe saparation in Controller enable a complete isolate logic between actions.\n\nBesides the route and controller, the action require a view to be render inside the region specified.\n\nIn the following image you see how the command looks\n\n![Action Generator](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/generator_marionette_drupal_action.png \"Action Generatior\")\n\nThe action will provide code to fetch the information for model/collection, is your reposability to chage the proper ID as you can see in following example.\n\n```\nvar best_exchange  = new BestExchangeCollection({});\n\n// Load Collection\nbest_exchange.fetch({\nsuccess: function (Collection) {\n  var best_exchanges = new BestExchangesView({collection: Collection});\n  region.show();\n}\n});\n```\n### Generate a Form\n\n```bash\n$ yo marionette-drupal:form\n```\n\n**Only available for Drupal 8**\n\nThis command generate forms implementing library [Backform](http://amiliaapp.github.io/backform/index.html).\n\nThis generator enable integration with Drupal to fetch information about entities to create an HTML 5 Form to enable end users push information to Drupal Server.\n\nThis generator fetch entity information and create form matching entity fields and linked with proper REST Post to save information.\n\nIn the following image you see how the command looks\n\n![Form Generator](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/generator_marionette_drupal_form.png \"Form Generatior\")\n\nThis subgenerator is still in progress, and the process to push back info to Drupal 8 is in progress, we will use the REST Method PATCH becuase PUT won't be implemented in Drupal 8.\n\n#### Drupal 8 Setup to Enable Form Generator\n\nIn order to use this command the Drupal 8 Module [Entity REST extra](https://www.drupal.org/project/entity_rest_extra) must be installed and enabled in your Drupal 8 Backed Server.\n\nAfter enable the module you have enable Rest Resources **entity/{entity}/{bundle}/fields** and **entity/{entity}/bundles**.\n\nDrupal 8 will not support CORS until 8.1 release, for that reason if you are need your Marionette JS App runs in a different domain apply the patch [https://www.drupal.org/node/1869548#comment-9120317](https://www.drupal.org/node/1869548#comment-9120317) recommended by [Backbone.Drupal](https://github.com/enzolutions/backbone.drupal#cross-origin)\n\nRemember enable [mod_headers](http://httpd.apache.org/docs/current/mod/mod_headers.html) if you are using Apache.\n\nBe sure the user you provide to connect to server have permissions to fetch extra information.\n\n### Update settings\nThis generator store some information in a hidden file **.yo-rc.json** about where must be located templates, models, views etc and Drupal conection.\n\nIf you need change one of this information there is a sub generator to allow you to that to avoid edit that sensitive file, just use the following command.\n\n```bash\n$ yo marionette-drupal:settings\n```\n\nIn the following image you see how the command looks\n\n![Update Settings](https://raw.githubusercontent.com/enzolutions/generator-marionette-drupal/master/images/generator_marionette_drupal_settings.png \"Update Settings\")\n\nI use [Inquirer](https://github.com/SBoudrias/Inquirer.js) to create the interactive menu, but even the documentation say you can navigate with keyword arrows doen't work, I have a reported [issue](https://github.com/SBoudrias/Inquirer.js/issues/199). So use the numbers to navigate\n\n## Integration with Jasmine\nThis generator enable the option to create simple unit test against model and views, this generation is optional in sub generators **model** and **view**.\n\nThe idea is you can continue improving the unit test generated to meet the requirements of your application.\n\nTo access the unit tesst access the URL **http://localhost:9001/test/** remember the Unit Test **test** folder is configurable via initial generator, but could updated via sub generator **settings**\n\nCheck how Unit Test page looks\n\n![Unit Test](https://github.com/enzolutions/generator-marionette-drupal/blob/master/images/generator_maronette_drupal_jasmine_unit_test.png \"Unit Test\")\n\nYou must select what entity you want create a form between Nodes and Comments, after that the generator create a list of Bundles available and after select the bundle the view modes for the bundle selected.\n\nThe form is generated using the fields present in bundle view mode.\n\nIf you update your content type bundle in Drupal 8 maybe you wanna re run the form generator.\n\n## Integration with Grunt\n\nThis generator provide a initial Grunt file to execute minimal tasks, you can run all tasks available with following command.\n\n```bash\n$ grunt\n```\n\nIf you prefer you can execute any specific command among listed below.\n\n#### Concat\n\n```bash\n$ grunt contact\n```\n\nEnable concat all JS files.\n\nTodo: Configure the proper JS files and enable CSS files\n\n#### Uglify\n\n```bash\n$ grunt uglify\n```\n\nMinify JS file combined in Contact tasks.\n\nTodo: Configure minify for CSS files.\n\n#### Imagemin\n\n```bash\n$ grunt imagemin\n```\n\nOptimize images in your project.\n\n#### Compass\n\n```bash\n$ grunt compass\n```\n\nEnable process SASS files to generate CSS files in your project. This project include [bootstrap-sass](https://github.com/twbs/bootstrap-sass)\n\n#### Watch\n\n```bash\n$ grunt watch\n```\n\nMonitor when SASS files are modified to generate new CSS files.\n\n##ToDo\n\n- [ ] Implemente PATCH method in forms submit against Drupal 8\n- [ ] Update form sub generator to review image fields\n- [ ] Update documentation about list of commands implemented in grunt\n- [ ] Create RoadMap\n- [ ] Update Forms project to enable image fields\n- [ ] Create Layout Scaffolding command\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzolutions%2Fgenerator-marionette-drupal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenzolutions%2Fgenerator-marionette-drupal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzolutions%2Fgenerator-marionette-drupal/lists"}