Notes | Working with Nx

https://nx.dev/

---

[Youtube | An Introduction to Nx Workspaces - Understanding Nx & Monorepos #1](https://www.youtube.com/watch?v=QqM3MlyurUA)

**Monorepo** is just a repository that contains multiple prejects
recommeds to use nx console extension of vscode
using monorepos will share a sigle set of dependencies in package.json

---

https://egghead.io/courses/scale-react-development-with-nx-4038

1. Create a new empty Nx Workspace
    - npx create-nx-workspace WORKSPACE-NAME
    - https://nx.app/ nx cloud like commercial version
    - **libs** folder is where most of the code lives.
    - one **node_modules** folder for all the projects.
    - **workspace.json**: all configuration of projects
    - nx.json contains configuration for our workspace

2. Generate a new React app with Nx
    - **nx** is the command line tool
    - **nx list** give us options that we have within our Nx workspace
    - **nx list @nrwl/react** shows posibilities that we have
    - **nx g @nrwl/react:application [--help]** where "application" is an option of the list.

3. Generate new projects for Nx with Nx console
    - Vscode has plugin "nx console"
    - "nx console" is a menu with all the posibilites options
    
4. Running a Rect App in the Browser with Nx
    - workspace.json contianis the core configuration
    - "defaultProject" is a important variable
    - "projects" has every project and the actions to ejecute in every project.
       
5. Install and use external npm packages in an Nx workspace
- Install a new dependency is as usually we do.

6.. Add styling to a react app inside an Nx workspace
- workspace.json -> "build" -> "styles"
- https://nx.dev/packages/react/generators/application#style

7.. Configure assets for my react app in an Nx workspace
   - apps/store/src/assets -> Paste here the elements
   - in workspace.json is defined the path

8.. Create a shared react library in an Nx workspace
   - nx g @nrwl/react:lib ui-shared --directory=store
   - nx g @nrwl/react:component header --project=store-ui-shared where store-ui-store is a project in workspace.json

9.. Generate a typescript librabir in an Nx workspace
   - nx g @nrwl/workspace:lib util-formatters --directory=store 
   - in tsconfig.json is the name of library to import

10.. Use the Nx dependency graph to visualize your monorepo structure
   - nx dep-graph
   - applications are represented by squares

11.. Create react feature libraries in an Nx workspace
  - the code use to be in lib folder by reusability and bounded context

12.. Create an express backend api in an Nx workspace
  - npm install -D @nrwl/express
  - nx g @nrwl/express:application NAME --frontendProject=store
  - check the file proxy.confg.json
  - nx run api:serve

13.. Use run commands to launch the api and app of an Nx workspace
   - nx run-many --target=serve --projects=api,store --parallel=true

14.. Connect to a express.js api from a react app in an Nx workspace
   - with useState and useEffect we can call the api

15.. Share and reause functionality with libraries in Nx
   - just import the function need it.

16.. Share code between a react frondend and node.js backend application in Nx
    - create the library and import where is need it.
    - nx g @nrwl/workspace:lib util-interfaces --directory=api

17.. Use storybook to develop react componets in Nx
    - storybook is a framework to test components
    - yarn add @nrwl/storybook -D
    - nx list @nrwl/react contains schematics storybook-configuration
    - nx run store-ui-shared:storybook

18.. Use cypress and storybook to test your react components in isolation
   - with e2e test we use cypress
   - nx run store-ui-shared-e2e:e2e --watch

19.. Run jest test from a react app with Nx
   - nx run store:test

20.. Build your react app with Nx
   - nx run store:build --configuration=production

21.. Linting a react app with Nx
   -  nx run store:lint

22.. Scale CI runs with Nx affected commands
   - affected command show what dependency we need test/build etc again.
   - nx affected:dep-grap --base-16-adjust-jest-tests

23.. Speed up with Nx computation caching
   - nx affected:test --all
   - nx read hash from files ./node_modules/cache
   

24.. Update your Nx workspace with Nx migrations
   - nx migrate lastest
   - npm install
   - nx migrate --run-migrations=migrations.json
   - commit migrations.json then the teams could update their code