Managing Monorepos with Nx - Nrwl/Nxの近況 - ng-japan OnAir #12

Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2

Monorepo? Nx? 3

Monorepo ● A single repository containing multiple projects ○ Monorepo !== Monolith ● Used by 4 ...

5 https://nx.dev/

Nx ● Developed by Nrwl ● Monorepo management tool ○ Modern web development ○ Effective change detection ○ Automated migration 6 “Develop like Google, Facebook and Microsoft”

Version histories ● v1.x〜（April, 2018） ○ Extensions for Angular CLI ● v6.x ○ Jest support ● v7.x ○ Cypress and Nest support ● v8.x ○ React, Next.js and Storybook support ● v9.x ○ Angular v9 support 7

$ npx create-nx-workspace : ? Workspace name (e.g., org name) workspace ? What to create in the new workspace angular-nest ? Application name web ? Default stylesheet format SASS(.scss) Creating a workspace 8

Nx workspace ● Similar to Angular workspace ● Single version policy ○ package.json is a single source of truth 9

Scaffolding ● Applications ○ nx g @nrwl/angular:app ● Libraries ○ nx g @nrwl/angular:lib ● Schematics ○ nx g workspace-schematic 10

Testing ● Jest ○ nx test ● Cypress ○ nx e2e 11

$ npm i -D @nrwl/storybook $ npm i -D @storybook/angular @storybook/addon-knobs $ nx g @nrwl/angular:storybook-configuration # Run storybook $ nx run project-name:storybook # E2E with Cypress $ nx e2e project-name-e2e Storybook 12

Linting/Formatting ● ESLint/TSLint ○ nx lint ○ nx workspace-lint ● Prettier ○ nx format:write ○ '--uncommitted' option for lint-staged 13

enforce-module-boundaries ● Dependency constraints https://nx.dev/web/guides/monorepo-tags 14

Dependency visualization ● nx dep-graph ● nx affected:dep-graph 15

Effective change detection ● nx affected:lint ● nx affected:test ● nx affected:build ● nx affected:e2e 16

Distributed caching for faster CI 17 https://blog.nrwl.io/distributed-caching-in-nx-164edfbc68e0

Nx ecosystem ● Nx Console ○ VS Code extension ● Nx Plugin ○ Custom builder ● Nx Cloud ○ Cloud distributed caching 18 https://nx.dev/nx-console

Nx v10 ● https://github.com/nrwl/nx/issues/2152 ○ Stability ○ Smarter affected ○ Distributed caching by default ○ Mixing monorepo and polyrepo 19

Recap ● Nx makes managing monorepos easy! ○ Supports ○ https://nx.dev/ ● Try it now! 20 $ npx create-nx-workspace

Thank you! @puku0x Noriyuki Shinpuku