DISCLAIMER: THIS PROJECT IS EXPERIMENTAL. ITS BEHAVIOR, AND THE BEHAVIOR OF COMMANDS, WILL LIKELY CHANGE IN THE FUTURE.

modular is a collection of tools and guidance to enable UI development at scale. It is derived from work at JP Morgan to enable development in a single repository by many teams.

It provides a modular CLI to scaffold and develop a new application from scratch, as well as commands to add and manage further modules.

It is implemented on top of create-react-app and Yarn workspaces.

Bootstraps a new project, configured to use workspaces.

This also creates a workspace named 'app' containing a fresh application written in TypeScript.

Adds a new package by creating a new workspace under packages/. Packages can currently be one of 3 types:

• A standalone application. This corresponds to a single create-react-app project in a workspace. Inside this workspace, you can import packages from other workspaces freely, and features like jsx and typechecking work out of the box.

• A View, which is a package that exports a React component by default. Views are primary, top-level components in modular. Read more about Views in this explainer.

• A typical javascript package. You can use this to create any other kind of utility, tool, or whatever your needs require you to do. As an example, you could build a node.js server inside one of these.

Runs react-scripts start against the selected app.

Runs react-scripts test against the entire modular project.

Runs react-scripts build against the selected app.

This contains the setup for tests (e.g. jest.config.js#setupFilesAfterEnv).

Unlike create-react-app which stores the setup for tests in an individual application's src/setupTests.ts we place it at the root of the project within modular/setupTests.ts where it applies to the whole project.

NOTE: This property is created automatically and is described here for reference only.

e.g.

{
  "modular": {
    "type": "root"
  }
}

The package.json#modular.type can be "root", "app", "view" or "package".

This type identifies the root of the project.

This type identifies modules that export a single React component as their default export. modular makes these modules available via a dynamically generated view map with modular-views.macro. Read more about Views in this explainer.

This type identifies a standalone application that can be started or built.

This type identifies a regular package (e.g. a library that can be used by other "view" or "app" modules). s a regular package (e.g. a library that can be used by other "view" or "app" modules).