Modus React (MORe) Application Scaffolding

Monorepo containing setup for a best-practice React application scaffolding

Goal: 0-config Best-Practice React Scaffolding

The goal of Modus-React (MORe) is to enable teams to use best-practice React scaffolding without having to worry about the config.

Although influenced by Create-React-App (CRA), this setup is different in a way that it gives more flexibility in some areas and takes away in others in an effort to promote healthy architectural patterns.

CRA is notorious for making it hard add customizations to Webpack or Babel without ejecting. MORe exposes configuration files to make it easier to extend.

MORe encourages specific design patterns that are enterprise-friendly. We discourage using hip new libraries in favor of proven industry-standard techniques.

Installing

npm i @modus/babel-preset-react @modus/eslint-config-modus @modus/more --registry=https://npm.modus.app/

or shorter

npm i @modus/{babel-preset-react,eslint-config-modus,more} --registry=https://npm.modus.app/

Then use sample project as a basis for setting up package.json, .eslintrc.yml, and babel.config.js.

TODO: use modus CLI to do that automatically

Using

ENV variables

You can use environment variables to configure build scripts.

Here's the list of supported variables with their defaults:

SOURCE_DIR=src
BUILD_DIR=build
SOURCEMAPS=false

You can override any of these variables with .env files. We support these formats (in the order of inclusion):

.env.${NODE_ENV}.local
.env.${NODE_ENV}
.env.local
.env

The order of inclusion means that anything in .env will override content in e.g. .env.development.local.

Extending Webpack

MORe processes a built in Webpack configuration. If your project has a webpack.config.js file in root, the build process will include it and pass the default config to it.

Make sure your configuration exports a function. The default configuration will be passed as an JavaScript object to the argument.

Example:

// webpack.config.js

module.exports = defaultConfig => {
  return {
    ...defaultConfig,
    stats: false,
  };
};

DLLs

DLLs precompile libraries to save time for development builds and re-builds.

React and React Router are included in DLLs by default. You can add other libraries by including them in package.json as an array in the dll property.

"dll": [
  "foo"
]

HTML Template

Use TEMPLATE environmental variable to specify custom HTML template relative to the project root.

HTML templates can consume variables. Variables are defined in meta property of the project's package.json.

"meta": {
  "title": "My App"
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title><%= title %></title>
  </head>
  <body></body>
</html>

Development

Make sure you have Lerna installed.

npm i -g lerna
lerna bootstrap

This is a monorepo with all packages needed for a successful React Application scaffolding.

Adding dependencies

lerna add some-package --scope @modus/more

You can use the same command to add monorepo packages to one another (similar to npm link)

lerna add @modus/eslint-config-modus --scope @modus/more

Type safety

This project uses JSDoc annotations to provide type information in JS files via TypeScript. This works extremely well with VS Code, adds Intellisense, and doesn't require a build step.

See the official docs for more information.

Publishing

The project is currently published to Modus internal npm repo https://npm.modus.app. This will change once we have a stable project.

lerna publish

Contributing

Take a look at the project board and see if there's anything you can help with. Once you find an item you could work on, please take ownership of the backlog item.

Create a fork
Create a WIP PR asap and reference (e.g. #4) the backlog item you're working on.
Complete work and tag reviewers
Let us know in Slack when you start and finish or when you need any help

Modus Create

Modus Create is a digital product consultancy. We use a distributed team of the best talent in the world to offer a full suite of digital product design-build services; ranging from consumer facing apps, to digital migration, to agile development training, and business transformation.

This project is part of Modus Labs.

Licensing

This project is MIT licensed.

isabella232 / modus-react Goto Github PK

modus-react's Introduction