{"id":20331128,"url":"https://github.com/comcast/porrtal","last_synced_at":"2025-06-11T23:39:51.555Z","repository":{"id":65331042,"uuid":"578763593","full_name":"Comcast/Porrtal","owner":"Comcast","description":"This project was created to help developers. You can use the platform to build web applications. The project supports both React and Angular development.","archived":false,"fork":false,"pushed_at":"2024-06-22T10:24:46.000Z","size":28761,"stargazers_count":8,"open_issues_count":8,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-11T21:07:34.646Z","etag":null,"topics":["angular","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Comcast.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-Apache-2.0","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":"SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-15T20:34:59.000Z","updated_at":"2024-09-19T02:40:59.000Z","dependencies_parsed_at":"2024-08-26T06:02:38.397Z","dependency_job_id":"dd6cfbfe-1506-4c64-9d6a-0156883252b6","html_url":"https://github.com/Comcast/Porrtal","commit_stats":{"total_commits":846,"total_committers":3,"mean_commits":282.0,"dds":0.6252955082742317,"last_synced_commit":"03607b0265428916ac4084e2dedb422a81e46f92"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2FPorrtal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2FPorrtal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2FPorrtal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2FPorrtal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Comcast","download_url":"https://codeload.github.com/Comcast/Porrtal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480434,"owners_count":21110937,"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":["angular","react","typescript"],"created_at":"2024-11-14T20:18:52.970Z","updated_at":"2025-04-11T21:07:47.455Z","avatar_url":"https://github.com/Comcast.png","language":"TypeScript","readme":"# Porrtal\n\nWelcome to the Porrtal project !!\n\nThis project was created to help developers. You can use the platform to build web applications. The project supports both React and Angular development. You can also use the Porrtal code as a reference showing how to use React, BlueprintJS, Material (MUI), Angular, and Angular Material.\n\n## Porrtal Quick Starts\n\nThe quick starts listed here are designed to get you up and running quickly.\n\n| \u003cimg src=\"apps/n/porrtal-io-app/public/assets/react.svg\" width=\"28\"  /\u003e | [React Quick Start - BlueprintJS](libs/porrtal-components/r-quick-start-blueprint/porrtal-components-r-quick-start-blueprint/quick-start.md)  |\n| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\n| ![react](apps/n/porrtal-io-app/public/assets/react.svg)                 | [React Quick Start - Material (MUI)](libs/porrtal-components/r-quick-start-material/porrtal-components-r-quick-start-material/quick-start.md) |\n| ![angular](apps/n/porrtal-io-app/public/assets/angular.svg)             | [Angular Quick Start - Material](libs/porrtal-components/a-quick-start-material/porrtal-components-a-quick-start-material/quick-start.md)     |\n\n## Porrtal Website\n\nThe Porrtal project website can be found here: [porrtal.io](https://porrtal.io) (coming soon...)\n\nYou can follow these steps to run the Porrtal website locally:\n\n```bash\n# clone the repo\ngit clone https://github.com/Comcast/Porrtal/Porrtal.git\n\n# switch to the folder\ncd Porrtal\n\n# install npm packages\nnpm install --legacy-peer-deps\n\n# serve the app\nnx serve n-porrtal-io-app\n```\n\nOnce the above command completes, you can run the website locally in your browser [http://localhost:4200](http://localhost:4200)\n\n## Porrtal NPM Packages\n\nPorrtal NPM Packages can be found here: [www.npmjs.com/search?q=@porrtal](https://www.npmjs.com/search?q=%40porrtal)\n\n_@porrtal is a set of npm packages that can be used to rapidly construct spatial / analytics systems for power users._\n\n(@porrtal provides npm packages for both Angular and React development)\n\n## The Porrtal Mission\n\n### @porrtal project - Build Better Outcomes\n\nThe goal of the Porrtal project is to assist developers in building better outcomes by\n\n1. Increasing developer velocity;\n2. Enabling delivery of more powerful web applications;\n3. Providing a more powerful navigation model; and\n4. Facilitating an integrated application experience through modular component composition.\n\n\u0026nbsp;\n\n![Focus on Components Leave the Plumbing to Porrtal](./libs/porrtal-components/r-porrtal-io/porrtal-components-r-porrtal-io/welcome/leave-the-plumbing-to-porrtal.jpg)\n\n\u0026nbsp;\n\u0026nbsp;\n\n![Grow your Development up to Planetary Scale](./libs/porrtal-components/r-porrtal-io/porrtal-components-r-porrtal-io/welcome/porrtal-is-modular.jpg)\n\n## Porrtal Platform Overview\n\nLets start with an overview of a typical Porrtal web application. You build your components and plug them in to the Porrtal platform.\n\nHere's a sketch of a Porrtal web application.\n\n![Porrtal Features](libs/porrtal-components/r-quick-start-blueprint/porrtal-components-r-quick-start-blueprint/welcome/porrtal-features-diagram.jpg)\n\nSeveral Porrtal \"Panes\" (\"nav\" pane, \"main\" pane, and \"search\" pane) are shown in the above diagram. These are the regions where your components can be placed.\n\nYoure components are independent and reusable bits of code that typically occupy a rectangular area of the UI.\n\nWhen building a Porrtal app, you will define an array of Porrtal \"Views\". Each Porrtal View object in the array references one of your components. The View object also includes properties like icon, display text, pane, and more. The View object helps Porrtal load your components into the Porrtal app.\n\nOn the left, you can see the nav pane. The first nav view is the quick start outline. The second is the Account Nav component we will be building. You can switch between these components by clicking on the icons on the far left.\n\nTo see the search pane, start typing some text in top right text box. The search pane will popup and show the results of the search based on the text you type. As you change the text, the search component will change the displayed results.\n\nA Porrtal view can be dynamically launched by the code in a component. Porrtal also provides a more advanced launch feature where an (entity) menu of launch options is displayed. You can see more about the Entity Menu in the Quick Starts above.\n\n## Porrtal Apps - Adding Authentication\n\n[See \"Porrtal Libraries\" Readme](./libs/porrtal/README.md)\n\n# Porrtal Development\n\nThis project was generated using [Nx](https://nx.dev).\n\n\u003cp style=\"text-align: left;\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\" width=\"75\"\u003e\u003c/p\u003e\n\n🔎 **Smart, Fast and Extensible Build System**\n\n## Adding capabilities to your workspace\n\nNx supports many plugins which add capabilities for developing different types of applications and different tools.\n\nThese capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.\n\nBelow are our core plugins:\n\n- [React](https://reactjs.org)\n  - `npm install --save-dev @nx/react`\n- Web (no framework frontends)\n  - `npm install --save-dev @nx/web`\n- [Angular](https://angular.io)\n  - `npm install --save-dev @nx/angular`\n- [Nest](https://nestjs.com)\n  - `npm install --save-dev @nrwl/nest`\n- [Express](https://expressjs.com)\n  - `npm install --save-dev @nrwl/express`\n- [Node](https://nodejs.org)\n  - `npm install --save-dev @nrwl/node`\n\nThere are also many [community plugins](https://nx.dev/community) you could add.\n\n## Generate an application\n\nRun `nx g @nx/react:app my-app` to generate an application.\n\n\u003e You can use any of the plugins above to generate applications as well.\n\nWhen using Nx, you can create multiple applications and libraries in the same workspace.\n\n## Generate a library\n\nRun `nx g @nx/react:lib my-lib` to generate a library.\n\n\u003e You can also use any of the plugins above to generate libraries as well.\n\nLibraries are shareable across libraries and applications. They can be imported from `@porrtal-workspace/mylib`.\n\n## Development server\n\nRun `nx serve my-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `nx g @nx/react:component my-component --project=my-app` to generate a new component.\n\n## Build\n\nRun `nx build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## Running unit tests\n\nRun `nx test my-app` to execute the unit tests via [Jest](https://jestjs.io).\n\nRun `nx affected:test` to execute the unit tests affected by a change.\n\n## Running end-to-end tests\n\nRun `nx e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).\n\nRun `nx affected:e2e` to execute the end-to-end tests affected by a change.\n\n## Understand your workspace\n\nRun `nx graph` to see a diagram of the dependencies of your projects.\n\n## Further help\n\nVisit the [Nx Documentation](https://nx.dev) to learn more.\n\n## ☁ Nx Cloud\n\n### Distributed Computation Caching \u0026 Distributed Task Execution\n\n\u003cp style=\"text-align: left;\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-cloud-card.png\" width=\"150\"\u003e\u003c/p\u003e\n\nNx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.\n\nTeams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.\n\nVisit [Nx Cloud](https://nx.app/) to learn more.\n\n## License\n\nThis project is licensed under the [Apache 2.0](LICENSE-Apache-2.0) license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomcast%2Fporrtal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomcast%2Fporrtal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomcast%2Fporrtal/lists"}