CODEWITHSUNDEEP
reactjscreate-react-appmonoreponpm-workspacesturborepo
cooskun
cooskun

Reputation: 678

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

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

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

Upvotes: 12

Views: 10970

Answers (2)

Vishal Haswani
Vishal Haswani

Reputation: 66

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/*"
  ],
}
  1. 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";
...
  1. 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.

Upvotes: 0

Synyshyn Kostiantyn
Synyshyn Kostiantyn

Reputation: 5

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.

Upvotes: -2

Related Questions