Let’s go monorepo - intro to Nx.dev

Slide 1

Slide 1 text

0 Let’s go monorepo - intro to Nx.dev 2024-03-22 第83回NearMe技術勉強会 Cyan Chen

Slide 2

Slide 2 text

1 What is a monorepo A good intro: https://monorepo.tools/#understanding-monorepos ʻʻA monorepo is a single repository containing multiple distinct projects, with well-deﬁned relationships.’’

Slide 3

Slide 3 text

2 Monorepo vs Polyrepo https://monorepo.tools/#understanding-monorepos

Slide 4

Slide 4 text

3 Why monorepo? If sharing code… …Version hell. https://monorepo.tools/#understanding-monorepos

Slide 5

Slide 5 text

4 Why monorepo? If no sharing code… 1. Significant code duplication… 2. Inconsistent tooling service 1 “swr”: “^2.0.3” service 2 “swr”: “^1.3.0” service 3 “swr”: “^0.4.2” ⇒ Unexpected Behaviors!! service 1 commit: Force prettier… service 2 commit: Force prettier… service 3 commit: Force prettier… ⇒ A lots of manual work!!

Slide 6

Slide 6 text

5 Netflix https://monorepo.tools/#understanding-monorepos

Slide 7

Slide 7 text

6 Nx - a monorepo tool ‘Nx is the vscode of monorepo.’ ⇒ Various plugins can be installed and Nx will control versions https://nx.dev/nx-api

Slide 8

Slide 8 text

7 Create a Nx workspace git clone git@github.com:yukimotochern/nearme-study-session .git or code along… npx create-nx-workspace@latest

Slide 9

Slide 9 text

8 Nx feature - project scaffolding Install plugin cc Create project 1. Command line tool npx nx generate @nx/expo:application --name=far-me --directory=projects/far- me --projectNameAndRootForma t=as-provided --no-interactive 2. Vscode plugin (need to install)

Slide 10

Slide 10 text

9 Nx feature - project scaffolding (conti.) 1. Run our previous far-me app: npx nx run far-me:start 2. Install the expo go app from app store or google play. 3. Scan the QRcode to open our app your phone need to connect to the same wifi with computer

Slide 11

Slide 11 text

10 Nx feature - code sharing Let’s create another to-be-used Javascript library. • npx nx generate @nx/js:library --name=foo --directory=lib/foo --projectNameAndRootFormat=as-provided --unitTestRunner=jest --no-interactive

Slide 12

Slide 12 text

11 Nx feature - code sharing (conti.) Clean up ‘/projects/far-me/src/app/App.tsx’

Slide 13

Slide 13 text

12 Nx feature - graphs npx nx graph

Slide 14

Slide 14 text

13 Nx feature - affected npx nx graph --affected --port=4325 Edit foo Edit far-me

Slide 15

Slide 15 text

14 Nx feature - affected (conti.) npx nx show projects --affected ⇒ Can be used in CI/CD~ npx nx affected -t deploy

Slide 16

Slide 16 text

15 Thank you