Greetings everyone! Just as usual there is a video version of this article that you can check out step by step to get you up and running with a monorepo for Create React App! :D
A little introduction, I was tasked with converting a monorepo with 2 create react apps in them. Even though this was a monorepo, code could not be shared between different application, and create react app is pretty stubborn to just make it work out of the box. So I scoured the internet looking near and far for a article or someone that would help me with little to no luck. I had to read 8 different articles to gets bits and pieces from each article to find out how to get the simple task of getting multiple create react apps to share code between each other. So I hope this article helps you right out of the box!
What tools do you need to make this work?
First you need two create react apps, second you need craco(create-react-app-config-ovveride). I found using craco much easier than react-app-rewired.
Also we will be using lerna and yarn workspaces to help manage the monorepo.
Lets run a few commands and get started!
npx lerna init
This will setup lerna in your workspace. Why lerna even though we are using yarn workspaces? Well lerna comes out of the box with really helpful cli commands that run processes in parallel, I think in combination with yarn workspaces it makes things super powerful.
lerna.json file to look like below
This will tell lerna to use the yarn as the client and
useWorkspaces for yarn. If you don’t have a
package.json file created you will need to do a
yarn init -y . If you have one created modify it to look like this below
You can add whatever name you like, the important bits are
"private": true and
Now we have all that setup lets get our apps ready, from both the
components folder run
npx create-react-app --template typescript and in the top level folder where the
lerna.json file is run
yarn add -W craco . Again, craco will be key in helping us share components.
Once the two apps are installed
app/components change the names in the
package.json file to something you will use to reference the apps. In my case I chose
This is what your
package.json file should look like. The important fields are highlighted. Make sure when you’re adding your other repo as a dependency, make sure you are also adding the correct version that is declared in the
components packacge.json file. Also notice how we replaced
Last thing we need to do to make everything work is creating a
craco.config.jsfile in the
app directory. In this file we will specific how we want webpack to behave when we reference files inside our
If you have setup your own wepack configuration before this should make sense to you. Essentially we are just extracting the
babel-loader config and telling
One last thing, in your root folder I would run
yarn lerna bootstrap this will bootstrap all apps to the root node_modules folder so other repos can make use of it.
HURRAY YOU ARE FINISHED!!!! 🎊🎊🎊
All you need to do now is to create components in your
components folder and pull them from you
app folder. In my example I created a button in the components folder.
One thing to note is that I set a property in the package.json file to be
"main": "./src/index.tsx This will be the entry point for whichever app is referencing the components directory.
Now lets look at how
app is consuming the Button
As you can see, we are referencing the other app by the name we set in the
We have learned how to setup our create-react-apps to work in a monorepo type of setup and this was huge for my project because two apps could share common components which removed discrepancies between the two applications!
- **Github code can be found here***