JavaScript Conferences

Node Congress 2023

Node Congress 2023

Top Content

English versionEN

Node Monorepos with Nx

Isaac Mann

Narwhal Technologies

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

Please sign in to watch this workshop.

Sign in to access video transcription and chapter summary.

Isaac Mann

160 min

06 Apr, 2023

Comments

Sign in or register to post your comment.

Available in other languages:

Watch more workshops on topic

React at Scale with Nx

React Summit 2023

145 min

React at Scale with Nx

Top Content

Workshop

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 react monorepo nx react

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.

npm monorepos devops

End the Pain: Rethinking CI for Large Monorepos

DevOps.js Conf 2024

25 min

End the Pain: Rethinking CI for Large Monorepos

Juri Strumpflohner

Juri Strumpflohner

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.

monorepos ci cd

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.

monorepos micro-frontends architecture case study

Scale Your React App without Micro-frontends

React Summit 2022

21 min

Scale Your React App without Micro-frontends

Jonathan Wagner

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.

web development monorepos team productivity best practices devops

Remixing Your Stack in a Monorepo Workspace

Remix Conf Europe 2022

22 min

Remixing Your Stack in a Monorepo Workspace

Juri Strumpflohner

Juri Strumpflohner

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 monorepos fullstack

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.