Dominic Fallows's multichannel app for web, mobile web and mobile native
A monorepo for Dominic Fallows's multichannel app for web, mobile web and mobile native.
What is a monorepo
In revision control systems, a monorepo (syllabic abbreviation of monolithic repository) is a software development strategy where code for many projects are stored in the same repository.
How this monorepo works
We have a custom monorepo setup that is operated using root Yarn run scripts (this project operates from the root, not the individual package folders).
- React DOM imports Shared packages via Yarn Link
- React Native imports Shared packages using a custom script that starts React Native with
yarn link/symlink like support
We can't use other existing monorepo tools - see Why we don't use Yarn Workspaces, Lerna or TypeScript Project References
packages/ # mobile/ # React Native with TypeScript # mobile-web/ # Gatsby SPWA with TypeScript and React Native for Web shared/ content/ # Shared content (markdown, text, images etc) for web and mobile helpers/ # Shared helpers for web and mobile interfaces/ # Shared interfaces for web and mobile styles/ # Shared styles for web and mobile # shared-native/ # Shared React Native components shared-web/ components/ # Shared React components for web contexts/ # Shared React contexts for web styles/ # Shared styles for web web/ # Gatsby SPWa with TypeScript and React DOM scripts/ # Monorepo scripts triggered by Yarn commands
How to develop
Make sure you are in the root of the project.
yarn install command from the root of the project.
Then you can run a package script from the table below.
At the moment we can only run one package script at-a-time, however each command starts multiple package processes as required.
- TODO: enable running of multiple commands without conflicting package processes.
By running the commands for the web package, we also run the required commands for each dependency package, so you don't need to run those independently.
||Prepares the web and dependency packages for development and build||web, shared, shared-web|
||Develop the web package||web, shared, shared-web|
||Build the web package||web, shared, shared-web|
||Serve the built the web package||web, shared, shared-web|
Shared (web and mobile)
||Prepares the shared package for development and build||shared|
||Develop the shared package||shared|
||Prepares the shared-web and dependency packages for development and build||shared, shared-web|
||Develop the shared-web package||shared, shared-web|
Why we don't use Yarn Workspaces, Lerna or TypeScript Project References
Because we use both TypeScript and multiple different frameworks across the packages, we are prevented from using other monorepo tools:
- React Native and React DOM both have their own conflicting TypeScript Definitions - which prevents use of Yarn Workspaces and Lerna
- Gatsby compiles TypeScript using @babel/preset-typescript - which prevents use of more recent TypeScript monorepo support, like TypeScript Project References