Learn Monorepo

Learn how to use monorepo with nodejs + client.
Follows https://www.youtube.com/watch?v=ACDGXHR_YmI&t=144s&ab_channel=ShawnC

Table of content

Learn Monorepo
Table of content
Quick start
Key takeaways
Steps
Installing dependencies for workspaces
Installing dependencies for root

Quick start

yarn start

Key takeaways

Uses yarn workspace

Each application would no longer have

node_modules
git repo

All of these would be referred to the root's.

Steps

Setup root

Run init with yarn
```
yarn init
```

Update ./package.json.
Refer to https://classic.yarnpkg.com/lang/en/docs/workspaces/

{
    "name": "learn-monorepo",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",

    // Mandatory, required for yarn workspace to work
    "private": true,

    // server and client would be the workspaces we'll be creating soon.
    "workspaces": [
        "server",
        "client"
    ]
}

Setup backend

Create a folder ./server where our backend would reside in.
Run init with yarn
```
yarn init
```

The name in ./server/package.json should match that of workspaces at ./package.json

./server/package.json

{
    "name": "server", // <- this...
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

./package.json

{
    "workspaces": [
        "server", // <- ...should match this
        "client"
    ]
}

Create a simple express server at ./server/index.js

Setup frontend

Create a folder ./client where our frontend would reside in.
Create react app in the dir
```
npx create-react-app .
```
Remove the git repo that's create automatically by create-react-app
```
 rm -rf .git
```

The name in ./client/package.json should match that of workspaces at ./package.json

./client/package.json

    {
        "name": "client", // <- this
        "version": "0.1.0",
        "private": true,
        ...

./package.json

    {
        "workspaces": [
            "server", 
            "client" // <- ...should match this
        ]
    }

At this point in time, the node_modules dir in client should be full of modules, pre-installed by our create-react-app command.

Installing dependencies for `server`

Run command to install dependencies for server
```
yarn workspace server add express cors
```
A node_module dir would be created in the root directory.
Also, all modules in node_modules in client would be moved out here.
From here on, all modules between server and client would be shared
Might also be a good idea to create a .gitignore to omit this node_modules

POC

At server, specify start command at ./server/package.json

{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
    "cors": "^2.8.5",
    "express": "^4.18.1"
},
+  "scripts": {
+    "start": "node index.js"
+  }
}

Start server

# cd to root first

yarn workspace server start

Start client

# cd to root first

yarn workspace client start

Installing dependencies for workspaces

Make sure workspace has a package.json

Make sure workspace is linked to root's ./package.json

    {
        "workspaces": [
            // "name" property in workspace's package.json
        ]
    }

yarn workspace < workspace name > < any other yarn commands >
e.g.
```
yarn workspace server add express
```

Installing dependencies for root

yarn -W add typescript- [Learn Monorepo](#learn-monorepo)

danielkwok21/learnMonorepo