Youtube | An Introduction to Nx Workspaces - Understanding Nx & Monorepos #1
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
-
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
-
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.
-
Generate new projects for Nx with Nx console
- Vscode has plugin "nx console"
- "nx console" is a menu with all the posibilites options
-
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.
-
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