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