Questions tagged [nx.dev]

For questions about Nx, a suite of powerful, extensible dev tools that help you develop, test, build, and scale Angular applications with fully integrated support for modern libraries like Jest, Cypress, ESLint, and more.

Intro to Nx

Nx is a suite of powerful, extensible dev tools that help you develop, test, build, and scale Angular applications with fully integrated support for modern libraries like Jest, Cypress, ESLint, and more.

10-Minute Nx Overview (YouTube link on image below)

Nx-Dev-Tools

Philosophy

Nx is built on a technology agnostic core that maintains modular units of code and understands the dependency graph between them. Developers comprehend that your app contains two pages that each use a shared button component. Nx uses this same knowledge to provide insights and performance improvements. There's a whole ecosystem of plugins that build on this foundation.

Nx becomes more valuable as you scale, solving problems that are frustrating for small teams, but paralyzing for large teams.

Nx works especially well for monorepos. Each new app added to a monorepo provides more opportunities to share code and tooling but that often comes at the cost of a compounding slowdown in the CI pipeline. Nx ensures that adding another app to the repo does not increase the existing app’s test or build time.

Features

Test (or builds or lints) only the projects affected by a code change. Cache command output locally so that future runs on the same code happen in seconds. The paid Nx Cloud offering allows this cache to be shared across every developer in your organization. Provide a consistent syntax for executing commands. nx build my-app works no matter what framework my-app uses. Automate code modification tasks with generators. Access a thriving ecosystem of plugins from Nrwl and the community.

59 questions
2
votes
0 answers

How to correctly pass argument to script from command line with NX15

With the given script in package.json : "deploy": "nx deploy --verbose --" If we run npm run deploy my-application using NX 13.4.5 (@nrwl/nx) it produces the following output (and it works as we expect): > nx deploy --verbose -- my-application >…
2
votes
1 answer

Unable to resolve @nrwl/angular

Getting below error when I'm trying to create a component in my angular application. Command ng generate component Error Unable to resolve @nrwl/angular:component. Cannot find generator 'component' in…
Kms
  • 1,082
  • 2
  • 11
  • 27
2
votes
1 answer

Multiple react micro front ends on one page

We're using nx to generate react applications, which we then use as micro front ends. Previously they have all been confined to separate pages and have worked flawlessly. Recently we've added an application that is meant to be included on all pages…
user1546010
  • 539
  • 1
  • 4
  • 17
2
votes
0 answers

Bundle CSS in publishable NX React library

I created a publishable React library that contains some custom styles. When I use this library (component) within a demo application in the NX project, I do not need to include any CSS styles - they just work. Now I published this library into my…
Igor
  • 592
  • 2
  • 9
  • 31
2
votes
0 answers

Next.js monorepo: multiple apps on subdomains vs. one app?

I just started using nx.dev to migrate from a single app repo to a monorepo as I have added a very basic static documentation app to the mix which is deployed to a subdomain docs.company.com. My main application is currently deployed to main route…
Peterhack
  • 941
  • 4
  • 15
  • 34
1
vote
0 answers

Unable to run app using Next generation build system

Error while running app nx serve frontend > nx run frontend:serve:development > NX RunStart { "meta": { "nxCloudVersion": "latest" }, "branch": null, "runGroup": "8d44d4811566fc991ad067785087e06ee8f245e0", "ciExecutionId":…
kittu
  • 6,662
  • 21
  • 91
  • 185
1
vote
2 answers

nx:run-commands default args values

i have react library created inside nx mono repo using this version nx: 15.6.3 i've added inside the packages/my-library command to run multiple commands generate react component generate react-stories using these plugins @nrwl/react:component -…
1
vote
1 answer

Unable to connect to nx app running inside docker container

I am unable to open the app from browser. Running the following command inside docker: nx serve --port 80 Docker is started with following command: docker run -p 80:80 -d I am able to get the index.html from terminal (inside…
manojadams
  • 2,314
  • 3
  • 26
  • 30
1
vote
0 answers

Run an NPM script inside every package in an NX project's library

I'm using NX to manage a React design system mono-repo. I want to create my components within an NX Library and am currently looking into creating a Node package which will run the CSS for each component through PostCSS to get it production…
1
vote
1 answer

NX run-commands forward multiple arguments with same name

I'm trying to pass multiple arguments with same name with run-commands, for example: nx run project:build --define foo=123 --define bar=456 It seems nx will collapse the argument and forwarding only 1 argument to the underlying command, for…
okeydoky
  • 117
  • 1
  • 7
1
vote
3 answers

Change base url of a react app in NX workspace

I have a nx workspace where I have several react apps. One of them is payment and I want to serve it under mybaseurl.com/payment . The static assets (css, js) are failing to load because they are still pointed at root in the index.html. I cannot…
Anik
  • 2,692
  • 2
  • 22
  • 25
1
vote
0 answers

How to use dotenv-webpack with angular and nx

I want to configure a .env file in my app so I can define my env variables from codebuild. I have an angular application in a nx workspace. I'm overriding my webpack to configure dotenv-webpack, but I'm getting this error when I try to build my app…
Thais Molica
  • 53
  • 1
  • 4
1
vote
2 answers

How to run NextJS client side debugger in VSCode in nx workspace

I have 2 frontend applications running in nx workspace, Both of them are next js applications. The client-side debugging is not working as all the breakpoints and log points added are shown as unbounded. But the server-side debugger attached is…
1
vote
2 answers

How to pass env variable to client side in a nx workspace?

I'm running a nextJS app in a NX workspace and I need to get access to env variables on client side. /apps/myproject/.local.env NEXT_PUBLIC_PROJECT=my-super-project /apps/myproject/next.config.tsx module.exports = { publicRuntimeConfig: { …
user3142695
  • 15,844
  • 47
  • 176
  • 332
1
vote
0 answers

Using component level chunks in Nx and React

In Nx is there a way to splits component level chunks in React application. If yes, then please share if someone had done this. Currently, the only option that I see is commonChunk and namedChunks, but they does not serve the purpose. Adding dynamic…
Anuj Verma
  • 11
  • 1