Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Managing Monorepos with Nx - Nrwl/Nxの近況 -
Search
puku0x
February 19, 2020
Technology
0
220
Managing Monorepos with Nx - Nrwl/Nxの近況 -
puku0x
February 19, 2020
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
170
ファインディでのGitHub Actions活用事例
puku0x
9
3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
410
Findyの開発生産性を上げるためにやったこと
puku0x
1
560
Angularコーディングスタイルガイドはいいぞ
puku0x
1
270
Nx CloudでCIを爆速にした話
puku0x
0
770
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
790
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.6k
Other Decks in Technology
See All in Technology
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
140
Two Blades, One Journey: Engineering While Managing
ohbarye
4
1.8k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
590
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
160
Share my, our lessons from the road to re:Invent
naospon
0
140
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
210
php-conference-nagoya-2025
fuwasegu
0
150
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
手を動かしてレベルアップしよう!
maruto
0
200
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
110
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
240
Amazon Aurora のバージョンアップ手法について
smt7174
2
140
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cult of Friendly URLs
andyhume
78
6.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Making Projects Easy
brettharned
116
6k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Building Applications with DynamoDB
mza
93
6.2k
Being A Developer After 40
akosma
89
590k
A Tale of Four Properties
chriscoyier
158
23k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
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 <project-name> • Cypress ◦
nx e2e <project-name-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