jpmorganchase / Modular

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.

Commands

yarn create modular-react-app <project-name>

Bootstraps a new project, configured to use Yarn workspaces.

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

yarn modular add <path/to/package>

Adds a new package by creating a new workspace at packages/path/to/package. 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.

yarn modular start <path/to/package>

Runs react-scripts start against the selected app.

yarn modular test

Runs jest against the entire modular project.

yarn modular build <path/to/package>

Runs react-scripts build against the selected app.

Config

modular/setupEnvironment.ts

This contains the setup for tests corresponding to jest.config.js#setupFiles.

modular/setupTests.ts

This contains the setup for tests corresponding to jest.config.js#setupFilesAfterEnv.

package.json#modular

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

"root"

This type identifies the root of the project.

"view"

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.

"app"

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

"package"

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