Node Nx Tutorial - Step 1: Create Application

Nx.dev Tutorial | Node | Step 1: Create Application

In this tutorial you will use Nx to build a server application out of common libraries using modern technologies.

Create a New Workspace

Start by creating a new workspace.

npx create-nx-workspace@latest

You will then receive the following prompts in your command line:

myorg/
├── README.md
├── apps/
│   └── todos/
│       ├── jest.config.js
│       ├── src/
│       │   ├── app/
│       │   │   ├── app.controller.spec.ts
│       │   │   ├── app.controller.ts
│       │   │   ├── app.module.ts
│       │   │   ├── app.service.spec.ts
│       │   │   └── app.service.ts
│       │   ├── assets/
│       │   ├── environments/
│       │   │   ├── environment.prod.ts
│       │   │   └── environment.ts
│       │   └── main.ts
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       └── tsconfig.spec.json
├── tools/
│   ├── generators
│   └── tsconfig.tools.json
├── jest.config.js
├── libs
├── nx.json
├── package.json
├── tsconfig.base.json
└── workspace.json

The generate command added one project to our workspace:

• A Nest application

Note on the Nx CLI

Depending on how your dev env is set up, the command above might result in Command 'nx' not found.

To fix it, you can either install the nx cli globally by running:

1npm install -g nx

or

1yarn global add nx

Or you can prepend every command with npm run:

npm run nx -- serve todos

or

yarn nx serve todos

Workspace.json, Targets, Builders

You configure your workspaces in workspace.json. This file contains the workspace projects with their architect targets. For instance, todos has the build, serve, lint, and test targets. This means that you can run nx build todos, nx serve todos, etc..

Every target uses a builder which actually runs this target. So targets are analogous to typed npm scripts, and builders are analogous to typed shell scripts.

Why not use shell scripts and npm scripts directly?

There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. nx serve todos --help results in:

1nx run todos:serve [options,...]
2
3Options:
4  --buildTarget           The target to run to build you the app
5  --waitUntilTargets      The targets to run to before starting the node app (default: )
6  --host                  The host to inspect the process on (default: localhost)
7  --port                  The port to inspect the process on. Setting port to 0 will assign random free ports to all forked processes.
8  --watch                 Run build when files change (default: true)
9  --inspect               Ensures the app is starting with debugging (default: inspect)
10  --runtimeArgs           Extra args passed to the node process (default: )
11  --args                  Extra args when starting the app (default: )
12  --help                  Show available options for project target.

It helps with good editor integration (see VSCode Support).

But, most importantly, it provides a holistic dev experience regardless of the tools used, and enables advanced build features like distributed computation caching and distributed builds).

Serve the newly created application

Now that the application is set up, run it locally via:

1nx serve todos

!!!!! Open http://localhost:3333/api in the browser. What do you see? !!!!! Page saying "{"message":"Welcome to todos!"}" Page saying "This is Nest app built with Nx!" 404