16 years in Technology

Today is special Day

Superpower with Nx

Santosh Yadav

For your workspace

About me

Senior Engineer Celonis

GDE

GitHub Star

Nx Champion

Co-founder This is Learning

Co-host This is Tech Talks

What is Nx

A build tool with mono-repo support

 

- https://monorepo.tools/

https://monorepo.tools/

  • Provides build cache for tasks like build, test
  • Framework and technology agnostic
  • Plugin based so you can bring your own tool 
  • Support major frameworks like Angular, React and Vue out of the box
  • Support for micro-frontend
  • Support for backend technologies like spring and .net core

New Worspace

Creating a new workspace with mono-repo support

npx create-nx-workspace

Adding Support for React frameworks

Adding Support for React frameworks to mono-repo

nx add @nx/remix --add Remix support

nx add @nx/next --add Next Support

nx add @nx/react-native -- Add react native support

Adding A new App

Adding a new App for choice of your framework

nx add @nx/remix:application --name=<remix-app> --add Remix App

nx add @nx/next:application --name=<next-app> --add Next App

nx add @nx/react-native:application --name=<react-native-app> --add react native App

Creating Libraries

Creating a new library for better code splitting

nx g @nx/next:lib  --create a new next library 

nx g @nx/remix:lib  --create a new remix library

nx g @nx/react-native:lib --create a new react native library

Tooling of your choice

Chose modern tooling for your apps and libs

First-class support for e2e framework

Chose e2e framework of your choice

Build plugins

Bring your own tool or override existing behavior

nx add @nx/plugin

nx g @nx/plugin:plugin 
nx-plugin 
--directory libs/tools/react-overrides

〞

The ultimate goal for all developers to write code and wait for your builds to complete on CI

Build and Deployment workflow for each App

App/Libs

Build and deployment

Build code on GitHub Action

Push the build artifact to DB

* X

X = number of Apps

PR 1

PR 2

PR 3

PR 4

PR = Pull Request

P

I

P

E

L

I

N

E

Build workflow on CI

GitHub Actions

Build

Lint

E2E

Build workflow on CI

GitHub Actions

Build Done

Lint

Test

Build workflow on CI

GitHub Actions

Build Done

Lint Done

Test

Long build times a multiverse story

PR 1

PR 2

PR 3

PR 4

PR = Pull Request

PR 5

PR 6

PR 7

Pipeline

Parallel builds using GitHub Actions using Matrix and large runners

Build

Lint

Test

M-1

M-2

M-3

M = Machine (can be linux/windows/mac)

Pipeline

PR 1

PR 2

PR 3

PR 4

PR = Pull Request

PR 5

PR 6..

PR 70

Pipeline

〞

One problem we have with build tools is that we build the same code repeatedly, though we don't change it.

Build what you changed

Nx is smart to identify what Apps/libs are affected by your change

nx graph

App1

App2

App3

App4

App5

Lib1

Lib2

function newFeature() {
	return true;
}

Changes in your Pull Request

App1

App2

App3

App4

App5

Lib1

Lib2

Build affected code

Run only affected tasks

nx affected --targets=build,lint,test

Nx Cloud

Push Nx Cache

Get Nx Cache

PR 1

PR 2

PR 3

PR 4

PR = Pull Request

P

I

P

E

L

I

N

E

Publish libraries

Create a new npm/yarn workspace

Publish libraries

Add Tooling of your choice 

  • Vite
  • Webpack
  • RsPack

Publish libraries

Add configuration to bundle your dependencies and style 

Publish libraries

Add scripts to publish

  • Add semver
  • Add script to build package
  • commit code and generate the changelog

Publish libraries

Keep your library up to date with latest release of framework

Publish libraries

Zero setup required to publish libraries

nx release

Keep your tooling upto date

Be ahead with latest version of tools you use

nx migrate latest

Thanks!

Contact me on @SantoshYadavDev

Giving Superpowers to your workspace

By Santosh Yadav

Giving Superpowers to your workspace

  • 33

More from Santosh Yadav