Setting up a monorepo with Vite, Typescript, and pnpm workspaces
Tags: vite, typescript, monorepos, react
Published: 2023-02-28 12:48:30

Monorepos are hot these days and it can significantly improve the development workflow and productivity among teams. In this article, we will talk about how to set up a monorepo with Vite, Typescript, and pnpm workspaces.

## What is a monorepo?

Before we jump into the setup, we first need to understand what is a monorepo and why should we care about it.

Monorepo is a repository that contains many distinct projects which are somewhat dependent on each other but they are logically independent and different teams can work on them in isolation.

Let's consider an example where we are building an application and we have two projects inside of it:

1. Shared: This will have all our shared components that can be used by different projects.

2. Main: This is going to be our main project which will be the consumer of our `Shared` package.

One way to work with this type of project is a multi-repo approach where we create two separate repositories and host them at the npm registry. Then the consumer app can install it from the npm registry and use it how we import and use `React`, `Tailwind`, `Material-UI` and other packages.

The problem with this type of workflow is every time we will make any new changes to the `shared` package, we will have to publish the app again to the npm registry for the consumer app to get the latest changes and use them.

Monorepos can significantly improve this workflow by packaging both of these projects into a single repository and importing components directly from the workspace instead of importing them from the cloud.

## Setup with pnpm workspaces

Now that we have an idea about what monorepos are and what problems they solve, let's dive right into the setup and see how we can set up a basic monorepo with `pnpm workspaces`.

> To follow along you must have `pnpm` and `node` installed in your machine.

### Scaffold a new project

The first thing that we need to do for our setup is, create a new project which we will call "pnpm-monorepo" you can of course name it whatever you want to.

```
mkdir pnpm-monorepo

```

Then let's go inside the root of our project and initialize a `package.json` file.

```
# pnpm monorepo
pnpm init

```

At this point, you should have a basic `package.json` at the root of your project with somewhat similar code as follows:

```
// pnpm-monorepo/package.json
{
  "name": "pnpm-monorepo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

```

Now, let's install some of our root-level dependencies that we are going to use across the project.

```
# pnpm-monorepo
pnpm add -D typescript typescript-node

```

Once the common dependencies are installed let's create our base Typescript configuration with the following code:

```
// pnpm-monorepo/tsconfig.base.json
{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "jsx": "react-jsx",
    "moduleResolution": "node"
  }
}

```

This is the default Typescript configuration that I have written for my project you can customize it based on your project's requirements.

Next, we will create our `tsconfig.json` file which will extend our `tsconfig.base.json`

```
// pnpm-monorepo/tsconfig.json
{
  "extends": "./tsconfig.base.json"
}

```

That's all we need for our Typescript configuration.

Now let's create a `pnpm-workspace.yaml` file at the root of our project that will tell `pnpm` what packages we will have inside our monorepo.

> `pnpm-workspace` makes it surprisingly easier to add and manage multiple packages in a project.

```
# pnpm-monrepo/pnpm-workspace.yaml
packages:
  - "./packages/**"

```

We can add as many packages as we want to `pnpm-workspace.yaml` by adding the relative path of the packages in this file, for our project we are adding our `packages` directory and all of its child directories to the workspace.

Now we will create both of our `main` and `shared` packages that we discussed above inside the `packages` directory. Our `main` project will be a `Vite` application and the `shared` project will have some shared code that we will use inside our main app.

### Create a Vite application

Let's first create the packages directory at the root level.

```
# pnpm-monorepo
mkdir packages

```

Now we will create our `main` app inside of the packages directory which will be a `Vite` application. To do that navigate inside `pnpm-monorepo/packages` and run:

```
# pnpm-monorepo/packages
pnpm create vite

```

I am using React & Typescript but the following steps should work irrespective of which framework/library you select.

Now let's create our second package in the packages directory, we will call it `shared.`

```
# pnpm-monorepo/packages
mkdir shared

```

At this point, your project's structure should look somewhat similar to this:

![screenshot showing how the project structure should look at this point](https://cdn.hashnode.com/res/hashnode/image/upload/v1674382264463/9f62ed86-eb62-4abc-a5fe-8c891fe57862.png)

We have our packages directory and inside it, we have our `main` and `shared` packages.

Let's now go inside our `main` package and change the following in `package.json`

```
// pnpm-monorepo/packages/main/package.json
{
"name": "@pnpm-monorepo/main"
...
}

```

For `pnpm` to properly identify that this package is part of our workspace, we need to change the name property of the package to `@root-name/package-name` . In this case, our root name is `pnpm-monorepo` .

Now let's go inside our `shared` package and do the same but first, we need to create a `package.json` file inside of it.

```
# pnpm-monorepo/packages/shared
pnpm init

```

This will create a `package.json` file inside our `shared` package, now let's change the following:

```
// pnpm-monorepo/packages/second/package.json
{
    "name": "@pnpm-monorepo/shared"
}

```

That's it for the configuration part, now we should be able to import packages from the workspace similar to how we do for other npm packages.

Let's create a `index.ts` file inside our `shared` package with the following code:

```
// pnpm-monorepo/packages/shared/index.ts
export const sayHi = (userName: string) => console.log(`Hi ${userName}`)

```

We have a basic `sayHi` function which takes a `userName` as parameter and console log a message saying "Hi" to them.

Now let's go inside our `main` package and import our `shared` package by running this command:

```
# pnpm-monorepo/packages/main
pnpm add @pnpm-monorepo/shared

```

According to `pnpm` docs, if we do `pnpm add` within a workspace, it first tries to find that package within the workspace, and only if it is unable to find the package within the workspace it goes to the npm registry to install it.

As we already have `@pnpm-monorepo/shared` within our workspace, it will install it from the workspace itself.

At this point your `package.json` inside you `main` app should look something like this:

```
// pnpm-monorepo/packages/main/package.json
{
...
"dependencies": {
    "@pnpm-monorepo/shared": "workspace:^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
...
}

```

That's it, now we should be able to import variables/functions from our `shared` package.

Let's go inside our `main/App.tsx` and add the following code:

```
// pnpm-monorepo/packages/main/App.tsx
import { sayHi } from "@pnpm-monorepo/shared";

const App = () => {
  sayHi("Vedansh");
  return <h1>Main app</h1>;
};
export default App;

```

Run `pnpm install` and `pnpm dev` inside `main` app, a new dev server should spin up and you should see the following output at your [http://localhost:5173](http://localhost:5173/):

![screenshot of localhost](https://cdn.hashnode.com/res/hashnode/image/upload/v1674383920164/3ba5cda0-6818-4d52-9990-d89e71494384.png)

So that's it, this was our very basic monorepo setup with pnpm-workspaces, Vite, and Typescript. Monorepos is a great solution for large-scale applications where you don't want to manage multiple repositories for multiple packages and instead you want to package all of them together into one repository.

If you want the complete code of this project you can find it [here](https://github.com/imvedanshmehra/pnpm-monorepo).

Thank you for reading, if you are still here consider following me for more blogs. You can also connect with me on [Twitter](https://twitter.com/imvedanshmehra) and [LinkedIn](https://www.linkedin.com/in/vedanshmehra/) where I keep sharing regular content related to web development and Javascript.