How to work with monorepos

How to work with monorepos

This course tracker is a full-stack app. It uses Express and MongoDB on the server side, and React on the client side. We could have had two separate repository for each side, but opted for a monorepo--one repository with separate folders for server-side and client-side code. The monorepo set-up mirrors the 100Devs developer team. It promotes transparency, speed, and inclusion.

Rationale

Everyone can see all the code for the whole app. This makes it easier to ballpark how far the project has come overall, and what areas still need more work or attention.

Both sides share tools, like linters and hooks. These dependencies live in the root directory, and run before all git commits and pushes. The settings stay uniform across both folders. Dependencies specific to server-side code or client-side code are installed in those folders, and are managed with their own package.json files.

Both sides also share scripts. Without the monorepo, we would need to run yarn install in the server and client folders/repositories separately. To run the full app, we'd need to cd into the server folder, and run npm start. Then in another terminal, we'd need to cd into the client folder and run npm start there. Yarn Workspaces allows us to consolidate these steps.

Yarn Workspaces

Installing yarn

Assuming npm is installed, run npm i -g yarn. Check that it installed correctly by running yarn --version. Windows users may also need to run npm i -g symlink.

Installing the app

These lines are from the root directory's package.json:

"workspaces": [
    "packages/*"
]

The packages folder contains the subfolders client and server. When we run yarn install from the root directory, the workspaces feature also handles the installation for the client and server subfolders.

Scripts

Here are the scripts in the root directory's package.json:

"scripts": {
    "client": "yarn --cwd packages/client start",
    "build": "yarn --cwd packages/client build",
    "server": "yarn --cwd packages/server dev",
    "start": "yarn --cwd packages/server start",    
    "dev": "run-p client server",
    "format": "prettier --write \"**/*.{js,jsx}\"",
    "lint": "eslint \"**/*.{js,jsx}\" --quiet",
    "lint:fix": "eslint \"**/*.{js,jsx}\" --fix"
  },

Any scripts beginning with yarn --cwd (current working directory) let us run a script from a different folder's package.json file. For example, "yarn --cwd packages/client start" lets us run the start script in the packages/client folder's package.json file. We can do this by running yarn client from the root directory.

The yarn dev script will run the client and server scripts in parallel (run-p) from the root directory's own package.json.