Let’s go monorepo - intro to Nx.dev

Transcript

1. 0 Let’s go monorepo - intro to Nx.dev 2024-03-22 第83回NearMe技術勉強会 Cyan Chen
2. 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-defined relationships.’’
3. 2 Monorepo vs Polyrepo https://monorepo.tools/#understanding-monorepos
4. 3 Why monorepo? If sharing code… …Version hell. https://monorepo.tools/#understanding-monorepos
5. 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!!
6. 5 Netflix https://monorepo.tools/#understanding-monorepos
7. 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
8. 7 Create a Nx workspace git clone git@github.com:yukimotochern/nearme-study-session .git or code along… npx create-nx-workspace@latest
9. 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)
10. 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
11. 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
12. 11 Nx feature - code sharing (conti.) Clean up ‘/projects/far-me/src/app/App.tsx’
13. 12 Nx feature - graphs npx nx graph
14. 13 Nx feature - affected npx nx graph --affected --port=4325 Edit foo Edit far-me
15. 14 Nx feature - affected (conti.) npx nx show projects --affected ⇒ Can be used in CI/CD~ npx nx affected -t deploy
16. 15 Thank you