CODEWITHSUNDEEP
reactjsreact-nativeexpomonorepoturborepo
Julius
Julius

Reputation: 41

Using Expo React Native in Monorepo without Yarn

I have been trying to setup a monorepo using turborepo. I want to have a Nextjs application along with a React Native application (using Expo).

I have come as far as getting everything to work using yarn and it's no-hoist options as well as expo-yarn-workspaces. You can see my repo here: https://github.com/juliusmarminge/turbo-expo-next-starter. This is my first monorepo so not sure if it follows conventions by any means.

The issue I'm getting into is I don't want to be forced to use Yarn, especially since pnpm is getting more popular and I use it for most my other projects. Has anyone any experience in using Expo in a monorepo without using Yarn? Feels like all examples online is using it...

Thanks in advance, Julius

Upvotes: 3

Views: 1101

Answers (2)

Emad Younan
Emad Younan

Reputation: 97

I was struggling with such setup in my project, until successfully solved it.

Here is steps to follow:

Install pnpm globally
npm install -g pnpm@latest-10
Go to your root directory that you will use as monorepo, and create your workspace
touch pnpm-workspace.yaml
It should look like this:
packages:
  - backend
  - frontend
  - mobile
  - shared
Create your root package.json
{
  "name": "@mono/root",
  "version": "1.0.0",
  "author": "emadunan",
  "private": true,
  "workspaces": [
    "backend",
    "frontend",
    "mobile",
    "shared"
  ],
  "scripts": {
    "clean": "find ./ -name node_modules -type d -exec rm -rf {} +",
    "dev": "pnpm run dev:backend & pnpm run dev:frontend & pnpm run dev:shared",
    "dev:backend": "pnpm --filter @mono/backend run start:dev",
    "dev:frontend": "pnpm --filter @mono/frontend run dev",
    "dev:mobile": "pnpm --filter @mono/mobile run start",
    "dev:shared": "pnpm --filter @mono/shared run watch"
  },
  "license": "ISC",
  "devDependencies": {},
  "dependenciesMeta": {
    "react": {
      "injected": true
    },
    "react-dom": {
      "injected": true
    }
  }
}
Run clean-up before your new setup
pnpm run clean
rm -f pnpm-lock.yaml
pnpm store prune
Configure pnpm in your root directory, this will create .npmrc with node-linker=hoisted in the root directory
pnpm config set node-linker=hoisted --location project
Install dependencies from root directory
pnpm install

Run your applications and eveything should work fine as it did with me!!

pnpm --filter mobile run start
pnpm --filter frontend run dev
pnpm --filter backend run dev
pnpm --filter shared run watch

Upvotes: 0

David V
David V

Reputation: 9

You can use it with pnpm AND get-workspaces (from yarn) to update your metro.config.js and to resolve node_modules.

Upvotes: -2

Related Questions