Apps and libs with NX
nx
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:

# Add the react nx plugin
yarn add @nrwl/react

# generate a react app
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

yarn add @nrwl/express 
yarn nx g @nrwl/express:application my-api --frontendProject=my-project
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:

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:

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:

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

If you want to configure storybook for this lib run

nx generate @nrwl/react:storybook-configuration mylib

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

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

Removing an app or lib

nx g @nrwl/workspace:remove lib-name

About Author

Mathias Bothe To my job profile

I am Mathias from Heidelberg, Germany. I am a passionate IT freelancer with 15+ years experience in programming, especially in developing web based applications for companies that range from small startups to the big players out there. I create Bosycom and initiated several software projects.