{"id":20794839,"url":"https://github.com/code-star/nx-reference","last_synced_at":"2025-06-12T23:03:31.866Z","repository":{"id":91341653,"uuid":"382250507","full_name":"code-star/nx-reference","owner":"code-star","description":"Example Nx monorepo for reference","archived":false,"fork":false,"pushed_at":"2022-04-15T11:51:01.000Z","size":12604,"stargazers_count":3,"open_issues_count":6,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-12T01:32:57.088Z","etag":null,"topics":["atomic-design","monorepo","nx","storybookjs"],"latest_commit_sha":null,"homepage":"https://code-star.github.io/nx-reference/","language":"TypeScript","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/code-star.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-02T06:20:23.000Z","updated_at":"2024-11-29T21:24:32.000Z","dependencies_parsed_at":"2023-03-13T17:47:48.601Z","dependency_job_id":null,"html_url":"https://github.com/code-star/nx-reference","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/code-star/nx-reference","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fnx-reference","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fnx-reference/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fnx-reference/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fnx-reference/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-star","download_url":"https://codeload.github.com/code-star/nx-reference/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-star%2Fnx-reference/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259546413,"owners_count":22874560,"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":["atomic-design","monorepo","nx","storybookjs"],"created_at":"2024-11-17T16:18:18.495Z","updated_at":"2025-06-12T23:03:31.843Z","avatar_url":"https://github.com/code-star.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nx Atomic Design Reference Project\n\nA reference example monorepo with [Nx](https://nx.dev) + [Storybook](https://storybook.js.org) + [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) in [Angular](https://angular.io/)\n\nMade by [Codestar](https://code-star.github.io) powered by [Ordina](https://www.ordina.nl)\n\nFor more info see the [Intro](https://code-star.github.io/nx-reference/?path=/story/introduction--page)\n\n# Running\n\n- Run storybook: `yarn docs:json \u0026\u0026 yarn nx storybook` (does nx run demo:storybook) or `nx run ui:storybook`.\nSo modify apps/demo/.storybook/main.js to also include libs/ui and then use `yarn nx storybook`\n- Also run `yarn nx serve server` in a separate terminal\n- To build storybook run: `yarn nx run demo:build-storybook`\n- Run lint on all projects: `yarn nx run-many --all --target=lint` (with `yarn nx lint` only the default project is linted)\n\n\n# Steps taken\n\nyarn import\nrm package-lock.json\nyarn add --dev @nrwl/storybook\nyarn nx g @nrwl/angular:storybook-configuration demo\nyarn nx g @nrwl/angular:lib ui\nyarn nx g @nrwl/angular:storybook-configuration ui\nyarn nx g @nrwl/angular:component button --project=ui --export\nyarn nx g @nrwl/angular:stories --name=ui\nyarn nx g @nrwl/angular:component LoadingButton --project=ui --export\nyarn nx g @nrwl/angular:stories --name=ui\n\n## Back-end\n\nyarn add -D @nrwl/express\nyarn add cors\nyarn add -D @types/cors\nyarn nx g @nrwl/express:application server\nyarn nx g @nrwl/node:library btc\nyarn nx g service BtcRate\nNote that modules (e.g. HttpClientModule or UiModule) need to be added to both app.module.ts and app.component.stories.ts\n\nyarn nx g @nrwl/workspace:lib shared/types\nyarn nx g @nrwl/angular:lib shared/services\nyarn nx g @nrwl/angular:service Message --project=shared-services --export\nmanually export from services/lib/index.ts\nyarn nx g @nrwl/angular:lib shared/data-access\nyarn nx g @nrwl/angular:service btcRate/BtcRate --project=shared-data-access --export\nmanually export from data-access/lib/index.ts\nyarn nx g @nrwl/angular:service MinimalLogger --project=shared-types --export\nyarn nx g @nrwl/angular:component Alert --project=ui --export\n\n## Adding docs in Storybook\n\nhttps://github.com/storybookjs/storybook/blob/master/addons/docs/angular/README.md\n\n```\nyarn add -D @compodoc/compodoc\n```\n\nAdd to package.json: \"docs:json\": \"compodoc -p ./tsconfig.base.json -e json -d .\" \n\n```\nyarn docs:json // TODO this now needs to be run manually after each type change, then also storybook needs to be restarted\n```\n\nNo stories generated because there were no components declared in /libs/ui/src/lib/ui.module.ts.\nHint: you can always generate stories later with the 'nx generate @nrwl/angular:stories --name=ui' command\n\n## MFE\n\nTarget:\n\n- React: 1 field, current balance\n- Ng: more complex: portfolio, transactions, graph of balance over time (and use UI lib components in this MicroApp)\n\nFrom https://nx.dev/l/a/guides/setup-mfe-with-angular\n\n- This document explains that webpack 5 is required. After upgrading to the newest version of nx, and running `yarn why webpack` gives both webpack 4 and some special packages that end in webpack5. Let's try the recommended steps. \n- yarn nx g @nrwl/angular:app dashboard --mfe --mfeType=host --routing=true\n- yarn nx g @nrwl/angular:app login --mfe --mfeType=remote --port=4201 --host=dashboard --routing=true\n- seems to work, stash results\n- yarn nx g mv --project demo demoOld\n- yarn nx g mv --project demo-e2e demo-e2eOld\n- yarn nx g @nrwl/angular:app demo --mfe --mfeType=host --routing=true\n- yarn nx run demo:serve-mfe\n- Update the content of apps/demo/src/app/* with apps/demoOld/src/app/*, same with .storybook files\n- yarn nx g rm demoOld and reset the default project in in nx.json to demo\n- yarn nx g @nrwl/angular:app portfolio --mfe --mfeType=remote --port=4201 --host=demo --routing=true\n- test only portfolio, by running `yarn nx run portfolio:serve`\n- test only shell app: `yarn nx run demo:serve:development`\n- test integration, run `yarn nx run demo:serve-mfe` which will start both servers, view on http://localhost:4200/nx-reference-shell\n\n# Original Nx documentation\n\nThis project was generated using [Nx](https://nx.dev).\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\" width=\"450\"\u003e\u003c/p\u003e\n\n[Nx Documentation](https://nx.dev/angular)\n\n[10-minute video showing all Nx features](https://nx.dev/angular/getting-started/what-is-nx)\n\n[Interactive Tutorial](https://nx.dev/angular/tutorial/01-create-application)\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- [Angular](https://angular.io)\n  - `ng add @nrwl/angular`\n- [React](https://reactjs.org)\n  - `ng add @nrwl/react`\n- Web (no framework frontends)\n  - `ng add @nrwl/web`\n- [Nest](https://nestjs.com)\n  - `ng add @nrwl/nest`\n- [Express](https://expressjs.com)\n  - `ng add @nrwl/express`\n- [Node](https://nodejs.org)\n  - `ng add @nrwl/node`\n\nThere are also many [community plugins](https://nx.dev/nx-community) you could add.\n\n## Generate an application\n\nRun `ng g @nrwl/angular: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 `ng g @nrwl/angular: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 `@star/mylib`.\n\n## Development server\n\nRun `ng 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 `ng g component my-component --project=my-app` to generate a new component.\n\n## Build\n\nRun `ng 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 `ng 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 `ng 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 dep-graph` to see a diagram of the dependencies of your projects.\n\n## Further help\n\nVisit the [Nx Documentation](https://nx.dev/angular) to learn more.\n\n\n\n\n\n\n## ☁ Nx Cloud\n\n### Computation Memoization in the Cloud\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-cloud-card.png\"\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-star%2Fnx-reference","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-star%2Fnx-reference","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-star%2Fnx-reference/lists"}