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