From Chaos to Order:

How React Monorepos Can Simplify Your Codebase

Staff Developer Advocate at 

Patricio Vargas (Pato)

• Google Developer Expert on Web Technologies
• Microsoft MVP
• Auth0 Ambassador
• AWS Community Builder
• Postman Supernova
• Twilio Champion
• Media Developer Expert at Cloudinary
• Google Women Techmaker

Architecture

Architecture Considerations

App Overview

App Features

Domain Security

Domain Rules

Logging

Services/

Communication

Data Models

Features

Components

Shared

Functionality

Shared Code?

App Shared Code

Projects Shared Code

NPM Enterprise Registry

devpato

NPM Packages and Monorepos

devpato

NPM Packages

PROS

• Publish and share these libraries with other teams or projects.

devpato

React Libraries

CONS

• Link your library to your main project and rebuild it for every change.

• You will need to keep syncing your project with the latest version of the library.

Be careful when using libraries

• Every shared lib needs to have its own CI/CD pipeline.

• Each CI/CD pipeline should handle versioning of changes.

• There can be mismatches with different npm packages for react projects.

Monorepos

React Monorepos

• Same library version for every app.

• Ease of maintenance: when you update a shared library, you update it for all apps.

• No conflicts between versions.

PROS

• Update the package and test everything in a simple way.

Where should I build my libraries?

• If developers of a company are set to work on the same main project, no matter how large, use a monorepos.

• If developers are set to work on different projects, teams, locations, and codebases, you may want to build each library in their own repository.

tools to work

with react monorepos

tools to work

with react monorepos

how can nx help you?

• Speed up your existing project's builds and tests, locally and on CI.
• Quickly scaffold a new project (using Nx plugins) without having to configure any lower-level build tools
• To easily integrate new tooling (e.g., Storybook, Tailwind, etc), into your project.
• Ensure consistency and code quality with custom generators and lint rules
• Update your frameworks and tools and keep your workspace evergreen using the automated code migration feature
• Deploy your applications
• Manage Shared Code

Getting started with Nx

devpato

Getting started with Nx

Getting started with Nx

Creating an App

devpato

BUT WAIT!

THERE'S MORE!