Setting Up Monorepo With Create React App

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
mkdir packages/app
mkdir packages/components

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.
Modify your lerna.json file to look like below

lerna.json

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

package.json

You can add whatever name you like, the important bits are "private": true and "workspaces"

Now we have all that setup lets get our apps ready, from both the app and 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 @tdotcode/app and @tdotcode/components .

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 react-scripts with craco .

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 components folder.

craco.config.js

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 babel-loader to transpile code that is coming from our components directory. If we do not do this the our browser will load the files as is which is something JavaScript will not be able to parse.

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.

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 package.json file.

Conclusion

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***
• https://github.com/floydjones1/monorepo-cra