Apps and libs with NX

There are many different kinds of applications you can create, such as React, Angular, Express, Node etc. Nx is lets you add those via plugins. If you create your first workspace then you can specifiy a preset (as shown above), if you already have a workspace you have to install the desired plugin first.

app vs. lib

Usually applications should import most of the code from libraries. Read more about whether you should make a library or not on the official Nx page.

Creating an app

The following will create a React application in apps/myapp and also apps/myapp-e2e:

1
# Add the react nx plugin
2
yarn add @nrwl/react
3

4
# generate a react app
5
nx generate @nrwl/react:app myapp

Behind the scenes nx.json and workspace.json will be updated to add myapp and myapp-e2e as projects. Also additional files for babel and jest config are created.

Creating an express app

1
yarn add @nrwl/express
2
yarn nx g @nrwl/express:application my-api --frontendProject=my-project
3
yarn nx run my-api:serve

--frontendProject conveniently takes care of creating a proxy.conf.json in my-project to forward any request to /api to the backend server.

Creating a library

Creating a lib interactively:

1
nx g lib mylib

Or in a subdirectory. The following will create a pure TypeScript library (even though it says js:lib) in libs/bar/foo:

1
nx g @nrwl/js:lib foo --directory=bar

All libs will automatically get a path like @myorg/mylib specified in tsconfig.base.json, which lets you import files like import { Something } from "@myorg/mylib".

If you want to create a react component of header in this project you type:

1
yarn nx g @nrwl/react:component header --project=mydir-mylib

If you want to configure storybook for this lib run

1
nx generate @nrwl/react:storybook-configuration mylib

You can display --help for each command and have a --dry run:

1
yarn nx g @nrwl/react:application --help
2
yarn nx g @nrwl/react:application myapp --dry-run

Removing an app or lib

1
nx g @nrwl/workspace:remove lib-name