Monorepo created for React, React Native, Common Module, Modular React Native packages.
- React Project
- React Native Project
- Common Module shared between React and React Native
- React Native Modules shared with Core React Native App (Modular Approach)
First step is to create Yarn Workspaces for the Core Applications and Modules used between them.
npm init -y
On the package.json
file,
- Set the Monorepo name
- Setup the Workspace: (React, React-Native should be set as no hoist as the dependencies may vary)
"workspaces": {
"packages": [
"packages/*"
],
"nohoist": [
"**/react",
"**/react/**",
"**/react-dom",
"**/react-dom/**",
"**/react-native",
"**/react-native/**"
]
}
Create the Core Apps and modules under the packages folder. Each module should contain its own build script.
- Describe the package name in the
package.json
. Ex:"@monorepo/common"
- Declare
main, typings, build scripts
. - On the other module or Core app to consume the packages, declare the package name in
package.json
under the dependencies. Ex:"@monorepo/common": "*",
- Add the
peerDependencies
as required by the modules, which can exist in the Core App. - Note: React Native requires additional settings for Monorepo setup, can make use of
react-native-monorepo-tools
Once the Workspace setup is complete, setup the Lerna, to make build process easier for all the modules.
Note: All modules should contain a build script in its own package.json
npx lerna@latest init
Add the following line to lerna.json
"useNx": true,
Add the following line to the project root, package.json
"build:modules": "npx lerna run build"
Once the Lerna setup is complete, setup Nx to enable caching of the build process and Distributed caching via Nx Cloud.
npx add-nx-to-monorepo
Select the caching steps, and enter dist
as the output folder.
Add the following line to the project root, package.json
"graph": "npx nx graph"