Home

Monorepo web app

This structure is a suggestion when one needs to manage:

• multiple projects with same ui (admin, site, landpage)
• or one app that can be divided in multiple react apps as an admin (user/dashboard/...) if this app is huge and it doesn't matter the refresh between pages

Installation

Inside the root folder run

$ yarn install

Addd new project/lib

1. Create the react project (or ts project) and add inside the root package.json the namespace

  "workspaces": [
    ...
    "shared/components",
    "{NEW_FOLDER_PATH}"
  ]

2. Inside the new folder add inside the specific package eg. NEW_FOLDER_PATH/package.json the project with scope and also the main path:

{
  "name": "@monorepo/{NEW_PROJECT_NAME}",
  "version": "0.1.0",
  "main": "./src/index.ts",
  ...

Run any project command typing yarn workspace @monorepo/{project_name} {command}:

$ yarn workspace @monorepo/customer start
$ yarn workspace @monorepo/customer cypress open

Open each project folder to focus only in one project

|
|_ customer -> drag'n drop this folder into IDEA
|_ planner  -> or this folder
|_ shared -> or this folder
   |_ helper -> or this folder
   |_ components -> or this folder