{"id":13798932,"url":"https://github.com/supnate/rekit-portal","last_synced_at":"2025-08-24T17:11:59.244Z","repository":{"id":147405283,"uuid":"77151180","full_name":"supnate/rekit-portal","owner":"supnate","description":"Web UI for managing a Rekit project.","archived":false,"fork":false,"pushed_at":"2019-04-01T02:35:12.000Z","size":8600,"stargazers_count":91,"open_issues_count":4,"forks_count":6,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-23T13:36:01.524Z","etag":null,"topics":["react","react-router","redux","rekit"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/supnate.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-22T14:32:26.000Z","updated_at":"2024-08-04T00:03:25.950Z","dependencies_parsed_at":null,"dependency_job_id":"788514df-0764-40d8-8042-6d089a3c963d","html_url":"https://github.com/supnate/rekit-portal","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supnate%2Frekit-portal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supnate%2Frekit-portal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supnate%2Frekit-portal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/supnate%2Frekit-portal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/supnate","download_url":"https://codeload.github.com/supnate/rekit-portal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224385343,"owners_count":17302468,"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":["react","react-router","redux","rekit"],"created_at":"2024-08-04T00:00:56.834Z","updated_at":"2024-11-13T04:14:12.451Z","avatar_url":"https://github.com/supnate.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Rekit portal\n\n## NOTE: this repo has been deprecated in favor of https://github.com/rekit/rekit-studio\n------\n\nRekit portal is a new dev tool shipped with Rekit 2.0. It's a central place to manage and analyze your Rekit project. Rekit portal itself is also created with Rekit, so it's also a good real-world example of Rekit for reference.\n\n[![Version](http://img.shields.io/npm/v/rekit-portal.svg)](https://www.npmjs.org/package/rekit-portal)\n[![Build Status](https://travis-ci.org/supnate/rekit-portal.svg?branch=master)](https://travis-ci.org/supnate/rekit-portal)\n[![Dependency Status](https://david-dm.org/supnate/rekit-portal.svg?style=flat-square)](https://david-dm.org/supnate/rekit-portal)\n[![Demo](https://img.shields.io/badge/demo-link-blue.svg)](https://rekit-portal.herokuapp.com)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\nTo have a quick view on how Rekit portal works, you can look at the [live demo](https://rekit-portal.herokuapp.com).\n\n### Key features\n\n1. Provide a more intuitive way to create, rename, move or delete features, components or actions than CLI. Just like you always create a Java class using an IDE like eclipse.\n2. Generate diagram reports of the project architecture by source code. So that new team members, or yourself several months later could learn the project easier.\n3. Easy to run tests of a single component or action by just right click on it.\n4. Run build without opening a terminal.\n5. Integrated test coverage report.\n\n### Installation\nYou don't need to install Rekit portal manually. When a new Rekit app is created, the `rekit-portal` is auto dependent as a npm module. You should be able to access Rekit portal at [http://localhost:6076](http://localhost:6076) by default.\n\n### Project explorer\nThe project explorer provides a more meaningful view of the project folder structure by grouping source files by `features`, `actions`, `components`. You can easily see the functionality structure rather than just folder structure. You can see it at the left side of Rekit portal:\n\n\u003cimg src=\"/images/portal-project-explorer.png\" width=\"300\" alt=\"project-explorer\" /\u003e\n\nBesides displaying the project structure, it also provides context menus to manage project elements like component.\n\n### Dashboard\nThe dashboard provides an overall status view of the project such as overview diagram, test coverage etc.\n\n\u003cimg src=\"/images/portal-dashboard.png\" width=\"700\" alt=\"dashboard\" /\u003e\n\n### Overview diagram\nThe most notible part of the dashboard is the overview diagram. It's an intuitive view about the architecture of a Rekit project. It's also interactive, you can mouse move to different features, components, actions to see the relationship of some specific element. You can also click a node to deep dive into it. Below information is covered by the overview diagram:\n\n1. Relationship between modules.\n2. The relative size of features.\n3. How a feature is composed.\n\nWhen mouseover an element, the diagram will highlight the current element and the relationship which is only about the current element.\n\nIdeally, there should be no circular-dependecies among features. So that they are pluggable and easier to understand. But in real projects you need to balance the architecture and development efficiency. So it's acceptable if there are light-weight circular-dependencies between features while a principle is to avoid too many such dependencies. You can delay the refactor of removing dependencies when some type of dependencies become too complicated.\n\nHere is a list about what different colors and lines mean:\n\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"vertical-align: middle; text-align: center; width: 140px;\"\u003e\u003cimg src=\"/images/overview-diagram-feature.png\" width=\"110\" alt=\"color-feature\"/\u003e\u003c/td\u003e\n      \u003ctd\u003eFeatures.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"vertical-align: middle; text-align: center; width: 140px;\"\u003e\u003cimg src=\"/images/overview-diagram-action.png\" width=\"110\" alt=\"color-action\"/\u003e\u003c/td\u003e\n      \u003ctd\u003eActions.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"vertical-align: middle; text-align: center; width: 140px;\"\u003e\u003cimg src=\"/images/overview-diagram-component.png\" width=\"110\" alt=\"color-component\"/\u003e\u003c/td\u003e\n      \u003ctd\u003eComponents.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"vertical-align: middle; text-align: center; width: 140px;\"\u003e\u003cimg src=\"/images/overview-diagram-misc.png\" width=\"110\" alt=\"color-misc\"/\u003e\u003c/td\u003e\n      \u003ctd\u003eMisc files.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"vertical-align: middle; text-align: center; width: 140px;\"\u003e\u003cimg src=\"/images/overview-diagram-dep1.png\" width=\"110\" alt=\"color-dep-on\"/\u003e\u003c/td\u003e\n      \u003ctd\u003eA module depends on others.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"vertical-align: middle; text-align: center; width: 140px;\"\u003e\u003cimg src=\"/images/overview-diagram-dep2.png\" width=\"110\" alt=\"color-dep-by\"/\u003e\u003c/td\u003e\n      \u003ctd\u003eA module is dependent by others.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd style=\"vertical-align: middle; text-align: center; width: 140px;\"\u003e\u003cimg src=\"/images/overview-diagram-dep3.png\" width=\"110\" alt=\"color-dep-internal\"/\u003e\u003c/td\u003e\n      \u003ctd\u003eA module depends on others in the same feature.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Element diagram\nWhile the overview diagram shows the overall architecture of the project, the element diagram provides a focused view of the relationship between the selected element and others. It helps to understand a module quickly, and helps to find out over-complicated modules.\n\nWhen you click an element from the project explorer or the overview diagram, it will show the element diagram by default:\n\n\u003cimg src=\"/images/element-diagram.png\" width=\"550\" alt=\"element-diagram\" /\u003e\n\n### Test coverage\nRekit uses [istanbul](https://github.com/gotwarlost/istanbul) to generate test coverage report.\nAfter running all tests against the project, the test coverage will be available.\nRunning a single test or tests of a folder does not generate coverage report.\nNote that if some tests failed, the report data may be incomplete.\n\nYou can see the overall test coverage report from dashboard or the original report generated by [istanbul-nyc](https://github.com/istanbuljs/nyc) from the test coverage detail page.\n\n### Manage project elements\nRekit portal wraps command line tools into UI dialogs, with which you can intuitively create, rename or delete components, actions etc. To open a dialog, right click an element in the project exploer and click the corresponding menu item.\n\n\u003cimg src=\"/images/cmd-dialogs.png\" width=\"700\" alt=\"cmd-dialogs\" /\u003e\n\n### Run build\nRekit portal executes the build script `tools/build.js` under your project when click the menu item `Build`. It reads the webpack build progress data to update the progress bar. Though `build.js` created by Rekit looks a bit complex but you can update it per your requirement after you fully understand how it works.\n\n\u003cimg src=\"/images/portal-build.png\" width=\"550\" alt=\"build\" /\u003e\n\n\n### Run tests\nRekit portal executes the test script `tools/run_test.js` under your project when click the menu item `Run tests`. The script accepts the argument which tests to run, it could be one single file or a folder. When no argument provides, it runs all tests under `tests` folder, and generates test coverage report. See more in [command line tools](/docs/cli.md) page.\n\nSo when click `Run test` menu item on a project element like component, it just executes `tools/run_test.js` behind and pass the current component test file as the argument to the script. You can also update `run_test.js` script on your requirement.\n\n\u003cimg src=\"/images/portal-test.png\" width=\"550\" alt=\"test\" /\u003e\n\n### Code viewer\nIt helps to quickly view the source code of the project. For example, when select an component, by default it shows the diagram view, but you can switch to the code view where you can view the source code of the component. And you could also easily view the style code or test file. For now Rekit hasn't support editing code directly because it doesn't intend to replace your favorite text editors.\n\n\u003cimg src=\"/images/element-page.png\" width=\"700\" alt=\"element-page\" /\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupnate%2Frekit-portal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsupnate%2Frekit-portal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsupnate%2Frekit-portal/lists"}