{"id":22105610,"url":"https://github.com/btmpl/nx-poc","last_synced_at":"2025-03-24T02:47:46.800Z","repository":{"id":144082925,"uuid":"410966583","full_name":"BTMPL/nx-poc","owner":"BTMPL","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-27T16:49:59.000Z","size":617,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T09:13:58.409Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/BTMPL.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-09-27T16:46:49.000Z","updated_at":"2021-09-28T11:20:35.000Z","dependencies_parsed_at":"2023-05-26T06:16:00.604Z","dependency_job_id":null,"html_url":"https://github.com/BTMPL/nx-poc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Fnx-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Fnx-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Fnx-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BTMPL%2Fnx-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BTMPL","download_url":"https://codeload.github.com/BTMPL/nx-poc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245200680,"owners_count":20576673,"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":[],"created_at":"2024-12-01T06:47:39.772Z","updated_at":"2025-03-24T02:47:46.780Z","avatar_url":"https://github.com/BTMPL.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Monorepo setup\n\nThis project attempts to demonstrate the following:\n\n- monorepo setup\n- microfrontend integration\n- \"shared\" service used to pass data between applications\n- updating the router from outside of Angular context\n\nThe technology used is Angular and [NX](https://nx.dev).\n\n## Installation\n\nTo install the project use `npm`:\n\n```\nnpm install\n```\n\nThis should install all the needed tooling. You can opt into installing `nx` package globally, or invoke it with `npx` by calling `npx nx ....`\n\n## Contents\n\nThe project consists of the following:\n\n### applications\n\n#### app-one and app-two\n\nStandard Angular applications. The `app-one` application additionally imports the shared `UserService` library.\n\n#### appthree\n\nA Angular application with an exposed `webpack.config.js` file which allows it to implement the [Angular module federation](https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/) mechanism in order to allow itself to be loaded by the shell application\n\nSee [this article](https://nx.dev/l/a/guides/setup-mfe-with-angular) for more information on how to setup module federation inside nx workspace app.\n\nPlease note the name of the module should be alpha-numeric only as otherwise webpack / tsc will report errors and prevent you from bundling the entry point.\n\n#### scp\n\nThis is the \"shell\" of the application, used to load and orchestrate all the other applications. It will use hash routing to load iframes for `app-one` and `app-two` as well as consume `appthree` as a federated module.\n\nThe application comes with an exposed `webpack.config.js` file which allows it to resolve the federated module.\n\n### libraries\n\n#### ui\n\nA barebones UI library providing the `poc-button` component. It also comes configured with a storybook setup. The library module (`UiModule`) is consumed by the shell (`scp`) application.\n\n#### services\n\nA example Angular services library providing the `UserService` to expose a very simple demo of a login / logout function with the mechanism used to help propagate the data between both federated and iframe-embeded applications.\n\nPlease see the comments in the service for more info on implementation details.\n\n## Starting the project\n\nYou can start all the applications manually:\n\n```\n// run the \"application 1\"\nnx run app-one:serve --port=3002\n\n// run the \"application 2\"\nnx run app-two:serve --port=3001\n\n// run the \"application 3\", expose the remote entry point\nnx run appthree:serve --port=4201\n\n// run the \"shell application\"\nnx run scp:serve --port=4200\n```\n\nor start all of them with a single command:\n\n```\nnpm run dev\n```\n\n## Additional tools\n\nThe project comes preconfigured with a storybook:\n\n```\nnx run ui:storybook\n```\n\nand the default nx dependency grapher:\n\n```\nnx dep-graph\n```\n\nPlease note you will need to restart the dependency grapher if you add/remove applications and libraries to the project as it will not reflect added/removed content on the fly. Any connections between existing content will be shown without the need to restart.\n\n## Not covered\n\n### shared state\n\nThe `UserService` uses local storage to synchronize data across both federated modules and applications loaded as iframe. If we were to only support module federation, we could update the code so that single service instance is created and the data is \"just shared\" - see [\"Issues with Sharing Code and Data\"](https://www.angulararchitects.io/aktuelles/pitfalls-with-module-federation-and-angular/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtmpl%2Fnx-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbtmpl%2Fnx-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtmpl%2Fnx-poc/lists"}