Skip to main content

NX

Nx is a smart and extensible build framework to help you architect, test, and build at scale

nx.dev

Benefits​

Monorepos is how Google etc scale huge software projects.

NX vs Turborepo from Vercel.

  • Standardisation
  • Shared components
  • Microfrontends
  • Clear design language
  • Documentation
  • Testing
  • Communication
  • Speed
  • Avoid rework

Integrations​

  • Nextjs
  • React Native
  • Nestjs
  • Storybook
  • Cypress.io
  • Angular

Install​

Install the NX CLI

npm install -g nx

Update​

See docs

If the following does not work first install the cli

npm install -g nx

Then run update commands

nx migrate latest
yarn
nx migrate --run-migrations

Serve, Build​

When building the application, all referenced libraries are built into the app via the bundler.

npx nx serve [appName]

Production​

By passing --configuration=production (or --prod) the production configuration is being used which is defined in the workspace.json and which can set additional production environment only properties.

Confirm all is OK

npx nx build site --prod --verbose

Troubleshooting​

Can run into issues with caching.

rimraf node_modules
rm yarn.lock
yarn cache clean
yarn install

Generate an app​

Run nx g @nrwl/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library​

Run nx g @nrwl/react:lib my-lib to generate a library.

You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and applications. They can be imported from @drmg/mylib.

Development​

Commands to help development.

Development server​

Run nx serve my-app for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding​

Run nx g @nrwl/react:component my-component --project=my-app to generate a new component.

Build​

Run nx build my-app to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Understand your workspace​

Run nx graph to see a diagram of the dependencies of your projects.

Alternatives​

Schema​