Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/tarsisexistence/monoreact

📦 React workspaces implementation
https://github.com/tarsisexistence/monoreact

cli cli-app command-line-interface create-react-app microfrontend monorepo monorepos monorepository react react-app react-applications react-boilerplate react-starter rollup rollupjs typescript typescript-library workspace workspaces yarn

Last synced: about 2 months ago
JSON representation

📦 React workspaces implementation

Awesome Lists containing this project

README 

        
### What is it



This is an advanced workspace implementation for React projects.



**Monoreact** includes the following features:



- develop regular react apps

- scaffold React projects

- build JavaScript, TypeScript, React libraries

- implement monorepos, workspaces, submodules

- workspace, submodules management

- efficient bundling (rollup)

- workspace dependency awareness (topological sorting)







### What problems does it solve



- [microfrontend](https://martinfowler.com/articles/micro-frontends.html)

- [monolithic repository, monorepo](https://www.perforce.com/blog/vcs/what-monorepo)

- [workspaces](https://www.smashingmagazine.com/2019/07/yarn-workspaces-organize-project-codebase-pro/)

- [submodules](https://chrisjean.com/git-submodules-adding-using-removing-and-updating/)







### Motivation



The primary motivation was not to be tied to existing solutions of vendors, so as not to get into vendor lock.



Nevertheless, I recommend considering alternative solutions:



- [nx/react](https://nx.dev/react) - a super powerful tool that can do everything, but turned out to be redundant for me because of vendor lock.

- [lerna](https://github.com/lerna/lerna) - completely threw this idea away with existing yarn workspaces and git submodules scripts.

- [tsdx](https://github.com/jaredpalmer/tsdx) - a great solution but for narrow tasks.







### What can it do now



- scaffold and build React applications with [create-react-app](https://create-react-app.dev/)

- bundle packages with [rollup](https://rollupjs.org/guide/en/)

- use advanced CLI [monoreact](https://github.com/tarsinzer/monoreact/tree/master/cli)

- save your time with [typescript](https://www.typescriptlang.org/) (with the option not to use it)

- symlinking [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces)

- enjoy configured testing ([jest](https://jestjs.io/)), formatting ([prettier](https://prettier.io/)), linting ([eslint](https://eslint.org/) + [stylelint](https://stylelint.io/)), git hooks ([husky](https://github.com/typicode/husky) + [lint-staged](https://github.com/okonet/lint-staged))







### Powerful CLI



Built-in documentation. Type in the console `monoreact --help` to see information about all possible commands and `monoreact [command] --help` their description.



The following options are now available:



#### Scaffolding



- **new**. Creates a container/host/shell application. This is the initial scaffolding of the entire application.

- **generate** a new package (submodule): basic, react. Monoreact creates a distribution of responsibility. Not all packages must deal with react components. Sometimes you want to build plain JavaScript/TypeScript libraries.

- **add** a new feature (available options: docz, playground (run packages locally inside the package workspace)). Monoreact allows you to not generate components with all the things that may not necessarily need in each package.



#### Execution



- **build** and **watch** your package with a modern rollup module bundler. Rollup is the best choice for building independent libraries due to efficient tree-shaking and fast compilation.

- **test** and **lint** your package with Jest and eslint. These built-in packages are crucial for increasing and maintaining the quality of built libraries.

- **install** dependencies. This option provides workspace dependency management. If you are running **install** inside some package, it'll add these dependencies as "peer" and add them to the root.



#### Submodules



It is quite challenging for managing git submodules. You have to perform many actions to make a simple task happen, and this is what scares people off from using submodules. In turn, Monoreact offers user-friendly control through commands, which increases understanding and speed of interaction with git submodules.



- **checkout**

- **fetch**

- **init**

- **pull**



#### Workspaces



Monoreact offers a much efficient alternative to the "yarn workspaces". It analyzes your dependencies between workspaces and runs them in the desired sequence and in parallel, when necessary and appropriate.



- **watch** (parallel)

- **build** (parallel)

- **test**

- **lint**



#### Migration



This section is responsible for scripts that will help to adapt the basic state of the package to the desired one.



- **detach**. Detach your package from the workspace. Just in case you plan to use the package as a submodule to run it independently outside the host workspace.







### Contributing



Check out [contributing guideline](https://github.com/tarsinzer/monoreact/blob/master/CONTRIBUTING.md) to familiarize yourself with the general rules of the project, as well as to figure out how to bootstrap the project and make changes correctly.







### License



This project is [MIT](https://choosealicense.com/licenses/mit/) licensed.