Add initial monorepo template #778

jaredpalmer · 2020-07-19T22:17:04Z

This is a working monorepo template with tsdx.

I didn't bother with changing tsdx create yet. I will leave that work for others.

This template bootstraps a minimally viable monorepo project with 2 packages @mono/react and @mono/utils as well as an example playground. It's all powered by lerna, yarn workspaces, and tsdx. It has a similar workflow to regular tsdx: the example live reloads when changes are made to any package <package>/src/* folder that triggers a rebuild.

The onboarding for this template is more involved as we need to generate nested package.json's in addition to the root one. However, I'm comfortable with shipping this ASAP but telling users to search and replace @mono with @yourname until we integrate it more deeply into the create command.

Lastly, I think we will also want to add another few of templates to tsdx for packages within monorepos that assumes this core project structure.

Note: this is slightly different from multi-output #367. We still need that too. My idea is that this works today, and we can ship it. I'm already using this exact setup at work.

kylemh

One simplification could be to just have 2 root-level tsconfigs and one top-level .prettierrc

You may wanna mark this PR as resolves: #122

Good work! I've also got: https://github.com/AirLabsTeam/air-core FWIW

kylemh · 2020-07-20T04:25:59Z

templates/monorepo/.gitignore

+dist
+compiled
+*.log
+coverage
+.DS_Store
+next.d.ts
+legacy.d.ts
+.idea
+*.orig
+
+node_modules
+package-lock.json
+yarn.lock
+!/yarn.lock
+
+website/translated_docs
+website/build
+website/yarn.lock
+website/node_modules
+website/i18n
+!website/yarn.lock
+
+.vercel
+.yalc
+yalc.lock


Would you need to do **/X to some of these?

templates/monorepo/package.json

agilgur5 · 2020-07-20T17:00:30Z

Thanks for working on this Jared! This is top 3 or top 2 most-requested features and the only one I have no WIP for or much experience with.

I started reviewing this morning, will try to finish later tonight after work.

You may wanna mark this PR as resolves: #122

@kylemh per #122 (comment), without the tsdx create bit we shouldn't mark that one as resolved just yet. This should fix #275 though

The onboarding for this template is more involved as we need to generate nested package.json's in addition to the root one. However, I'm comfortable with shipping this ASAP but telling users to search and replace @mono with @yourname until we integrate it more deeply into the create command.

@jaredpalmer Agreed. I would say we might want to title the template as wip-monorepo instead, but as it's not integrated with tsdx create yet it's kind of WIP by definition and requires that manual step.

Lastly, I think we will also want to add another few of templates to tsdx for packages within monorepos that assumes this core project structure.

I was thinking we'd modify create to detect that it's in a monorepo (needed for #419 and #755 anyway) and alter the the output automatically based on that, but I'm not sure how involved that may be

Note: this is slightly different from multi-output #367. We still need that too.

Yes, multi-entry is very different; that's for multiple entries within one package. E.g. a component library like MUI or a utility library like Lodash, or, per my comments there, the two use-cases I already use it for, polyfill + ponyfill (window-resizeto, window-resizeto/polyfill) and library + built-in plugins (mst-persist, mst-persist/transforms). The recent #751 also goes over a difference between the two.

agilgur5

Ok, here's a first pass. Still need to dive a bit into the README but otherwise have gone through almost everything with a lens.

Sorry that the comments are a bit scattered in terms of order as I made them throughout multiple days, GitHub doesn't let you sort them 😕

Main issues are around inconsistency with existing templates and tsconfig options that don't work with TSDX.

templates/monorepo/tsconfig.build.json

templates/monorepo/.gitignore

templates/monorepo/README.md

templates/monorepo/packages/utils/tsconfig.build.json

templates/monorepo/tsconfig.build.json

agilgur5 · 2020-07-24T07:08:53Z

templates/monorepo/lerna.json

+  "registry": "https://registry.npmjs.org/",
+  "publishConfig": {
+    "access": "public"
+  },


are these necessary? I believe these are the defaults

not for scoped packages

agilgur5 · 2020-07-24T07:11:24Z

templates/monorepo/README.md

+
+Unlike other TSDX templates, the developer experience for this template is currently a bit more manual.
+
+Your first order of business will be to search and replace `@mono` for the npm organization of your own.


Also need to change author/username and LICENSE file. And description of packages, though that one's a given since the other templates don't do that either.

Lerna syncs the license from root prior to publishing for each package. lerna/lerna@5863564

agilgur5 · 2020-07-24T07:14:53Z

templates/monorepo/packages/react/package.json

+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },


Suggested change

"peerDependencies": {

"react": "^16.8.0",

"react-dom": "^16.8.0"

},

"peerDependencies": {

"react": ">=16",

},

Let's keep this consistent with the React templates

Oof I didn't realize this was still there. Packages that use hooks actually need to specify React as peer dep as "react": "^16.8.0" (when hooks were introduced). We should discuss in another issue tho as we will need to change the other templates too

agilgur5 · 2020-07-24T07:17:46Z

templates/monorepo/packages/react/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@mono/react",
+  "version": "0.0.0",


Suggested change

"version": "0.0.0",

"version": "0.0.0",

"license": "MIT",

MIT license missing. We probably want to include a LICENSE file in each package as well. NPM will automatically include any LICENSE file when publishing (similar to README.md)

Lerna copies root license into each package before publishing

Oh, does it do that for package.json.license too? Fancy

agilgur5 · 2020-07-24T07:18:17Z

templates/monorepo/packages/utils/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mono/utils",
+  "version": "0.0.0",


Suggested change

"version": "0.0.0",

"version": "0.0.0",

"license": "MIT",

MIT license missing. We probably want to include a LICENSE file in each package as well. NPM will automatically include any LICENSE file when publishing (similar to README.md)

templates/monorepo/lerna.json

templates/monorepo/README.md

nareshbhatia · 2020-07-26T19:55:18Z

@jaredpalmer, this template looks great! I am in the process of porting over a hand-crafted monorepo to this template. So far so good - only thing I am missing is Storybook. Can you please provide some pointers on how to integrate storybook? I have seen the react + storybook template, however wondering how I could leverage it in the monorepo.

kylemh · 2020-07-27T06:15:48Z

Hey @nareshbhatia maybe this repo will help?

https://github.com/AirLabsTeam/air-core

nareshbhatia · 2020-07-27T11:12:25Z

Thank you, @kylemh - awesome resource! Good to see that your setup generates a single Storybook for all the packages.

kylemh · 2020-07-27T15:14:00Z

to be fair, only one package uses it, but if more do - it's ready for that

jaredpalmer · 2020-07-28T20:34:14Z

Probably not gonna have bandwidth to push this through for a week or 2, so if others want to jump on in and get this out feel free

nareshbhatia · 2020-08-11T17:14:30Z

@jaredpalmer, @kylemh - thanks for all your help. I have now successfully migrated a substantial monorepo to tsdx. Would love to have you take a quick glance and provide feedback.

The repo is here and the live Storybook is here. This repo essentially provides wrapper components over Material-UI and Formik. Also bunch of helper functions for date & time, http, web etc.

Some of the key challenges I solved were:

A single Storybook encompassing multiple packages
Replaced 'tsdx lint' with my own shareable eslint config

known-as-bmf · 2020-08-15T21:04:35Z

I fiddled around with tsdx and monorepo and came up with this: https://github.com/known-as-bmf/store

It uses rush and pnpm. I dont think pnpm is required, rush handles npm and yarn as well.

The philosophy of rush is to isolate packages/projects as much as possible from the "outside" (no relative references to things outside the project) and to have as little conf in each package as possible.

rush cli has a lot of commands to help managing a monorepo (from dev and devops standpoint) as well, which is a plus.

Also, there is no root package wrapping everything.

Quick overview

`tools/`

Under tools there are two "internal" packages.

`toolchain`

A project that depends on tsdx and re-exposes tsdx's bin. This package will be used as a build and test tool.

It also has base configurations for tsconfig and jest.

`eslint-config-bmf`

Custom eslint presets that extends the one provided by the "rush stack".

`packages/`

These are the actual projects I need to build, test and publish. Each package has a dev dependency to toolchain & eslint-config-bmf.

Configuration in each package is limited to very small files extending the base configurations.

For example:

.eslintrc.js

// some eslint patching stuff re-exported from rush
require('eslint-config-bmf/patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: ['bmf'], // base conf from eslint-config-bmf
  parserOptions: { tsconfigRootDir: __dirname },
};

jest.config.js

module.exports = {
  preset: 'toolchain', // base conf from toolchain
};

tsconfig.json

{
  "extends": "./node_modules/toolchain/tsconfig.base.json",  // base conf from toolchain (no reference to ../tools/toolchain/...)
  "include": ["src", "test"]
}

The scripts in each package look like this:

package.json

{
  // ...
  "scripts": {
    "start": "",  // not figured that out yet 😁
    "build": "toolchain build", // basically a re-exported tsdx
    "test": "toolchain test", // basically a re-exported tsdx
    "test:coverage": "toolchain test --coverage", // basically a re-exported tsdx
    "lint": "toolchain lint" // basically a re-exported tsdx
  },
  // ...
}

Hope it helps someone.

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

OR13 · 2020-11-06T15:24:33Z

any update on this? really looking forward to something like npx tsdx create new-project --mono or similar...

timini · 2020-11-19T10:40:40Z

Will this work with yarn 2.0 berry?

jaredpalmer · 2020-11-20T17:33:51Z

@timini you can see it in action here https://github.com/jaredpalmer/tsdx-monorepo. I am pretty sure it doesn't work with it, but I haven't tested it.

rockmandash · 2021-12-26T08:57:04Z

Is there anyone know how to utilize tsdx with turborepo?
I'd want to keep numerous packages in one place and publish them all with a single command.

jaredpalmer added 3 commits July 19, 2020 17:37

Add monorepo template

2084750

Move example up to top level

eb7ff55

Add some notes about yalc

7c98c94

This comment has been minimized.

Sign in to view

jaredpalmer requested a review from agilgur5 July 19, 2020 22:17

kylemh reviewed Jul 20, 2020

View reviewed changes

kylemh mentioned this pull request Jul 20, 2020

Add a monorepo template? #122

Open

jaredpalmer added 3 commits July 20, 2020 10:24

Remove unused scripts

3b333fe

Not that only Yarn works

56a75c2

Fix react package name

49689f5

vercel bot deployed to Preview July 20, 2020 14:25 View deployment

agilgur5 added the topic: monorepo Related to Lerna monorepos label Jul 20, 2020

agilgur5 added this to the v0.13.x - Template Improvements & More milestone Jul 20, 2020

agilgur5 linked an issue Jul 20, 2020 that may be closed by this pull request

Guidance on current usage with Lerna and Yarn Workspaces? #275

Open

Add correct tsconfig for watch as well

6096e7d

vercel bot deployed to Preview July 21, 2020 17:14 View deployment

agilgur5 requested changes Jul 24, 2020

View reviewed changes

maecapozzi reviewed Jul 24, 2020

View reviewed changes

templates/monorepo/lerna.json Show resolved Hide resolved

maecapozzi reviewed Jul 24, 2020

View reviewed changes

templates/monorepo/README.md Outdated Show resolved Hide resolved

maecapozzi reviewed Jul 24, 2020

View reviewed changes

templates/monorepo/README.md Outdated Show resolved Hide resolved

OR13 mentioned this pull request Aug 11, 2020

Reduce Bundle Size transmute-industries/material-did#6

Open

agilgur5 mentioned this pull request Aug 17, 2020

Github Actions templates cache doesn't hit due to hashing bug #799

Closed

Remove target from tsconfig.build.json

4b6f445

vercel bot deployed to Preview September 11, 2020 13:57 View deployment

Remove website stuff from .gitignore

c825a88

vercel bot temporarily deployed to Preview September 11, 2020 13:58 Inactive

Update templates/monorepo/README.md

4d0bfa3

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

vercel bot deployed to Preview September 11, 2020 13:59 View deployment

Clean up tsconfigs

1597c33

vercel bot deployed to Preview September 11, 2020 14:06 View deployment

Update templates/monorepo/README.md

d761586

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

vercel bot temporarily deployed to Preview September 11, 2020 14:20 Inactive

Update templates/monorepo/README.md

155b7d2

Co-authored-by: Anton Gilgur <agilgur5@gmail.com>

vercel bot deployed to Preview September 11, 2020 14:20 View deployment

BjoernRave mentioned this pull request Sep 12, 2020

Migrate to Lerna or alternative to manage packages Errorname/prisma-multi-tenant#48

Open

Merge branch 'master' into monorepo-template

9ef4bca

vercel bot deployed to Preview September 23, 2020 17:36 View deployment

resir014 mentioned this pull request Oct 16, 2020

Replace custom Rollup setup with tsdx kata-ai/aksara-ui#294

Closed

agilgur5 added the problem: stale Issue has not been responded to in some time label Oct 22, 2020

agilgur5 modified the milestones: v0.13.x - Template Improvements & More, Future Non-breaking Oct 22, 2020

This comment has been minimized.

Sign in to view

Merge branch 'master' into monorepo-template

70058f0

vercel bot deployed to Preview November 6, 2020 16:33 View deployment

Merge branch 'master' into monorepo-template

83b1419

vercel bot deployed to Preview November 17, 2020 14:44 View deployment

OR13 mentioned this pull request Nov 17, 2020

Duplicate Reacts due to Lerna Monorepo? transmute-industries/material-did#18

Closed

jaredpalmer closed this Feb 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add initial monorepo template #778

Add initial monorepo template #778

jaredpalmer commented Jul 19, 2020 •

edited

This comment has been minimized.

kylemh left a comment

kylemh Jul 20, 2020

agilgur5 commented Jul 20, 2020 •

edited

agilgur5 left a comment

agilgur5 Jul 24, 2020

jaredpalmer Jul 24, 2020

agilgur5 Jul 24, 2020 •

edited

jaredpalmer Sep 11, 2020

agilgur5 Jul 24, 2020

jaredpalmer Sep 11, 2020

agilgur5 Jul 24, 2020

jaredpalmer Jul 24, 2020

agilgur5 Jul 24, 2020

agilgur5 Jul 24, 2020

nareshbhatia commented Jul 26, 2020

kylemh commented Jul 27, 2020

nareshbhatia commented Jul 27, 2020

kylemh commented Jul 27, 2020

jaredpalmer commented Jul 28, 2020

nareshbhatia commented Aug 11, 2020

known-as-bmf commented Aug 15, 2020 •

edited

This comment has been minimized.

OR13 commented Nov 6, 2020

timini commented Nov 19, 2020

jaredpalmer commented Nov 20, 2020

rockmandash commented Dec 26, 2021 •

edited


		Unlike other TSDX templates, the developer experience for this template is currently a bit more manual.

		Your first order of business will be to search and replace `@mono` for the npm organization of your own.

Add initial monorepo template #778

Add initial monorepo template #778

Conversation

jaredpalmer commented Jul 19, 2020 • edited

This comment has been minimized.

kylemh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agilgur5 commented Jul 20, 2020 • edited

agilgur5 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agilgur5 Jul 24, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nareshbhatia commented Jul 26, 2020

kylemh commented Jul 27, 2020

nareshbhatia commented Jul 27, 2020

kylemh commented Jul 27, 2020

jaredpalmer commented Jul 28, 2020

nareshbhatia commented Aug 11, 2020

known-as-bmf commented Aug 15, 2020 • edited

Quick overview

tools/

toolchain

eslint-config-bmf

packages/

This comment has been minimized.

OR13 commented Nov 6, 2020

timini commented Nov 19, 2020

jaredpalmer commented Nov 20, 2020

rockmandash commented Dec 26, 2021 • edited

jaredpalmer commented Jul 19, 2020 •

edited

agilgur5 commented Jul 20, 2020 •

edited

agilgur5 Jul 24, 2020 •

edited

known-as-bmf commented Aug 15, 2020 •

edited

`tools/`

`toolchain`

`eslint-config-bmf`

`packages/`

rockmandash commented Dec 26, 2021 •

edited