today, we're going to talk about library and Nx (...and much more)

What is Nx?

What is Nx?

A task runner

What is Nx?

A task runner

that can orchestrates and executes tasks efficiently

What is Nx?

A task runner

that can orchestrates and executes tasks efficiently

because it knows about your projects

What is Nx?

It is also a collection of tools

What is Nx?

It is also a collection of tools

Disclaimers

...or pre-talk FAQ

Disclaimers

...or pre-talk FAQ

1. The demo is in Nx 19. What about Nx 20?

Disclaimers

...or pre-talk FAQ

1. The demo is in Nx 19. What about Nx 20?

2. The demo uses Angular. Why?

Libraries with Nx

Chau Tran

twitter.com/@nartc1410

github.com/nartc

Agenda

  • Create an Nx Workspace
  • Create an Angular library
  • Create a playground application
  • Entry Points
  • Custom Plugin
  • Release
  • Optimize the library workspace
  • Documentations

Create Nx Workspace

Create Nx Workspace

npx create-nx-workspace <name_of_workspace>

Create Nx Workspace

npx create-nx-workspace <name_of_workspace>
	--package-manager=npm,yarn,pnpm

Create Nx Workspace

npx create-nx-workspace <name_of_workspace>

Create Nx Workspace

Create Nx Workspace

npm i -D @nx/angular

Create Angular Library

Create Angular Library

npx nx generate @nx/angular:library libs/core
	--publishable
    --import-path="@js-day-demo/core"
    --standalone

Create Angular Library

Demo

Create Angular App

Create Angular App

npx nx generate @nx/angular:app apps/playground

Create Angular App

Demo

Entry Points

Entry Points

@angular/core

Entry Points

@angular/core

@angular/core/testing

Entry Points

@angular/core

@angular/core/testing

https://unpkg.com/browse/msw@2.5.1/package.json

Entry Points

npx nx generate @nx/angular:entry-point

Entry Points

Demo

Custom Plugins

Custom Plugins

npx ng add <name-of-library>

Custom Plugins

npm i -D @nx/plugin

Custom Plugins

npx nx generate @nx/plugin:plugin libs/plugin

Custom Plugins

npx nx generate @nx/plugin:generator

Custom Plugins

Demo

Release

Release

A smart release tool because it has information about the Project Graph

Release

Demo

Optimize the Workspace

Demo

Conclusion

Thank you

Made with Slides.com