From Chaos to Order:

How React Monorepos Can Simplify Your Codebase

devpato

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

devpato

Architecture

devpato

Architecture Considerations

devpato

App Overview

App Features

Domain Security

Domain Rules

Logging

Services/

Communication

Data Models

Features

Components

Shared

Functionality

Shared Code?

2 Kinds

  • App Shared Code
  • Projects Shared Code

devpato

App Shared Code

devpato

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.

devpato

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.
  • Every time a new change happens in a shared repo, you need to go to all your projects using this library and update their npm packages.
  • There can be mismatches with different npm packages for react projects.

devpato

Monorepos

Monorepos are a source control pattern where essentially all the codebase lives in the same repository. All projects will always use the latest version of the code.

What is a Monorepo?

devpato

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

devpato

  • 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.

devpato

tools to work

with react monorepos

devpato

tools to work

with react monorepos

devpato

how can nx help you?

devpato

  • 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

npm install --global nx@latest
npx create-nx-workspace@latest react-monorepo --preset=react-monorepo

Install Nx CLI globally

Create a Nx Workspace

devpato

Getting started with Nx

devpato

Creating an App

Now create your React app:

npx nx g @nx/react:app inventory --directory=apps/inventory

devpato

devpato

BUT WAIT!

 

THERE'S MORE!

resources

Why Turborepo

https://turbo.build/repo/docs/core-concepts/monorepos

Why Nx?

https://nx.dev/getting-started/why-nx

Nx Tutorial

https://nx.dev/getting-started/tutorials/react-monorepo-tutorial

devpato

Find the project on GitHub

https://tinyurl.com/mrxxbk96

React for Enterprise - Short

By Patricio Vargas

Made with Slides.com

React for Enterprise - Short

  • 44

More from Patricio Vargas