{"id":15382390,"url":"https://github.com/sashafirsov/react-monorepo-nx","last_synced_at":"2026-06-24T01:31:56.165Z","repository":{"id":200598020,"uuid":"705881795","full_name":"sashafirsov/react-monorepo-nx","owner":"sashafirsov","description":"Build \u0026 deploy large scale monorepo based on nx/vite with React. POC for unbundled vs bundled deploy stats comparison.","archived":false,"fork":false,"pushed_at":"2024-07-22T05:38:30.000Z","size":100862,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-11T15:14:00.683Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sashafirsov.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-16T21:59:57.000Z","updated_at":"2024-07-22T05:38:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"ecf83f85-4a55-4eeb-a9e9-5d1967b736d9","html_url":"https://github.com/sashafirsov/react-monorepo-nx","commit_stats":null,"previous_names":["sashafirsov/react-monorepo-nx"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/sashafirsov/react-monorepo-nx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sashafirsov%2Freact-monorepo-nx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sashafirsov%2Freact-monorepo-nx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sashafirsov%2Freact-monorepo-nx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sashafirsov%2Freact-monorepo-nx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sashafirsov","download_url":"https://codeload.github.com/sashafirsov/react-monorepo-nx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sashafirsov%2Freact-monorepo-nx/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34713789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10-01T14:31:43.390Z","updated_at":"2026-06-24T01:31:56.145Z","avatar_url":"https://github.com/sashafirsov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactMonorepoNx Vite + Nx monorepo \nTo evaluate and compare the bundled and unbundled builds on large codebase.\n\nBased on  [Nx](https://nx.dev/) and [ViteJs](https://vitejs.dev/) based monorepo build toolchain.\n\nIn this project only React stack is evaluated with the goal of mixing TypeScript and Rust sources and targets.\n# CDN live demo\n* [unbundled](https://cdn.xml4jquery.com/@suns/react-monorepo-nx@0.0.5/apps/frontend-esm/index.html)\n* [bundled](https://cdn.xml4jquery.com/@suns/react-monorepo-nx@0.0.5/apps/frontend/index.html)\n* [unbundled unpkg.com](https://unpkg.com/@suns/react-monorepo-nx@0.0.5/dist/apps/frontend/index.html) - unreliabe\n* [bundled unpkg.com](https://unpkg.com/@suns/react-monorepo-nx@0.0.5/dist/apps/frontend/index.html)\n\nThe page immediate dependencies load are meant only for bundle splitting samples.\n\nTo see the difference between unbundled and bundled distributions, within the `odd` or `even`, \nclick on `toggle lorem tree` to trigger the 3Mb of components loaded. \n\n# Quick start\n    yarn # will take a while as 5K source lorem files generated\n    yarn dev # to run in dev mode\n    yarn prod # run bundled production build\n    yarn esm # run unbundled CDN build\n\n\n# Directory\n* [HISTORY.md](HISTORY.md) - the history of changes.\n* [apps/apps/react-monorepo-nx](apps/react-monorepo-nx) generated by preset app\n\n## Projects\n2 main independent apps, `frontend` and `react-monorepo-nx`.\n\nApp sub-routes and ui sub-sets would include 4 big dependencies to assure the bundler would place each into separate sub-bundle.\n* `front-end` `app/frontend` as app with 2 routes (`odd`,`even`) to loaded on demand sub-apps.\n    * app/frontend/public/pdf 600 files from [@pdftron/webviewer](https://docs.apryse.com/documentation/web/get-started/react/)\n* `frontend-odd` `/app/frontend/odd` with lazy load of PdfView and 1st Lorem tree\n* `frontend-even` `/app/frontend/even` with lazy load of 2nd Lorem tree\n* `shared` `/shared` with lazy load of 3rd Lorem tree\n\n# Generated files\nTo make the files content different, the module name and [lorem ipsum generator](https://www.npmjs.com/package/lorem-ipsum) are going to be shown by the React component.\n\nThe TS build, Eslint, IDE load time performance on large monorepo is essential, hence generating the source volume during `yarn install`.\n\nThe sources are generated after `yarn` command by `postinstall` script. \n**4,370** `lorem*.ts*` files, **30Mb** generated in folders:\n* app/odd\n* app/even\n* shared\n\nTo change the number of sources and file size change environment variables\n* `LOREM_DEPTH` for dependency tree depth. `4` as default it would generate **4,370** files\n* `LOREM_PARAGRAPHS` for number of paragraphs in generated component file.\nWith `20` the average size is about 7Kb, **30Mb** total \n\nTo manual experiment change vars ^^ like\n    export LOREM_DEPTH=2; export LOREM_PARAGRAPHS=5; yarn lorem\n\n\n## Build process\nThe `yarn lorem` is executed only once with the output generated excluded from git repo. \n\nThe monorepo is ready for build and run \n    yarn test\n    yarn dev   # development run for `frontend` app\n    yarn build # prod build\n    yarn serve # run the prod build\n\n# Upgrade\n    yarn nx migrate latest\n    yarn\n    yarn nx migrate  --run-migration\n\u003chr/\u003e\n👇generated by `react-monorepo` preset\n# ReactMonorepoNx\n\n\u003ca alt=\"Nx logo\" href=\"https://nx.dev\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png\" width=\"45\"\u003e\u003c/a\u003e\n\n✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨\n\n\n## Start the app\n\nTo start the development server run `nx serve react-monorepo-nx`. Open your browser and navigate to http://localhost:4200/. Happy coding!\n\n\n## Generate code\n\nIf you happen to use Nx plugins, you can leverage code generators that might come with it.\n\nRun `nx list` to get a list of available plugins and whether they have generators. Then run `nx list \u003cplugin-name\u003e` to see what generators are available.\n\nLearn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).\n\n## Running tasks\n\nTo execute tasks with Nx use the following syntax:\n\n```\nnx \u003ctarget\u003e \u003cproject\u003e \u003c...options\u003e\n```\n\nYou can also run multiple targets:\n\n```\nnx run-many -t \u003ctarget1\u003e \u003ctarget2\u003e\n```\n\n..or add `-p` to filter specific projects\n\n```\nnx run-many -t \u003ctarget1\u003e \u003ctarget2\u003e -p \u003cproj1\u003e \u003cproj2\u003e\n```\n\nTargets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).\n\n## Want better Editor Integration?\n\nHave a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks \u0026 generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.\n\n## Ready to deploy?\n\nJust run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.\n\n## Set up CI!\n\nNx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.\n\n- [Set up remote caching](https://nx.dev/core-features/share-your-cache)\n- [Set up task distribution across multiple machines](https://nx.dev/core-features/distribute-task-execution)\n- [Learn more how to setup CI](https://nx.dev/recipes/ci)\n\n## Connect with us!\n\n- [Join the community](https://nx.dev/community)\n- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)\n- [Follow us on Twitter](https://twitter.com/nxdevtools)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsashafirsov%2Freact-monorepo-nx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsashafirsov%2Freact-monorepo-nx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsashafirsov%2Freact-monorepo-nx/lists"}