Monorepo with Turborepo

manoryanir

yanir manor

Posted on December 20, 2021

Monorepo with Turborepo

I will show you how you can use monorepo Turborepo with pnpm for a high-performance build system in your local and continuous integration builds.

First, we need to create the root directory.
then we will generate npm package json by -

pnpm init -y

now we need to create pnpm-workspace.yaml file.
pnpm-workspace.yaml defines the root of the workspace and enables you to include / exclude directories from the workspace.
In our example, we will have 2 projects first is a remix application and the other lib via vite.

packages:
  - application
  - lib
Enter fullscreen mode Exit fullscreen mode

now we can add Turborepo

pnpm i -Dw turbo

The -w flag is for workspace (or --workspace-root)
Also, we need to install pnpm in the root.
we need to add turbo section in the root package json file.
This is the definition of the pipeline.
you can set caching and how tasks are related according to npm package scripts like build lint test.

"turbo": {
    "pipeline": {
      "dev": {
        "cache": false
      },
      "build": {
        "dependsOn": [
          "^build"
        ],
        "outputs": [
          "build/**",
          "dist/**"
        ]
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

Also, we can add the npm script for monorepo.

"scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  }
Enter fullscreen mode Exit fullscreen mode

After this setup, we will create two folders.
application and lib.
run

pnpx init vite@latest

set folder to be lib.
run

pnpx create-remix@latest

set folder to be application.
then go to the root folder and run

pnpm i -r

will install node_modules for both projects.

we can use vite to create a library that we can use inside the remix application.
inside

vite.config.js

we will add this section.
For more information please read Building for Production Library mode | Vite (vitejs.dev)

build: {
    lib: {
      entry: "./src/index.js",
      formats: ["cjs", "es"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react-dom"],
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

We can create a simple component.

Image description

Then create an index.js file in the src folder.

export { default as Card } from "./components/Card"

inside the package json of the vite lib, we need to add

  "main": "./dist/index.cjs.js",
  "module": "./dist/index.esm.js",
Enter fullscreen mode Exit fullscreen mode

Finally we need to build it by running

pnpm run build

For using this component inside the Remix app.
go to package json of remix and add this line inside the dependencies property

"lib": "workspace:*"

.
Then go to the root of the monorepo and

pnpm i

Image description

For running all the applications in the monorepo side by side

pnpm run dev

Image description

It all works with caching and monorepo.
You will be able to publish your application quickly and smartly with high speed.
Link to github:
https://github.com/yanirmanor/mono-turbo-example

💖 💪 🙅 🚩
manoryanir
yanir manor

Posted on December 20, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Monorepo with Turborepo
monorepo Monorepo with Turborepo

December 20, 2021