You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[](https://moduscreate.com)
8
+
9
+
## Goal: 0-config Best-Practice React Scaffolding
10
+
11
+
The goal of Modus-React (MORe) is to enable teams to use best-practice React scaffolding without having to worry about the config.
12
+
13
+
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.
14
+
15
+
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.
16
+
17
+
MORe encourages specific design patterns that are enterprise-friendly. We discourage using hip new libraries in favor of proven industry-standard techniques.
18
+
19
+
## Installing
6
20
7
21
```bash
8
22
npm i @modus/babel-preset-react @modus/eslint-config-modus @modus/more --registry=https://npm.modus.app/
@@ -12,6 +26,8 @@ Then use [sample project](../sample) as a basis for setting up `package.json`, `
12
26
13
27
**TODO:** use `modus` CLI to do that automatically
14
28
29
+
## Using
30
+
15
31
### ENV variables
16
32
17
33
You can use environment variables to configure build scripts.
@@ -35,6 +51,25 @@ You can override any of these variables with `.env` files. We support these form
35
51
36
52
The order of inclusion means that anything in `.env` will override content in e.g. `.env.development.local`.
37
53
54
+
### Extending Webpack
55
+
56
+
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.
57
+
58
+
Make sure your configuration exports a function. The default configuration will be passed as an JavaScript object to the argument.
59
+
60
+
##### Example:
61
+
62
+
```js
63
+
// webpack.config.js
64
+
65
+
module.exports=defaultConfig=> {
66
+
return {
67
+
...defaultConfig,
68
+
stats:false,
69
+
};
70
+
};
71
+
```
72
+
38
73
### DLLs
39
74
40
75
DLLs precompile libraries to save time for development builds and re-builds.
@@ -69,3 +104,57 @@ HTML templates can consume variables. Variables are defined in `meta` property o
69
104
<body></body>
70
105
</html>
71
106
```
107
+
108
+
## Development
109
+
110
+
Make sure you have Lerna installed.
111
+
112
+
```sh
113
+
npm i -g lerna
114
+
lerna bootstrap
115
+
```
116
+
117
+
This is a monorepo with all packages needed for a successful React Application scaffolding.
118
+
119
+
### Adding dependencies
120
+
121
+
```sh
122
+
lerna add some-package --scope @modus/more
123
+
```
124
+
125
+
You can use the same command to add monorepo packages to one another (similar to `npm link`)
The project is currently published to Modus internal npm repo [https://npm.modus.app](https://npm.modus.app). This will change once we have a stable project.
134
+
135
+
```sh
136
+
lerna publish
137
+
```
138
+
139
+
## Contributing
140
+
141
+
Take a look at the [project board](https://github.com/ModusCreateOrg/modus-react/projects/1) 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.
142
+
143
+
1. Create a fork
144
+
2. Create a WIP PR asap and reference (e.g. #4) the backlog item you're working on.
145
+
3. Complete work and tag reviewers
146
+
4. Let us know in Slack when you start and finish or when you need any help
147
+
148
+
# Modus Create
149
+
150
+
[Modus Create](https://moduscreate.com) 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.
0 commit comments