(he/him)

@AtilaFassina

What are Monorepos?

a single repository containing multiple distinct projects, with well-defined relationships.

--

@AtilaFassina

🧠

Brain as Monorepo

πŸ‡ͺπŸ‡Έ

@AtilaFassina

🧠

Missing Packages

πŸ₯Š

🍺

πŸ₯±

@AtilaFassina

🧭 Module Resolution

πŸ— Build Orchestration

⏱ CI Times

πŸͺ₯Chores, Chores, Chores...

πŸ‘ Versioning

@AtilaFassina

Module Resolution

🧠

πŸ‡ͺπŸ‡Έ

πŸ‡§πŸ‡·

@AtilaFassina

Latin

Same dependency

πŸ‡ͺπŸ‡Έ

πŸ‡§πŸ‡·

🧠

@AtilaFassina

Tapas

Different Versions

πŸ‡ͺπŸ‡Έ

πŸ‡§πŸ‡·

🧠

@AtilaFassina

πŸ‡ͺπŸ‡Έ

πŸ‡§πŸ‡·

Tapas

@AtilaFassina

πŸ‡ͺπŸ‡Έ

πŸ‡§πŸ‡·

🧠

tapa
vAggressive
tapa
vFood

Versions

@AtilaFassina

🧠

tapas
vAggressive

ΒΏQuieres unsΒ  Β  Β  Β  Β  Β  Β  Β  Β  ?

tapas

πŸ™‚

πŸ‡ͺπŸ‡Έ

Bad Module Resolution

Β‘Noooo!

@AtilaFassina

Package Pipeline

πŸ” Statical Analysis

🧱 Build

πŸ“ Tests

πŸ‘Ύ Integration Tests

β›΄ Ship

@AtilaFassina

Interdependencies

@AtilaFassina

All Tests

All Builds

All Linters

@AtilaFassina

depends on
time

@AtilaFassina

MAKE

PARALLEL

THINGS

@AtilaFassina

depends
time
on
build
build

@AtilaFassina

time

🏁

🏁

CI Times

@AtilaFassina

Hygiene Tasks

πŸͺ₯ Changelogs

πŸͺ₯ Dependency Updates

πŸͺ₯ Version Bumps

πŸͺ₯ Releases and Publishing

@AtilaFassina

GOOD

NEWS

TIME

@AtilaFassina

🧭 Module Resolution

πŸ— Build Orchestration

πŸͺ₯Hygiene Tasks

🧭

setup

once

for

every

project

πŸ€—

@AtilaFassina

START

SHARING

@AtilaFassina

How?

@AtilaFassina

🀝 Peer Dependency Management

🍱 Hard Disk Efficiency

πŸ“¦ Fast Installs

πŸ‘» Reliable Module Resolution

@AtilaFassina

🎻 Pipeline Orchestration

☁️ Remote Caching

πŸƒ Task Runner

@AtilaFassina

πŸ“  Changelog Generation

πŸ€– Automated

🀐 Versioning without Opinions

@AtilaFassina

🧼 Pull Request Maintenance

πŸ€– Automated

⏫ Dependency Update

@AtilaFassina

@AtilaFassina

Release, Changelog, Publishing, Dependency Updates

Fast-Refresh and Hot-Reloading for Remix and Next.js

🧼

ESM and CJS export for packages

βš›οΈ

🎁

Ready to go: Β 

πŸ₯‘

@AtilaFassina

const withTM = require("next-transpile-modules")()

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = withTM(nextConfig)

@AtilaFassina

const INTERNAL_ESM_PACKAGES = ["ui"]
const PACKAGES_PATHS = ["../../packages/ui"]

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverBuildTarget: "vercel",
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",

  watchPaths: PACKAGES_PATHS,

  serverDependenciesToBundle:
    process.env.NODE_ENV === "development" ? [...INTERNAL_ESM_PACKAGES] : [],
}

@AtilaFassina

{
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
  "scripts": {
    "build": "tsup src/index.tsx --format cjs,esm --dts"
  }
 }

@AtilaFassina

{
  "dependencies": {
    "ui": "workspace:^"
  },
  "devDependencies": {
    "eslint-config-custom": "workspace:*"
  }
 }

Consuming

@AtilaFassina

{
  $schema: "https://docs.renovatebot.com/renovate-schema.json",
  labels: ["dependencies"],
  extends: ["config:base"],
  packageRules: [
    {
      matchUpdateTypes: ["minor", "patch", "pin", "digest"],
      labels: ["automerge", "dependencies"],
    },
  ],
}

Renovate

@AtilaFassina

version = 1

[merge]
automerge_label = "automerge"

[merge.automerge_dependencies]
versions = ["minor", "patch"]
usernames = ["renovate"]

[update]
ignored_usernames = ["renovate"]

Kodiak

@AtilaFassina

@AtilaFassina

Β‘Gracias!

Monorepos Today

By Atila

Monorepos Today

  • 527