Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sashafirsov/react-monorepo-nx

Build & deploy large scale monorepo based on nx/vite with React. POC for unbundled vs bundled deploy stats comparison.
https://github.com/sashafirsov/react-monorepo-nx

Last synced: 3 days ago
JSON representation

Build & deploy large scale monorepo based on nx/vite with React. POC for unbundled vs bundled deploy stats comparison.

Awesome Lists containing this project

README 

        
# ReactMonorepoNx Vite + Nx monorepo 

To evaluate and compare the bundled and unbundled builds on large codebase.



Based on  [Nx](https://nx.dev/) and [ViteJs](https://vitejs.dev/) based monorepo build toolchain.



In this project only React stack is evaluated with the goal of mixing TypeScript and Rust sources and targets.

# CDN live demo

* [unbundled](https://cdn.xml4jquery.com/@suns/[email protected]/apps/frontend-esm/index.html)

* [bundled](https://cdn.xml4jquery.com/@suns/[email protected]/apps/frontend/index.html)

* [unbundled unpkg.com](https://unpkg.com/@suns/[email protected]/dist/apps/frontend/index.html) - unreliabe

* [bundled unpkg.com](https://unpkg.com/@suns/[email protected]/dist/apps/frontend/index.html)



The page immediate dependencies load are meant only for bundle splitting samples.



To see the difference between unbundled and bundled distributions, within the `odd` or `even`, 

click on `toggle lorem tree` to trigger the 3Mb of components loaded. 



# Quick start

    yarn # will take a while as 5K source lorem files generated

    yarn dev # to run in dev mode

    yarn prod # run bundled production build

    yarn esm # run unbundled CDN build



# Directory

* [HISTORY.md](HISTORY.md) - the history of changes.

* [apps/apps/react-monorepo-nx](apps/react-monorepo-nx) generated by preset app



## Projects

2 main independent apps, `frontend` and `react-monorepo-nx`.



App sub-routes and ui sub-sets would include 4 big dependencies to assure the bundler would place each into separate sub-bundle.

* `front-end` `app/frontend` as app with 2 routes (`odd`,`even`) to loaded on demand sub-apps.

    * app/frontend/public/pdf 600 files from [@pdftron/webviewer](https://docs.apryse.com/documentation/web/get-started/react/)

* `frontend-odd` `/app/frontend/odd` with lazy load of PdfView and 1st Lorem tree

* `frontend-even` `/app/frontend/even` with lazy load of 2nd Lorem tree

* `shared` `/shared` with lazy load of 3rd Lorem tree



# Generated files

To 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.



The TS build, Eslint, IDE load time performance on large monorepo is essential, hence generating the source volume during `yarn install`.



The sources are generated after `yarn` command by `postinstall` script. 

**4,370** `lorem*.ts*` files, **30Mb** generated in folders:

* app/odd

* app/even

* shared



To change the number of sources and file size change environment variables

* `LOREM_DEPTH` for dependency tree depth. `4` as default it would generate **4,370** files

* `LOREM_PARAGRAPHS` for number of paragraphs in generated component file.

With `20` the average size is about 7Kb, **30Mb** total 



To manual experiment change vars ^^ like

    export LOREM_DEPTH=2; export LOREM_PARAGRAPHS=5; yarn lorem



## Build process

The `yarn lorem` is executed only once with the output generated excluded from git repo. 



The monorepo is ready for build and run 

    yarn test

    yarn dev   # development run for `frontend` app

    yarn build # prod build

    yarn serve # run the prod build



# Upgrade

    yarn nx migrate latest

    yarn

    yarn nx migrate  --run-migration



👇generated by `react-monorepo` preset

# ReactMonorepoNx






✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨



## Start the app



To start the development server run `nx serve react-monorepo-nx`. Open your browser and navigate to http://localhost:4200/. Happy coding!



## Generate code



If you happen to use Nx plugins, you can leverage code generators that might come with it.



Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list ` to see what generators are available.



Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).



## Running tasks



To execute tasks with Nx use the following syntax:



```

nx   <...options>

```



You can also run multiple targets:



```

nx run-many -t  

```



..or add `-p` to filter specific projects



```

nx run-many -t   -p  

```



Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).



## Want better Editor Integration?



Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.



## Ready to deploy?



Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.



## Set up CI!



Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.



- [Set up remote caching](https://nx.dev/core-features/share-your-cache)

- [Set up task distribution across multiple machines](https://nx.dev/core-features/distribute-task-execution)

- [Learn more how to setup CI](https://nx.dev/recipes/ci)



## Connect with us!



- [Join the community](https://nx.dev/community)

- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)

- [Follow us on Twitter](https://twitter.com/nxdevtools)