{"id":24041882,"url":"https://github.com/binarystarter/binarystarter-angular","last_synced_at":"2025-04-19T19:52:30.122Z","repository":{"id":193448642,"uuid":"688343842","full_name":"binarystarter/binarystarter-angular","owner":"binarystarter","description":"Angular Full Stack Boilerplate Starter with PayloadCMS, Nx and Express. Free Open-Source Web App Boilerplate.","archived":false,"fork":false,"pushed_at":"2024-02-23T14:23:40.000Z","size":1430,"stargazers_count":90,"open_issues_count":1,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T12:33:55.072Z","etag":null,"topics":["amazon","angular","angular-boilerplate","aws","boilerplate","cicd","express","expressjs","github","kit","nestjs","nextjs","payload","payloadcms","pulumi","s3","starter","typescript","web"],"latest_commit_sha":null,"homepage":"https://binarystarter.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/binarystarter.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}},"created_at":"2023-09-07T06:48:21.000Z","updated_at":"2025-01-05T16:41:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"d1141803-11c1-44b9-9a97-afe226488d30","html_url":"https://github.com/binarystarter/binarystarter-angular","commit_stats":null,"previous_names":["binarystarter/binarystarter-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binarystarter%2Fbinarystarter-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binarystarter%2Fbinarystarter-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binarystarter%2Fbinarystarter-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binarystarter%2Fbinarystarter-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/binarystarter","download_url":"https://codeload.github.com/binarystarter/binarystarter-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249786202,"owners_count":21325562,"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":["amazon","angular","angular-boilerplate","aws","boilerplate","cicd","express","expressjs","github","kit","nestjs","nextjs","payload","payloadcms","pulumi","s3","starter","typescript","web"],"created_at":"2025-01-08T22:13:37.991Z","updated_at":"2025-04-19T19:52:30.093Z","avatar_url":"https://github.com/binarystarter.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular, Payload CMS, ExpressJs - Free Open-Source Full-Stack Boilerplate Starter\n\n\u003cdiv style=\"display: flex; flex-direction: row; justify-content: space-between;\"\u003e\n      \u003ca href=\"https://binarystarter.com/\"\u003e\u003cimg src=\"https://binarystarter.com/assets/images/github-1.png\" width=\"100%\" style=\"width: '100%'; height: auto;\"/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\nFull Stack Angular boilerplate starter with the integrated open-source CMS PayloadCMS. Monorepository, Secure, Stable, Automated.\n\n# Templates \u0026 Themes\n\n**[View our themes \u0026 templates https://binarystarter.com/themes-templates](https://binarystarter.com/themes-templates)**\n\n\u003cdiv style=\"display: flex; flex-direction: row; justify-content: space-between;\"\u003e\n      \u003ca href=\"https://binarystarter.com/themes-templates\"\u003e\u003cimg src=\"https://binarystarter.com/media/products-showcase.png\" width=\"100%\" style=\"width: '100%'; height: auto;\"/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n**[View our themes \u0026 templates https://binarystarter.com/themes-templates](https://binarystarter.com/themes-templates)**\n\n## ✨ Professional Web Application Development Starter without the complexity.\n\n **[VIEW DEMO](https://binarystarter.com)**\n\nFor full documentation refer to [**Documentation**](https://binarystarter.com/documentation--open-source-web-app-starter-kit-angular-payload-cms-nx-expressjs).\n\n## Do you need AWS / Self-hosted VPS automated deployment?\n\nUsing infrastructure as code, the infrastructure gets automatically based on typescript source code, using Pulumi. (https://www.pulumi.com/)\n\n[**Read more**](https://binarystarter.com/themes-templates)\n\n## Features out of the box\n\n- Shared Types between the Backend and Frontend\n- Angular Client App running on _http://localhost:4200_\n- ExpressJs Server API \u0026 PayloadCMS running on _http://localhost:8080_\n- PayloadCMS Administration Panel _http://localhost:8080/admin_\n- Angular 17+ Server Side Rendering and Single Page App with Dashboard\n- Authentication\n- Authorization\n- Shared authentication between API, Client and PayloadCMS Admin\n- Client App Dashboard available under _http://localhost:4200/c/\\*_ (authentication is required). Lazy loaded.\n- Standalone Components\n\n## Tech-Stack\n\nLatest stable versions are used. The repository is kept up to date and maintained by [Florin Mateescu](https://twitter.com/florinmtsc).\n\n- Node v20\n- Payload CMS v2\n- Angular 17\n- Nx.dev v17\n- Monorepository managed by Nx.dev\n- ExpressJs API with Payload CMS (headless open-source CMS) integrated\n- Angular with SSR (Server-Sider-Rendering) and SPA (Single Page App)\n- Angular Standalone Components\n- I18n\n- TailwindCSS\n- Angular Material\n- Pnpm, esbuild\n\n\u003cbr/\u003e\n\n\u003cimg alt=\"Payload, Angular, Express\" src=\"https://binarystarter.com/assets/images/angular/dashboard-payload.png#\" width=\"422px\"/\u003e\n\n\u003cbr/\u003e\n\n# Installation\n\nFor full documentation refer to → [**DOCUMENTATION**](https://binarystarter.com/documentation--open-source-web-app-starter-kit-angular-payload-cms-nx-expressjs).\n\nLet’s get started! 🚀\n\n#### Clone GitHub Repository\n\nRun in a terminal `git clone https://github.com/binarystarter/binarystarter-angular.git`. To specify another folder name, you can do a direct `git clone https://github.com/binarystarter/binarystarter-angular.git \u003cproject_name\u003e`.\n\n#### Prerequisites:\n\n- [Install pnpm](https://pnpm.io/installation)\n- [Install nx cli globally](https://nx.dev/getting-started/installation#installing-nx-globally)\n- Install nodejs v20\n\n#### Install modules\n\nRun `pnpm install`.\n\n#### Start the apps\n\n- Angular `nx serve web`\n- Server `nx serve express`\n\n# Details\n\n### 1. Angular\n\nThe angular app can be accessed using http://localhost:4200. All paths are considered server side rendered, except the child routes of `/c` `https://example.com/c/**` which are part of the client app. (e.g. `/c/dashboard`). Of course this can be adjusted per your needs.\n\nThe Angular client-side app can be accessed at `http://localhost:4200/c/*`\n\n### 2. ExpressJS API Server\n\nThe express server is running by default on `localhost:8080`. This can be adjusted by updating the `.env` file\n\n#### 2.1 Payload CMS\n\n- 2.1.1 The payloadcms administration panel can be accessed at `http://localhost:8080/admin`\n\n- 2.1.2 The payloadcms API can be accessed at `http://localhost:8080/api`\n\n#### 2.2 Express Custom Routes API\n\nExpressJs endpoints can be accessed from `http://localhost:8080`\n\n# More Information\n\n## Authentication and Authorization\n\nThe authentication system is based on Passport Js.\n\nYou get the following pages in Angular, connected with the ExpressJs and Payload CMS.\n\n## Angular SSR and Dashboard App\n\nAngular comes with separated modules for the static pages and the single page application.\n\nSeparation of concerns is very important at this stage of development of the Angular Universal.\n\nStatic Pages are encapsuled in their modules and they don’t interact with browser APIs hungry components.\n\n## DRY - Shared Types between the Backend and Frontend\n\nThe Backend TypeScript types should not be available on the Frontend.\n\nWhat most developers do is create the same types on both frontend and backend APIs, which makes a bad precedence of duplicated code.\n\nThis problem is solved by using a mono repository.\n\nManaged by nx.dev tools - now extending TypeScript types from the Backend or creating them from scratch can be done in a single shared library between your Angular app and ExpressJs Backend.\n\n## ExpressJs Server integrated with Payload CMS\n\nWe get all the benefits of a monorepository.\n\nExpressJs is tightly integrated with PayloadCMS, but you can still add your own routes, outside of Payload.\n\nWe believe in TypeScript, hence everything is based on TypeScript.\n\n# Connect with me\n\n- [Twitter](https://twitter.com/florinmtsc)\n- [Website](https://binarycentrum.com/)\n\n# Resources\n\n- [Intro to nx](https://nx.dev/getting-started/intro)\n- [Install nx](https://nx.dev/getting-started/installation)\n- [Why nx?](https://nx.dev/getting-started/why-nx)\n- [nx: Run Tasks](https://nx.dev/core-features/run-tasks)\n- [nx: Mental Model](https://nx.dev/concepts/mental-model)\n- [pnpm commands](https://github.com/nvm-sh/nvm#usage)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinarystarter%2Fbinarystarter-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinarystarter%2Fbinarystarter-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinarystarter%2Fbinarystarter-angular/lists"}