[object Object]

How to create a Monorepo in React using Yarn Workspaces with Example?


A monorepo is a software development strategy where multiple projects or applications are stored in a single repository. It allows multiple teams to collaborate on different parts of a project while maintaining a consistent codebase. Yarn Workspaces is a popular package manager that makes it easy to manage dependencies across multiple packages in a monorepo. In this blog post, we will discuss how to create a monorepo in React using Yarn Workspaces, and provide an example of how it can be implemented.

Creating a Monorepo in React using Yarn Workspaces

  1. First, create a new directory for your monorepo and initialize a new Yarn project.
mkdir my-monorepo
cd my-monorepo
yarn init -y
  1. Next, create two folders in the root directory of your monorepo: packages and apps. These folders will contain your shared packages and applications, respectively.
mkdir packages apps
  1. Create a new React application in the apps folder using create-react-app.
cd apps
npx create-react-app my-app
  1. Install Yarn Workspaces in the root directory of your monorepo.
cd ..
yarn add -D yarn-workspaces
  1. In the package.json file, add the following configuration:
"private": true,
"workspaces": [

This tells Yarn to manage the packages and applications in the packages and apps folders.

  1. Create a new folder in the packages directory for your shared package.
cd packages
mkdir my-package
  1. Initialize a new Yarn project in the my-package folder.
cd my-package
yarn init -y
  1. Create a new file called index.js in the my-package folder and export a function.
// index.js
export const myFunction = () => {
  console.log('Hello from my package!');
  1. In the my-app React application, import and use the myFunction function from my-package.
// App.js
import { myFunction } from '@my-monorepo/my-package';

function App() {
  useEffect(() => {
  }, []);

  return (
    <div className="App">
      <h1>Hello from my React app!</h1>

export default App;
  1. Finally, start the React application.
cd ../apps/my-app
yarn start


In this example, we created a monorepo with a shared package (my-package) and a React application (my-app). We then imported a function from my-package into my-app and used it in the App component.


Creating a monorepo in React using Yarn Workspaces can be a powerful way to manage multiple projects or applications. By using a single repository and managing dependencies with Yarn, it is easier to share code and collaborate across teams. We hope this example has been helpful in understanding how to create a monorepo in React using Yarn Workspaces.

← Go home