{"id":15292955,"url":"https://github.com/typijs/typijs","last_synced_at":"2025-04-05T22:03:32.028Z","repository":{"id":38615382,"uuid":"112279631","full_name":"typijs/typijs","owner":"typijs","description":"The Angular CMS Framework for building fully-featured SPA sites powered by NodeJS and MongoDB with TypeScript","archived":false,"fork":false,"pushed_at":"2024-06-19T08:00:19.000Z","size":54865,"stargazers_count":152,"open_issues_count":70,"forks_count":81,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-03-29T21:04:19.886Z","etag":null,"topics":["angular","architecture","cms","cms-framework","decorators","dynamic","expressjs","modular","mongodb","mongoose","nodejs","typescript","typescript-library"],"latest_commit_sha":null,"homepage":"https://typijs.com","language":"TypeScript","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/typijs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-28T03:16:18.000Z","updated_at":"2025-03-04T15:28:41.000Z","dependencies_parsed_at":"2024-10-09T12:53:28.300Z","dependency_job_id":"57cbd1cf-53f8-40de-a804-36725358d3ca","html_url":"https://github.com/typijs/typijs","commit_stats":{"total_commits":827,"total_committers":9,"mean_commits":91.88888888888889,"dds":"0.24304715840386937","last_synced_commit":"fec0c26b3a7cae7545f96e8482364adce9ad33c9"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typijs%2Ftypijs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typijs%2Ftypijs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typijs%2Ftypijs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typijs%2Ftypijs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typijs","download_url":"https://codeload.github.com/typijs/typijs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406084,"owners_count":20933803,"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","architecture","cms","cms-framework","decorators","dynamic","expressjs","modular","mongodb","mongoose","nodejs","typescript","typescript-library"],"created_at":"2024-09-30T16:35:31.050Z","updated_at":"2025-04-05T22:03:31.996Z","avatar_url":"https://github.com/typijs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.typijs.com\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/typijs/typijs.github.io/main/assets/imgs/typijs-logo-with-text.png\" alt=\"Logo\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eTypiJS Framework\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    The CMS Framework for building fully-featured SPA sites\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.typijs.com\"\u003e\u003cstrong\u003eExplore the framework »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/typijs/typijs/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/typijs/typijs/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## TypiJS\n\nThe Angular CMS Framework for building fully-featured SPA sites powered by NodeJS and MongoDB with TypeScript. \n\nIt includes 4 packages:\n* `@typijs/core` - provides the decorators, injection tokens, base classes to create content type\n* `@typijs/modules` - provides the plugged-in module such as Page tree, Block tree, Media..\n* `@typijs/portal` - provide the UI layout to access editor, admin\n* `@typijs/api` - provide the apis to manipulate the content data which stored in MongoDB\n\n### Built With\n\nBuild on top modern stacks with TypeScript\n\n* [Angular](https://angular.io)\n* [ExpressJS](https://expressjs.com)\n* [NodeJS](https://nodejs.org)\n* [MongoDB](https://www.mongodb.com)\n\n## How it work\n\nLet assume you need build the dynamic website, in Angular CMS, we need to breakdown this page to properties, blocks like this\n\n![cms-demo-site-breakdown](resources/images/cms-demo-site-breakdown.png)\n\nSo thinking of the architecture in which the site which breakdowns to many pages, each page will also breakdowns to blocks and properties. After that we will definite the page types, block types to build the site.\n\nFrom this idea, in Angular CMS, we will definite the `Home Page` page type like this\n\n```typescript\n@PageType({\n    displayName: \"Home Page\",\n    componentRef: HomeComponent,\n    description: \"This is home page type\"\n})\nexport class HomePage extends PageData {\n\n    @Property({\n        displayName: \"Logo\",\n        displayType: UIHint.Input\n    })\n    logo: string;\n\n    @Property({\n        displayName: \"Latest Projects Page Root\",\n        displayType: UIHint.Input\n    })\n    latestProjectRoot: string;\n\n    @Property({\n        displayName: \"Highlight Features\",\n        description: \"This is highlight feature will be in banner area\",\n        displayType: UIHint.ContentArea\n    })\n    features: Array\u003cany\u003e;\n\n    @Property({\n        displayName: \"Highlight Portfolios\",\n        displayType: UIHint.ContentArea,\n    })\n    portfolios: Array\u003cany\u003e;\n\n    @Property({\n        displayName: \"Footer\",\n        displayType: UIHint.ContentArea\n    })\n    footer: Array\u003cany\u003e;\n\n    @Property({\n        displayName: \"Footer Text\",\n        description: \"This is footer text to show the copyright\",\n        displayType: UIHint.Xhtml\n    })\n    footerText: string;\n}\n\n```\n\nBasically, we have just created the page type with properties: logo, features, portfolios, footer...\n\nThen corresponding to page type, we will create a template (like Html template). In Angular CMS, this template actually is the Angular Component\n\n```typescript\nimport { Component } from '@angular/core';\nimport { CmsComponent } from '@typijs/core';\nimport { HomePage } from './home.pagetype';\n\n@Component({\n    templateUrl: './home.component.html',\n})\nexport class HomeComponent extends CmsComponent\u003cHomePage\u003e {\n    constructor() {\n        super();\n    }\n}\n\n```\n\nNow when create the page with page type of `Home Page`, the `HomeComponent` is charge of rending the page's template\n\nSo after we done all things above, how to we create a page. In Angular CMS, we have the admin/editor UI to manage all pages like this\n\n## How it run\nI created a GIF for demo purpose. It's just only 35MB (haha), so be patient for loading please.\n\n\u003e In case your device or browser can't load the this gif, there is a video you can see [Angular Cms Demo](https://www.youtube.com/watch?v=2Bq-7O1n9Gc)\n\n![cms-demo-site](resources/images/angular-cms-demo.gif)\n\nThis Admin/Editor UI is build with plug-in architecture\n\n![cms-demo-site](resources/images/component-based-extensible.png)\n\nEach page you created has the unique friendly SEO URL like `/home-page`, `/home-page/about`, `/portfolio/article-1`...and the page is published, it can be access via those urls\n\nCheck it out with other nice features:\n\n## Features\n\n1. Page Types, Page Template, Page Properties\n2. Block Types, Block Template, Block Properties\n3. Media management: Upload multi files (images, doc, pdf, ...), resizing image, drag and drop...\n4. Friendly URL\n5. SEO (using Angular Universal)\n6. Multi site\n7. Modules architecture for extend the Admin UI\n\n**and last but most important: the site you build with Angular CMS is actually the Angular App, it mean it is Angular from router, render, .... You will only work with Angular.**\n\nHowever, it still need a storage to store data, right?. Angular CMS uses the API system which was built by ExpressJS (NodeJS framework) and MongoDB (using mongoose as ORM)\n\n## Screenshots\n\n**The minimal, simple, clear screen for Editor to edit content**\n\n![cms-demo-site](resources/images/new-cms-editor.jpg)\n\n**On page preview**\n\n![cms-demo-site](resources/images/on-page-preview.jpg)\n\n**Upload media by drag \u0026 drop**\n\n![cms-demo-site](resources/images/upload-media-progress.jpg)\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\nTo start the site build with TypiJS, following theses steps\n\n### Prerequisites\n\n* Angular 10.x or 11.x\n* Node 10.x or higher\n* Express 4.x or higher\n* Typescript 4.1.5\n* MongoDB latest\n\n### Quick start\n1. Clone the repo\n   ```sh\n   git clone https://github.com/typijs/typijs-starter.git\n   cd typijs-starter\n   ```\n2. Under `server` folder run script\n    ```sh\n    npm install\n    npm run dev\n    ```\n3. Under `client` folder run script\n    ```sh\n    npm install\n    npm start\n    ```\n4. Navigate to http://localhost:4200/typijs/register to create admin user\n5. See how setup site at video https://www.youtube.com/watch?v=PBKFrZ5Qq1Y\n\n## Documentation\n\n* Visit the [docs](https://www.typijs.com/typijs)\n\n\n## How to contribute\n\nBefore you want to contribute the project, you need set up the local development environment\n\n### Setting update local environment via docker\n\n1. Build docker image for typijs server\n\nUnder the root folder, run this command to build the docker image for Apis\n\n```\ndocker-compose build\ndocker-compose up\n\n```\n\nNow you can goto http://localhost:4200 to see the site.\n\n### Setting up your local environment in dev mode\n\n\n1. Load our example MongoDB database from the backup file\n\n```\nmongorestore -d vegefoods_v2 resources/db/dump/vegefoods_v2\n\n```\n\n2. Go to `cms-api` folders and run command \n```\n    npm install\n    npm link\n    npm run build\n```\n\n3. Go to `cms-server` folder and run commands\n```\n    npm install\n```\n4. set up the [symlinks](https://docs.npmjs.com/cli/link.html) between modules as below:\n```\n   npm link @typijs/api\n```\n5. Stay under `cms-server` folder, and run the command\n```\n    npm run dev\n```\n\nThis command will run script to connect to mongo db, so make sure you have the correct path to your db.\nFor example, you have the db path like as `[MonogDB PATH]/data/db`\n```\n    mongod --dbpath [MongoDB PATH]/data/db\n```\n\n\u003e If you are running MongoDB as a service, you can skip this step\n\n6. Final step, under `cms` folder, run the command sequentially\n```\n    npm install\n    ng build core\n    ng build modules\n    ng build portal\n    npm run dev\n```\n\u003e Make sure you installed Angular CLI with `--global`\n\nNow you can goto http://localhost:4200 to see the site.\n\nRegister an admin account on the admin site \n\nurl: http://localhost:4200/typijs/register\n\n### Run Angular Universal (SSR) in Dev mode\n\n```\n    npm install\n    ng build core\n    ng build modules\n    ng build portal\n    ng build\n    ng run cms-demo:server\n```\nCopy three folders `dist\\core`, `dist\\modules` and `dist\\portal` into `cms\\node_modules\\@typijs` folder then run this script to start Server Site Render\n\n```\n    npm run start:ssr\n```\n\nIf there is any change these libs `core` or `modules` or `portal` need to run build for each lib again then run \n\n```\nng run cms-demo:server\n```\n\nand start server site again\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `angular-cms`, please write the [issue](https://github.com/angular-cms/angular-cms/issues) or give me a Pull Request freely.\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/angular-cms/angular-cms/issues) on GitHub.\n\n## Versioning\n\nWe are current on Alpha version\n\n## Authors\n\n* **Hung Dang Viet** - *Initial work and maintain* - [danghung1202](https://github.com/danghung1202)\n\n## Acknowledgments\n\n* Inspiration from [Episerver CMS](https://www.episerver.com/)\n\n## 📝 License\n\nThis project is [MIT](https://github.com/angular-cms/angular-cms/blob/dev/LICENSE) licensed.\n\n```\nMIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypijs%2Ftypijs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftypijs%2Ftypijs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftypijs%2Ftypijs/lists"}