How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?

Question

I have a fun project made with create react app. I want to convert the same application to a browser extension. This idea forces me to make the project a mono repo. Because in both applications, I will use the same components, hooks, providers, etc.

I don't want use Lerna or Yarn workspaces. And, this will be my first monorepo. I want to get start with Turborepo. However, I couldn't imagine how to make it work in a good way.

My targeted folder structure exists below

• apps/
• • app1/
• • app2/
• packages/
• • components/
• • hooks/
• • providers/
• • styles/
• package.json
• package-lock.json

I will import monorepo dependencies from packages folder into apps exists in apps folder.

For instance;

import { useExampleHook } from '@projectname/hooks'
import { ExampleComponent } from '@projectname/components'

If you have another solution besides Turborepo, don't hesitate to let me know. NPM workspaces is an acceptable solution as well. But, turborepo has the priority due to better performance.

Thanks in advance for your time and answer

Answer 1

Turborepo has great explanation on how to do it, right in their docs.

In short: Turborepo is considered to be a taskrunner. So, it is added as a development dependency to your existing project.

npm install turbo -D

The only thing you should watch out tho is the turbo tasks itself. So, you will have to tweak your start scripts and pipelines.