yanir manor
Posted on December 20, 2021
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.
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
For running all the applications in the monorepo side by side
pnpm run dev
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
Posted on December 20, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.