Monorepo containing setup for a best-practice React application 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.
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
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.
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.
// webpack.config.js
module.exports = defaultConfig => {
return {
...defaultConfig,
stats: false,
};
};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"
]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>Make sure you have Lerna installed.
npm i -g lerna
lerna bootstrapThis is a monorepo with all packages needed for a successful React Application scaffolding.
lerna add some-package --scope @modus/moreYou can use the same command to add monorepo packages to one another (similar to npm link)
lerna add @modus/eslint-config-modus --scope @modus/moreThis 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.
The project is currently published to Modus internal npm repo https://npm.modus.app. This will change once we have a stable project.
lerna publishTake 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 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.
This project is MIT licensed.