React Standalone Tutorial - 3: Task-Running
Common tasks include:
- Building an application
- Serving a local web server with the built project
- Running your unit tests
- Linting your code
- Running e2e tests
When you ran your generators in Part 1, you already set up these common tasks for each project.
Defining Targets
Here's the project.json file for your shared-ui project:
libs/common-ui/project.json
1{
2 "name": "shared-ui",
3 "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 "sourceRoot": "shared/ui/src",
5 "projectType": "library",
6 "tags": [],
7 "targets": {
8 "build": {
9 "executor": "@nx/vite:build",
10 "outputs": ["{options.outputPath}"],
11 "options": {
12 "outputPath": "dist/shared/ui"
13 }
14 },
15 "lint": {
16 "executor": "@nx/linter:eslint",
17 "outputs": ["{options.outputFile}"],
18 "options": {
19 "lintFilePatterns": ["shared/ui/**/*.{ts,tsx,js,jsx}"]
20 }
21 },
22 "test": {
23 "executor": "@nx/vite:test",
24 "outputs": ["{projectRoot}/coverage"],
25 "options": {
26 "passWithNoTests": true
27 }
28 }
29 }
30}
31You can see that three targets are defined here: build, test and lint.
The properties inside each of these these targets is defined as follows:
executor- which Nx executor to run. The syntax here is:<plugin name>:<executor name>outputs- this is an array of files that would be created by running this target. (This informs Nx on what to save for it's caching mechanisms you'll learn about in 4 - Task Pipelines).options- this is an object defining which executor options to use for the given target. Every Nx executor allows for options as a way to parameterize it's functionality.
Running Tasks
Run the test target for your shared-ui project:
~/store❯
npx nx test shared-ui
1
2> nx run shared-ui:test
3
4 RUN v0.25.3 /Users/isaac/Documents/code/store/shared/ui
5 ✓ src/lib/banner/banner.spec.tsx (1 test) 12ms
6 ✓ src/lib/shared-ui.spec.tsx (1 test) 10ms
7 Test Files 2 passed (2)
8 Tests 2 passed (2)
9 Start at 15:00:09
10 Duration 1.05s (transform 375ms, setup 1ms, collect 415ms, tests 22ms)
11
12 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
13
14 > NX Successfully ran target test for project shared-ui (2s)
15Next, run a lint check on your shared-ui project:
~/store❯
npx nx lint shared-ui
1
2> nx run shared-ui:lint
3
4
5Linting "shared-ui"...
6
7All files pass linting.
8
9
10———————————————————————————————————————————————————————————————————————————————————————————————————
11
12 > NX Successfully ran target lint for project shared-ui (2s)
13What's Next
- Continue to 4: Task Pipelines