DEV Community

Cover image for React Monorepo Setup Tutorial with pnpm and Vite: React project + UI, Utils
SeongKuk Han
SeongKuk Han

Posted on

React Monorepo Setup Tutorial with pnpm and Vite: React project + UI, Utils

Last evening, I found an error on the docs of chakra-ui, which I have recently been using on my personal project. I forked the project and I tried to find the error. The project was set up as a monorepo and it looked very intriguing because I wanted to try to set up a monorepo someday. I even wrote it down on my todo list, but I didn't have an opportunity where I needed to set up a monorepo. Anyway, I didn't find the error and went to bed. I woke up a couple of hours late. I was supposed to sleep. It was three in the morning. But I couldn't fall asleep again from thinking of the mono repo structure. After some minutes, I just got out of bed and started to work on setting up the mono repo using pnpm.

What I wanted to implement are the following:

  • Creating two packages for UI components and Util functions that can be used from a separate React project.
  • Creating a React project and using the two packages in the React project.
  • Running testing for each project.
  • Installing all dependencies, running the dev server, and testing for each workspace from the root directory.

As implementing those things is the main goal for this mono repo, common configurations, package.json, and small details were not considered.

There might be many things you should consider in the real world, and that could be also different depending on various factors.

I will be writing this post following the steps:

  1. Root project
  2. website
  3. packages/utils
  4. packages/ui
  5. Using packages on the website
  6. Wrap up

Additionally, I have recorded the process and uploaded it on my youtube channel. Since I started this channel to practice speaking English, considering my English proficiency, some I said might not sound unnatural. But still, I suggest watching the video if you would like to see the process in more detail. It's a very pure no-edit video where you can see all I did to set up a mono repo, like what I searched for, what problems I encountered, and how I solved them from scratch.

Okay, let's get started!


Root project

1. Create a folder and initialize pnpm



> mkdir monorepo
> cd monorepo
> pnpm init


Enter fullscreen mode Exit fullscreen mode

2. Create pnpm-workspace.yaml file and set up the workspace paths



packages:
  - 'packages/*'
  - 'website'


Enter fullscreen mode Exit fullscreen mode

website

1. Set up a React project using Vite



> pnpm create vite


Enter fullscreen mode Exit fullscreen mode

pnpm create vite output in the terminal

2. Install packages



> pnpm install


Enter fullscreen mode Exit fullscreen mode

Install the dependencies from the root directory.

pnpm install output

pnpm-lock.yaml and the contents

It will detect the workspaces and create a pnpm-lock.yaml in the root directory. In the lock file, dependencies are written under the package name website.

3. Add a script to run the dev server from the root directory



//...
"scripts": {
  "dev": "pnpm --filter website dev"
},
//...


Enter fullscreen mode Exit fullscreen mode

Add a script into the package.json file of the root directory.

The --filter option allows us to execute a script under the website workspace.

4. Run the dev command to see if the dev server is sucessfully started with the command



> pnpm run dev


Enter fullscreen mode Exit fullscreen mode

Vite project initial page

Open the http://localhost:5173, and you will see the initial page.


packages/utils

1. Create the utils directory under the packages.



> mkdir -p packages/utils


Enter fullscreen mode Exit fullscreen mode

2. Create package.json



{
  "name": "@mono/utils",
  "version": "0.0.1",
  "main": "src/index.ts",
  "scripts": {
  }
}


Enter fullscreen mode Exit fullscreen mode

The package has been renamed with @mono/utils and set the main file path.

3. Set up typescript environment



> pnpm install -D typescript --filter utils
> pnpm exec tsc --init


Enter fullscreen mode Exit fullscreen mode

4. Create a function in a file

add function in the calc file

Don't forget to export the function from the index.ts.

5. Set up vitest and write test code



>  pnpm install -D vitest --filter utils


Enter fullscreen mode Exit fullscreen mode

[packages/utils/src/calc.test.ts]



import { test, expect } from 'vitest';
import { add } from './calc';

test('add(10, 20) should return 30', () => {
  expect(add(10, 20)).toBe(30);
});


Enter fullscreen mode Exit fullscreen mode

6. Add a test script in the package.json files.

[packages/utils/package.json]



{
//...
  "scripts": {
    "test": "vitest run"
  },
//...
}


Enter fullscreen mode Exit fullscreen mode

[package.json]



{
//...
  "scripts": {
    "dev": "pnpm --filter website dev",
    "test:all": "pnpm -r test"
  },
//...
}


Enter fullscreen mode Exit fullscreen mode

The -r option will execute the test command for each workspace.

7. Test



> pnpm run test:all


Enter fullscreen mode Exit fullscreen mode

test:all command output


packages/ui

1. Set up the ui package using Vite.



> cd packages
> pnpm create vite


Enter fullscreen mode Exit fullscreen mode

create a react project using vite

As the ui package was created by Vite, unnecessary files that you may not need to implement UI components will come with it together. I used Vite to set it up quickly though, you can set the ui package up by yourself. That would be more appropriate as you can install specific dependencies and configures you need.

2. Delete unnecessary files

  • All the files under the src dir
  • index.html
  • public dir

UI dir structure after deleting all the unnecessary files

3. Install dependencies



> pnpm install


Enter fullscreen mode Exit fullscreen mode

output from a command pnpm install

4. Create a component

[packages/ui/src/Button.tsx]



import { ComponentProps } from "react";

const Button = (props: ComponentProps<'button'>) => {
  return (
    <button {...props} />
  )
}

export default Button;


Enter fullscreen mode Exit fullscreen mode

[packages/ui/src/index.ts]



export { default as Button } from './Button';


Enter fullscreen mode Exit fullscreen mode

5. Set up test environment with vitest and react-testing-library.



> pnpm add -D --filter ui @testing-library/jest-dom vitest jsdom @testing-library/react


Enter fullscreen mode Exit fullscreen mode

[packages/ui/vitest.config.ts]



import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react-swc';

export default defineConfig(({ mode }) => ({
  plugins: [react()],
  resolve: {
    conditions: mode === 'test' ? ['browser'] : [],
  },
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest-setup.js'],
  },
}));


Enter fullscreen mode Exit fullscreen mode

[packages/ui/vitest-setup.js]



import '@testing-library/jest-dom/vitest';


Enter fullscreen mode Exit fullscreen mode

[packages/ui/tsconfig.json]



{
//...
    "types": ["@testing-library/jest-dom"],
//...
}


Enter fullscreen mode Exit fullscreen mode

import '@testing-library/jest-dom/vitest'; from the vitest-setup.js enables you to use jest-dom functions such as toBeInDocument with vitest.

Additionally, to see the proper types, you should add the jest-dom type in the types field.

6. Write test code

[src/packages/ui/Button.test.tsx]



import { test, expect} from 'vitest';
import { render, screen} from '@testing-library/react'
import Button from './Button';

test('Button shuold be rendered', () => {
  render(<Button>Hello</Button>);

  expect(screen.getByText(/Hello/)).toBeInTheDocument();
});


Enter fullscreen mode Exit fullscreen mode

7. Add a test script

[src/packages/ui/package.json]



{
  "name": "@mono/ui",
  "main": "src/index.ts",
//...
  "scripts": {
    "test": "vitest run"
  },
//...
}


Enter fullscreen mode Exit fullscreen mode

The package has been renamed with @mono/ui and set the main file path.

8. Run test:all

the result of the test:all command


Using packages on the website

1. Add dependencies in package.json

[website/package.json]



{
//...
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@mono/ui": "workspace:*",
    "@mono/utils": "workspace:*"
  },
//...
}


Enter fullscreen mode Exit fullscreen mode

2. Install dependencies



pnpm install


Enter fullscreen mode Exit fullscreen mode

3. Write code

[website/src/App.tsx]



import { ChangeEvent, useState } from 'react'
import { Button } from '@mono/ui';
import { add } from '@mono/utils';

function App() {
  const [nums, setNums] = useState({
   a: '',
   b: '', 
  })

  const handleNumChange = (key: keyof typeof nums) => (e: ChangeEvent<HTMLInputElement>) => {
    setNums(prevNums => ({
      ...prevNums,
      [key]: e.target.value,
    }));
  };


  return (
    <div>
      <input type='text' value={nums.a} onChange={handleNumChange('a')} />
      <input type='text' value={nums.b} onChange={handleNumChange('b')} />
      <Button onClick={() => {
        alert(add(Number(nums.a), Number(nums.b)));
      }}>Add</Button>
    </div>
  )
}

export default App


Enter fullscreen mode Exit fullscreen mode

4. Result

Result


Wrap up

Explore some mono repos, you will get an idea of how you should set your project. husky, common setting of tsconfig file, etc, there are many things you can set up with and also you need to consider such as versioning, dependencies, and so on.

I hope you found it helpful and Happy Coding!


Full Source Code

Top comments (7)

Collapse
 
vitya profile image
Victor Kasap

Great article!
Thank you šŸ™

Collapse
 
lico profile image
SeongKuk Han

I'm glad you found it helpful. Thank you šŸ‘

Collapse
 
vitya profile image
Victor Kasap

Do you plan to do a post here about implementing husky and lint-staged in such monorepos?

Thread Thread
 
lico profile image
SeongKuk Han

I didn't plan for the next post yet. Implementing husky and lint-staged sounds good! Thank you for your suggestion. It may take some time for the post since there is something I have been working on. I will mention your user id in the post. Thanks šŸ‘

Thread Thread
 
vitya profile image
Victor Kasap

That is cool.
Thank you šŸ˜ŠšŸ™

Collapse
 
nathan_ofzion_ddc0e4fb243 profile image
Nathan Ofzion

This great we are working on a Open source react.js nxt js Mono repo to called zig3v3 dev.to/nathan_ofzion_ddc0e4fb243/z...

Would love your input in your vote šŸ™šŸ½

Collapse
 
lico profile image
SeongKuk Han

That's great! I hit the star to the repo. I will take a look later. I'd be glad if I could give any help! Thanks šŸ‘