Monorepo with Turborepo
Tags: monorepo, turborepo, pnpm, react
Published: 2021-12-20 12:38:53


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
```
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/**"
        ]
      }
    }
  }
```
Also, we can add the npm script for monorepo.
```
"scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  }
```
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"],
    },
  },
}
```
We can create a simple component.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czbo8d199bq38yagtbk9.png)

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",
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj9rxxudwpfbuxc5yo43.png)

For running all the applications in the monorepo side by side
``` pnpm run dev ```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwupibx1zmc9vtnpyx0e.png)

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