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:

# 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 a lib

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.

The following will create a library mylib in libs/mylib:

nx generate @nrwl/react:lib mylib

You can additionally specify --directory mydir to create the library as libs/mydir/mylib. The project is the combination of the folder path, so in this example you can refer to this as a project with the name mydir-mylib.

All project and where they are pointing to are defined in workspace.json.

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

Creating a pure TypeScript lib

yarn nx g @nrwl/workspace:lib my-ts-lib

Removing an app or lib

nx g @nrwl/workspace:remove lib-name

About Author

Mathias Bothe To my job profile

I am Mathias, born 39 years ago in Heidelberg, Germany. Today I am living in Munich and Stockholm. I am a passionate IT freelancer with more than 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 am founder of, creator of the security service platform BosyProtect© and initiator of several other software projects.