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

Enright

Your proposed package structure looks fine. It should work fine with either NPM workspaces (NPM >=7) or yarn. I don't quite understand what the question is? Runners like turborepo sit on top of workspaces in npm / yarn etc, adding caching and convenience - they're handy but this is a small, simple monorepo so it's probably fine without it. What's stopping you just setting that up with NPM Workspaces, keep it simple, and then if build times become a nuisance and you identify a problem that needs features of turborepo like caching, add it when you need it? – Triboluminescent

NPM workspace works fine when it points different packages to different applications. The problem, you have to compile the component folder in order to make it work. My current solution is using NWB in the component package. It works but you need to run an additional command to compile it before you start one of the application. – Enright

Answer 1

TL;DR:

You can do this by using yarn workspaces to make the project a monorepo and then add turborepo to it as a dev dependency.

Steps:

1. Create a yarn workspace.
2. Configure your repositories root package.json file from step 1 as:

{
  "private": true,
  "workspaces": [
    "packages/*",
    "apps/*"
  ],
}

3. Now assuming from your example, you want to import files from packages/hooks into apps/app1, do the following:

//packages/hooks/package.json
{
  "name": "hooks", // This can also be "@projectname/hooks" if you prefer
  "version": "1.2.3",
  ...
}

//apps/app1/package.json
{
  "name": "app1",
  "version": "2.3.4",
  "dependencies": {
    "hooks": "1.2.3"  //This version here must be same as the one in hooks package.json
  }
}

// Some js file in apps/app1/...
import { useExampleHook } from "hooks";
...

4. Now if you want you should be able to install Terborepo to manage your monorepo. (Haven't personally tried this step but theoretically should work)

Tips:

• Go through the yarn workspace docs and tutorials.
• If you want to convert an existing react project into a monorepo, first transfer all your files to a folder such as root-dir/apps/app1 and then follow from step 1 inside root-dir.

Hunsinger

Answer 2

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.

Sahaptin

The docs do not reference the cross workspace import issue – Educational

Their docs do mention about using cross workspace packages turborepo.org/docs/handbook/sharing-code/internal-packages – Floyfloyd