1298a0f6db
* docs(react): update react tutorial text * docs(react): fixes to computation cache lesson * docs(react): reworking react tutorial * docs(react): fixing broken links in tutorial * docs(react): fixing broken more links in tutorial * docs(react): fixing last broken link in tutorial * docs(react): really fixing last broken link in tutorial * fixing images in preview * docs(react): cleaning up text and formatting issues * docs(react): more fixes and cleanup * docs(react): more fixes * docs(react): fixing nx console broken links * docs(react): adjusting ending summary cards * docs(react): more typo fixes * docs(react): incorporating victor and isaac's feedback * docs(react): fixing broken link * docs(react): a self-round of typo and formatting fixes * docs(react): another round of formatting fixes * docs(react): another small change * docs(react): another typo fix * docs(react): more typo fixed noticed working with node tutorial * docs(react): making h1's consistent * docs(react): fixing tab title for part 1 * docs(react): fixing the title * docs(react): escaping colon in title * docs(node): copying react tutorials as starting point * docs(node): fixing map.json and links to other lessons * docs(node): updating the copy-pasted react tutorial for the node example * docs(node): more fixes after self-review * docs(node): fixing another typo * docs(node): Making h1's consistent * docs(node): fixing tab title in step 1 * docs(node): fixing the title * docs(node): escaping colon in title * docs(core): nx graph => project graph * docs(core): fixing titles * docs(core): further shortening the text * docs(core): formatting fixes * docs(core): responding to victor comments * docs(core): switching to new terminal code blocks * docs(core): light and dark mode friendly images
96 lines
3.2 KiB
Markdown
96 lines
3.2 KiB
Markdown
# React 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 more common tasks for each project.
|
|
|
|
## Defining Targets
|
|
|
|
Here's the `project.json` file for your `common-ui` project:
|
|
|
|
```json {% fileName="libs/common-ui/project.json" %}
|
|
{
|
|
"name": "common-ui",
|
|
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
"sourceRoot": "libs/common-ui/src",
|
|
"projectType": "library",
|
|
"tags": [],
|
|
"targets": {
|
|
"lint": {
|
|
"executor": "@nrwl/linter:eslint",
|
|
"outputs": ["{options.outputFile}"],
|
|
"options": {
|
|
"lintFilePatterns": ["libs/common-ui/**/*.{ts,tsx,js,jsx}"]
|
|
}
|
|
},
|
|
"test": {
|
|
"executor": "@nrwl/jest:jest",
|
|
"outputs": ["coverage/libs/common-ui"],
|
|
"options": {
|
|
"jestConfig": "libs/common-ui/jest.config.ts",
|
|
"passWithNoTests": true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
You can see that two targets are defined here: `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 - Workspace Optimizations](/react-tutorial/4-workspace-optimization)).
|
|
- `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 `common-ui` project:
|
|
|
|
```{% command="npx nx test common-ui" path="~/myorg" %}
|
|
|
|
> nx run common-ui:test
|
|
|
|
PASS common-ui libs/common-ui/src/lib/common-ui.spec.tsx
|
|
PASS common-ui libs/common-ui/src/lib/banner/banner.spec.tsx
|
|
|
|
Test Suites: 2 passed, 2 total
|
|
Tests: 2 passed, 2 total
|
|
Snapshots: 0 total
|
|
Time: 0.84 s, estimated 1 s
|
|
Ran all test suites.
|
|
|
|
———————————————————————————————————————————————————————————————————————————————————————————————————
|
|
|
|
> NX Successfully ran target test for project common-ui (2s)
|
|
```
|
|
|
|
Next, run a lint check on your `common-ui` project:
|
|
|
|
```{% command="npx nx lint common-ui" path="~/myorg" %}
|
|
|
|
> nx run common-ui:lint
|
|
|
|
|
|
Linting "common-ui"...
|
|
|
|
All files pass linting.
|
|
|
|
|
|
———————————————————————————————————————————————————————————————————————————————————————————————————
|
|
|
|
> NX Successfully ran target lint for project common-ui (2s)
|
|
```
|
|
|
|
## What's Next
|
|
|
|
- Continue to [4: Workspace Optimization](/react-tutorial/4-workspace-optimization)
|