An Nx monorepo for React and Angular.
nx serve ignoratio
nx g @nrwl/react:app ignoratio to generate an application.
nx g @nrwl/react:lib my-lib to generate a library.
nx g @nrwl/react:component my-component --project=ignoratio
nx build ignoratio to build the project, `--prod` flag for a production build.
nx test ignoratio to execute the unit tests via Jest.
nx affected:test to execute the unit tests affected by a change.
ng e2e ignoratio to execute the end-to-end tests via Cypress.
nx affected:e2e to execute the end-to-end tests affected by a change.
nx dep-graph to see a diagram of the dependencies of your projects.
The first React was created with the following:
npx create-nx-workspace@latest
? Workspace name (e.g., org name) elenchi
? What to create in the new workspace react
? Application name todos
? Default stylesheet format CSS
cd elenchi
nx generate @nrwl/react:app ignoratio
? Which stylesheet format would you like to use? ...
> CSS
After this, the general gist of the scaffolding technique shown in Duncan Hunters Enterprise Angular applications with NgRx and Nx workshop was followed. Whereas there it's Angular, here we will be using the React equivalent.
> nx generate @nrwl/react:lib game --routing
UPDATE workspace.json
CREATE libs/game/.eslintrc.json
CREATE libs/game/.babelrc
CREATE libs/game/README.md
CREATE libs/game/src/index.ts
CREATE libs/game/tsconfig.json
CREATE libs/game/tsconfig.lib.json
UPDATE tsconfig.base.json
CREATE libs/game/jest.config.js
CREATE libs/game/tsconfig.spec.json
UPDATE jest.config.js
CREATE libs/game/src/lib/game.module.css
CREATE libs/game/src/lib/game.spec.tsx
CREATE libs/game/src/lib/game.tsx
> nx generate @nrwl/react:component containers/board --project=game
√ Should this component be exported in the project? (y/N) · true
Found "/" in the component name. Did you mean to use the --directory option (e.g. `nx g c board --directory containers`)?
Strange, that worked for the Angular app. So add the directory flag it is:
nx g c board --directory containers --project=game
√ Should this component be exported in the project? (y/N) · true
CREATE libs/game/src/containers/board/board.module.css
CREATE libs/game/src/containers/board/board.spec.tsx
CREATE libs/game/src/containers/board/board.tsx
UPDATE libs/game/src/index.ts
Add a cards component.
nx generate @nrwl/react:component cards --directory components --project=game
√ Should this component be exported in the project? (y/N) · true
CREATE libs/game/src/components/cards/cards.module.css
CREATE libs/game/src/components/cards/cards.spec.tsx
CREATE libs/game/src/components/cards/cards.tsx
UPDATE libs/game/src/index.ts
This is done for us when using the --routing flag with the nx cli. They look a little something like this in the app.tsx file:
<div role="navigation">
<Link to="/page-2">Page 2</Link>
</div>
<Route
path="/page-2"
exact
render={() => (
<Link to="/">Click here to go back to root page.</Link>
)}/>
</div>
Add a link to the game lib there like this:
import { Game } from '@elenchi/game';
...
<Route
path="/game"
exact
render={() => (
<Game></Game>
)}
/>
Nx supports many plugins which add capabilities for developing different types of applications and different tools.
These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.
Below are our core plugins:
- React
npm install --save-dev @nrwl/react
- Web (no framework frontends)
npm install --save-dev @nrwl/web
- Angular
npm install --save-dev @nrwl/angular
- Nest
npm install --save-dev @nrwl/nest
- Express
npm install --save-dev @nrwl/express
- Node
npm install --save-dev @nrwl/node
There are also many community plugins you could add.
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.
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 @elenchi/mylib
.
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.
Run nx g @nrwl/react:component my-component --project=my-app
to generate a new component.
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.
Run nx test my-app
to execute the unit tests via Jest.
Run nx affected:test
to execute the unit tests affected by a change.
Run ng e2e my-app
to execute the end-to-end tests via Cypress.
Run nx affected:e2e
to execute the end-to-end tests affected by a change.
Run nx dep-graph
to see a diagram of the dependencies of your projects.
Visit the Nx Documentation to learn more.
Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.
Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.
Visit Nx Cloud to learn more.