Define the Relationship with Monorepos

The talk is now being edited and going to be available soon to multipass and full ticket holders

Registered portal users get access 15 days after and the rest 30 days after

A monorepo might sound like a big, intimidating thing, but we're going to break it down to just the bare essentials. A monorepo helps you better manage the relationships that already exist between your projects. Once we understand those relationships, we can use tools to very quickly define them and pull them together into a more cohesive whole.

This talk has been presented at React Summit US 2024, check out the latest edition of this React Conference.

monorepos

Philip Fulcher

19 Nov, 2024

Video transcription, chapters and summary will be available later.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Levelling up Monorepos with npm Workspaces

DevOps.js Conf 2022

33 min

Levelling up Monorepos with npm Workspaces

Top Content

Ruy Adorno

Open-source maintainer, Node.js contributor, npm cli team member at GitHub

NPM workspaces help manage multiple nested packages within a single top-level package, improving since the release of NPM CLI 7.0. You can easily add dependencies to workspaces and handle duplications. Running scripts and orchestration in a monorepo is made easier with NPM workspaces. The npm pkg command is useful for setting and retrieving keys and values from package.json files. NPM workspaces offer benefits compared to Lerna and future plans include better workspace linking and adding missing features.

devops monorepos npm

End the Pain: Rethinking CI for Large Monorepos

DevOps.js Conf 2024

25 min

End the Pain: Rethinking CI for Large Monorepos

Juri Strumpflohner

GDE in Web Technologies & Angular, core member of Nx

Today's Talk discusses rethinking CI in monorepos, with a focus on leveraging the implicit graph of project dependencies to optimize build times and manage complexity. The use of NX Replay and NX Agents is highlighted as a way to enhance CI efficiency by caching previous computations and distributing tasks across multiple machines. Fine-grained distribution and flakiness detection are discussed as methods to improve distribution efficiency and ensure a clean setup. Enabling distribution with NX Agents simplifies the setup process, and NX Cloud offers dynamic scaling and cost reduction. Overall, the Talk explores strategies to improve the scalability and efficiency of CI pipelines in monorepos.

ci cd monorepos

Federated Microfrontends at Scale

React Summit 2023

31 min

Federated Microfrontends at Scale

Top Content

Watch video: Federated Microfrontends at Scale

Daniel Bolivar

Cozycore Engineer

This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.

case study micro-frontends monorepos architecture

Scale Your React App without Micro-frontends

React Summit 2022

21 min

Scale Your React App without Micro-frontends

Jonathan Wagner

Tech lead and coach at Theodo UK

This Talk discusses scaling a React app without micro-frontend and the challenges of a growing codebase. Annex is introduced as a tool for smart rebuilds and computation caching. The importance of libraries in organizing code and promoting clean architecture is emphasized. The use of caching, NxCloud, and incremental build for optimization is explored. Updating dependencies and utilizing profiling tools are suggested for further performance improvements. Splitting the app into libraries and the benefits of a build system like NX are highlighted.

best practices team productivity web development devops monorepos

The Age of Monorepos

JSNation 2022

25 min

The Age of Monorepos

Miroslav Jonas

Senior engineer @ Nrwl.io

Today's Talk is about the world of monorepos, their history, benefits, and features. Monorepos address challenges in web development, such as slow build processes and unstable connections on mobile devices. Collocation in monorepos enables easy sharing of functions and components among projects. Speed and efficiency in monorepos are achieved through collocation, dependency graphs, and task orchestration. Monorepo tools like Learnr offer features such as caching and distributed task execution. Monorepos provide code sharing, consistent tooling, and automated migration, resulting in a 10x developer experience.

monorepos

Remixing Your Stack in a Monorepo Workspace

Remix Conf Europe 2022

22 min

Remixing Your Stack in a Monorepo Workspace

Juri Strumpflohner

GDE in Web Technologies & Angular, core member of Nx

Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.

react typescript fullstack monorepos

Workshops on related topic

React at Scale with Nx

React Summit 2023

145 min

React at Scale with Nx

Top Content

Featured WorkshopFree

Isaac Mann

We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component

react scalability monorepos nx react react monorepo

Node Monorepos with Nx

Node Congress 2023

160 min

Node Monorepos with Nx

Top Content

WorkshopFree

Isaac Mann

Multiple apis and multiple teams all in the same repository can cause a lot of headaches, but Nx has you covered. Learn to share code, maintain configuration files and coordinate changes in a monorepo that can scale as large as your organisation does. Nx allows you to bring structure to a repository with hundreds of contributors and eliminates the CI slowdowns that typically occur as the codebase grows.
Table of contents:- Lab 1 - Generate an empty workspace- Lab 2 - Generate a node api- Lab 3 - Executors- Lab 4 - Migrations- Lab 5 - Generate an auth library- Lab 6 - Generate a database library- Lab 7 - Add a node cli- Lab 8 - Module boundaries- Lab 9 - Plugins and Generators - Intro- Lab 10 - Plugins and Generators - Modifying files- Lab 11 - Setting up CI- Lab 12 - Distributed caching

monorepos