DEV Community 👩‍💻👨‍💻

Pacharapol Withayasakpunt
Pacharapol Withayasakpunt

Posted on • Updated on

Monorepo with three subrepos for web apps

I wonder how you usually set frontend repo and web server repo? Separate repo? Single repo with web server as parent?

However, as I have found Lerna and Rest.ts / RESTyped, I have starting to adapt one monorepo with three subrepos structure...

.
├── lerna.json
├── package.json
└── packages
    ├── api-definition
    │   └── package.json
    ├── server
    │   └── package.json
    └── web
        └── package.json
Enter fullscreen mode Exit fullscreen mode

Where ./packages/web/ is created with @vue/cli.

As I also use Yarn Workspace, I adapted Lerna to use Yarn Workspace

// ./lerna.json
{
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}
Enter fullscreen mode Exit fullscreen mode
// ./package.json
{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Also, in each folder's package.json I use org-scope with

{
  "publishConfig": {
    "access": "public"
  }
}
Enter fullscreen mode Exit fullscreen mode

When I run yarn or yarn install anywhere in the workspace, it will default install to ./node_modules

Now, I can reference @org/api-definition anywhere inside both ./packages/server and ./packages/web.

Example and working repo

GitHub logo patarapolw / web-api-typescript-monorepo

Web + API + server + TypeScript + ESLint + Yarn monorepo

Now, with some questions,

  • Is using global .eslintrc.js and .eslintignore acceptable?
  • What about non-Node.js server? How would you set up the repo?

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈