Skip to content

dancer1325/nx-examples

BranchesTags
 
 

Repository files navigation

Goals

How has it been created?

Quick Start & Documentation

Adding capabilities to your workspace

  • Nx supports many plugins / add capabilities
    • React
      • npm install --save-dev @nx/react
    • Web (no framework frontends)
      • npm install --save-dev @nx/web
    • Angular
      • npm install --save-dev @nx/angular
    • Nest
      • npm install --save-dev @nrwl/nest
    • Express
      • npm install --save-dev @nrwl/express
    • Node
      • npm install --save-dev @nrwl/node

Generate an application

  • Via some plugin
    • Example: nx g @nx/react:app my-app
  • multiple applications & libraries / same workspace, can be created

Generate a library

  • Via some plugin
    • Example: nx g @nx/react:lib my-lib
  • are shareable
    • importing them -- Example: @nx-example/mylib --
    • across -- Example: Check 'cart' in the 'dep-graph' --
      • libraries &
      • applications

Development server

  • nx serve SomeAppName -- Example: nx serve products --
    • start dev server
    • hot reload
      • == if you change any of the source files -> The app will automatically reload

Code scaffolding

  • nx g @nx/react:component my-component --project=SomeProjectName
    • generate a new component

Build

  • nx build SomeProjectName -- Example: nx build products--
    • build the project
    • build artifacts
      • stored in dist/
    • --prod
      • allow production build

Running unit tests

  • nx test SomeProjectName -- Example: nx test products --
    • execute unit tests -- via -- Jest
    • ⚠️NOT all projects have a test task configured ⚠️
      • Example:_ nx test products-e2e
  • nx run-many -t test
    • execute target test / 👁️ALL projects with that target 👁️
  • nx run-many -t test -p products
    • execute target test / ⚠️ project 'product' ONLY ⚠️
  • nx affected:test
    • execute the unit tests / affected by a change

Running end-to-end tests

  • nx e2e SomeProjectName -- Example: nx e2e products-e2e --
    • execute the end-to-end tests -- via -- Cypress
    • nx show projects
      • list the projects / exist in the current Nx workspace
    • ⚠️NOT all projects have an e2e task configured ⚠️
      • Example: nx e2e products
  • nx affected:e2e
    • execute the end-to-end tests / affected projects by a change

Understand your workspace

  • npm install --force
  • nx dep-graph
    • see a diagram of the dependencies of your projects

Notes

  • Display the available tasks / project
    • Note: 🧠 NO sense, because tasks are INVOCATIONS -- Check glossary -- 🧠
  • Display the available targets / project
    • Attempts:
      • Attempt1: nx list target SomeProjectName
      • Attempt3: nx show projects --affected --target=build --all / nx show projects --affected
    • Solution: nx show project projectName -- nx show project products -- Or via Nx Console

About

Example repo for Nx workspace

nrwl-nx-examples-cart.netlify.com/cart

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 91.5%
  • SCSS 4.0%
  • HTML 2.9%
  • JavaScript 1.6%