docs(core): remove tutorial sections (#5965)
This commit is contained in:
Benjamin Cabanes
GitHub
parent
404ed72068
commit
4a9512dcd1
@ -121,10 +121,3 @@ yarn nx serve todos
|
||||
## Note on `nx serve` and `ng serve`
|
||||
|
||||
Internally, the Nx CLI delegates to the Angular CLI when running commands or generating code. The `nx serve` command produces the same result as `ng serve`, and `nx build` produces the same results as `ng build`. However, the Nx CLI supports advanced capabilities that aren't supported by the Angular CLI. For instance, Nx's computation cache only works when using the Nx CLI. In other words, using `nx` instead `ng` will result in the same output, but often will perform a lot better. [Read more about Nx CLI and Angular CLI.](/angular/getting-started/nx-cli)
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:4200 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to Todos!"
|
||||
Page saying "This is an Angular app built with the Angular CLI"
|
||||
404
|
||||
|
||||
@ -38,11 +38,3 @@ If you have not done so already, stop the `npx nx serve` command and run `npx nx
|
||||
A UI will open. Click the button in the top right corner that says "Run all specs". Keep the E2E tests running.
|
||||
|
||||
As you progress through the tutorial, you will work on making these E2E tests pass.
|
||||
|
||||
!!!!!
|
||||
What assertion fails?
|
||||
!!!!!
|
||||
Expect 0 to equal 2
|
||||
Nothing fails. Everything works.
|
||||
Cannot find any elements matching 'li.todo'
|
||||
Cannot find any elements matching 'button#add-todo'
|
||||
|
||||
@ -81,9 +81,3 @@ export class AppComponent {
|
||||
```
|
||||
|
||||
The tests should pass now.
|
||||
|
||||
!!!!!
|
||||
What will you see if you run: `npx nx e2e todos-e2e --headless`
|
||||
!!!!!
|
||||
Cypress will run in the headless mode, and the test will pass.
|
||||
Cypress will run in the headless mode, and the test will fail.
|
||||
|
||||
@ -57,10 +57,3 @@ export class AppComponent {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run `npx nx serve todos` and open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
"the server responded with a status of 404 (Not Found)" in Console.
|
||||
Blank screen.
|
||||
Exception rendered on the screen.
|
||||
|
||||
@ -181,10 +181,3 @@ export class AppController {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx serve api" and open http://localhost:3333/api/todos. What do you see?
|
||||
!!!!!
|
||||
`[{"title":"Todo 1"},{"title":"Todo 2"}]`
|
||||
Blank screen
|
||||
404
|
||||
|
||||
@ -41,10 +41,3 @@ It created a proxy configuration that allows the Angular application to talk to
|
||||
```
|
||||
|
||||
This configuration tells `nx serve` to forward all requests starting with `/api` to the process listening on port 3333.
|
||||
|
||||
!!!!!
|
||||
Now run both "npx nx serve todos" and "npx nx serve api" in separate terminals, open http://localhost:4200. What do you see
|
||||
!!!!!
|
||||
Todos application is working!
|
||||
404 in the console
|
||||
Todos are displayed but the Add Todo button doesn't work
|
||||
|
||||
@ -109,10 +109,3 @@ export class AppComponent {
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `npx nx serve`. **So restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between frontend and backend apps
|
||||
Between different frontend apps
|
||||
Between different node apps
|
||||
|
||||
@ -155,9 +155,3 @@ export class AppModule {}
|
||||
```
|
||||
|
||||
**Restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
angular.json and tsconfig.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "npm run dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -99,10 +99,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `npx nx lint api --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 2 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -61,10 +61,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
npx nx affected --target=build
|
||||
npx nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects to run test
|
||||
The `todos` project failed as before
|
||||
`Cannot run tests against master` error
|
||||
|
||||
@ -122,10 +122,3 @@ Now that the application is set up, run it locally via:
|
||||
```shell script
|
||||
nx 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
|
||||
|
||||
@ -147,10 +147,3 @@ We changed the `@Get` decorator for the `getData` function to point to the `api`
|
||||
Then we added the `root` function which renders the `index` file from our `views` directory.
|
||||
|
||||
> The serve process should still be running. If it isn't, restart the process with `nx serve todos`
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:3333 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to todos!"
|
||||
Page saying "{"message":"Welcome to todos!"}"
|
||||
404
|
||||
|
||||
@ -73,10 +73,3 @@ export class TodosService {
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `nx serve`. **So restart `nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between Nx applications and libraries
|
||||
Between Nx applications
|
||||
Between Nx libraries
|
||||
|
||||
@ -87,9 +87,3 @@ export class AppModule {}
|
||||
```
|
||||
|
||||
**Restart `nx serve todos` then go to http://localhost:3333/auth. You should see `{ authenticated: true }`**
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
workspace.json and tsconfig.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "nx dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -73,10 +73,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `nx lint auth --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 1 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -73,9 +73,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
nx affected --target=build
|
||||
nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects with "invalid" were run
|
||||
An error message saying that the "invalid" target is invalid
|
||||
|
||||
@ -115,10 +115,3 @@ or
|
||||
```bash
|
||||
yarn nx serve todos
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:4200 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to Todos!"
|
||||
Page saying "This is an React app built with Create React App"
|
||||
404
|
||||
|
||||
@ -38,11 +38,3 @@ If you have not done so already, stop the `npx nx serve` command and run `npx nx
|
||||
A UI will open. Click the button in the top right corner that says "Run all specs". Keep the E2E tests running.
|
||||
|
||||
As you progress through the tutorial, you will work on making these E2E tests pass.
|
||||
|
||||
!!!!!
|
||||
What assertion fails?
|
||||
!!!!!
|
||||
Expect 0 to equal 2
|
||||
Nothing fails. Everything works.
|
||||
Cannot find any elements matching 'li.todo'
|
||||
Cannot find any elements matching 'button#add-todo'
|
||||
|
||||
@ -89,9 +89,3 @@ export default App;
|
||||
```
|
||||
|
||||
The tests should pass now.
|
||||
|
||||
!!!!!
|
||||
What will you see if you run: `npx nx e2e todos-e2e --headless`
|
||||
!!!!!
|
||||
Cypress will run in the headless mode, and the test will pass.
|
||||
Cypress will run in the headless mode, and the test will fail.
|
||||
|
||||
@ -52,10 +52,3 @@ const App = () => {
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run `npx nx serve todos` and open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
"the server responded with a status of 404 (Not Found)" in Console.
|
||||
Blank screen.
|
||||
Exception rendered on the screen.
|
||||
|
||||
@ -149,10 +149,3 @@ const server = app.listen(port, () => {
|
||||
});
|
||||
server.on('error', console.error);
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx serve api" and open http://localhost:3333/api/todos. What do you see?
|
||||
!!!!!
|
||||
`[{"title":"Todo 1"},{"title":"Todo 2"}]`
|
||||
Blank screen
|
||||
404
|
||||
|
||||
@ -76,10 +76,3 @@ Options:
|
||||
It helps with good editor integration (see [VSCode Support](https://nx.dev/react/getting-started/console)).
|
||||
|
||||
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).
|
||||
|
||||
!!!!!
|
||||
Now run both "npx nx serve todos" and "npx nx serve api" in separate terminals, open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
Todos application is working!
|
||||
404 in the console
|
||||
Todos are displayed but the Add Todo button doesn't work
|
||||
|
||||
@ -86,10 +86,3 @@ export default App;
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `npx nx serve`. **So restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between frontend and backend apps
|
||||
Between different frontend apps
|
||||
Between different node apps
|
||||
|
||||
@ -174,9 +174,3 @@ export default App;
|
||||
**Restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
> Nx helps you explore code generation options. Run `npx nx g @nrwl/react:component --help` to see all options available. Pass `--dry-run` to the command to see what would be generated without actually changing anything, like this: `npx nx g @nrwl/react:component mycmp --project=ui --dry-run`.
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
workspace.json and tsconfig.base.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "npx nx dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -94,10 +94,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `npx nx lint api --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 2 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -70,9 +70,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
npx nx affected --target=build
|
||||
npx nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects with "invalid" were run
|
||||
An error message saying that the "invalid" target is invalid
|
||||
|
||||
@ -121,10 +121,3 @@ yarn nx serve todos
|
||||
## Note on `nx serve` and `ng serve`
|
||||
|
||||
Internally, the Nx CLI delegates to the Angular CLI when running commands or generating code. The `nx serve` command produces the same result as `ng serve`, and `nx build` produces the same results as `ng build`. However, the Nx CLI supports advanced capabilities that aren't supported by the Angular CLI. For instance, Nx's computation cache only works when using the Nx CLI. In other words, using `nx` instead `ng` will result in the same output, but often will perform a lot better. [Read more about Nx CLI and Angular CLI.](/angular/getting-started/nx-and-cli)
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:4200 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to Todos!"
|
||||
Page saying "This is an Angular app built with the Angular CLI"
|
||||
404
|
||||
|
||||
@ -38,11 +38,3 @@ If you have not done so already, stop the `npx nx serve` command and run `npx nx
|
||||
A UI will open. Click the button in the top right corner that says "Run all specs". Keep the E2E tests running.
|
||||
|
||||
As you progress through the tutorial, you will work on making these E2E tests pass.
|
||||
|
||||
!!!!!
|
||||
What assertion fails?
|
||||
!!!!!
|
||||
Expect 0 to equal 2
|
||||
Nothing fails. Everything works.
|
||||
Cannot find any elements matching 'li.todo'
|
||||
Cannot find any elements matching 'button#add-todo'
|
||||
|
||||
@ -81,9 +81,3 @@ export class AppComponent {
|
||||
```
|
||||
|
||||
The tests should pass now.
|
||||
|
||||
!!!!!
|
||||
What will you see if you run: `npx nx e2e todos-e2e --headless`
|
||||
!!!!!
|
||||
Cypress will run in the headless mode, and the test will pass.
|
||||
Cypress will run in the headless mode, and the test will fail.
|
||||
|
||||
@ -57,10 +57,3 @@ export class AppComponent {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run `npx nx serve todos` and open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
"the server responded with a status of 404 (Not Found)" in Console.
|
||||
Blank screen.
|
||||
Exception rendered on the screen.
|
||||
|
||||
@ -181,10 +181,3 @@ export class AppController {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx serve api" and open http://localhost:3333/api/todos. What do you see?
|
||||
!!!!!
|
||||
`[{"title":"Todo 1"},{"title":"Todo 2"}]`
|
||||
Blank screen
|
||||
404
|
||||
|
||||
@ -41,10 +41,3 @@ It created a proxy configuration that allows the Angular application to talk to
|
||||
```
|
||||
|
||||
This configuration tells `nx serve` to forward all requests starting with `/api` to the process listening on port 3333.
|
||||
|
||||
!!!!!
|
||||
Now run both "npx nx serve todos" and "npx nx serve api" in separate terminals, open http://localhost:4200. What do you see
|
||||
!!!!!
|
||||
Todos application is working!
|
||||
404 in the console
|
||||
Todos are displayed but the Add Todo button doesn't work
|
||||
|
||||
@ -109,10 +109,3 @@ export class AppComponent {
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `npx nx serve`. **So restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between frontend and backend apps
|
||||
Between different frontend apps
|
||||
Between different node apps
|
||||
|
||||
@ -155,9 +155,3 @@ export class AppModule {}
|
||||
```
|
||||
|
||||
**Restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
angular.json and tsconfig.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "npm run dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -99,10 +99,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `npx nx lint api --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 2 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -61,10 +61,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
npx nx affected --target=build
|
||||
npx nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects to run test
|
||||
The `todos` project failed as before
|
||||
`Cannot run tests against master` error
|
||||
|
||||
@ -122,10 +122,3 @@ Now that the application is set up, run it locally via:
|
||||
```shell script
|
||||
nx 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
|
||||
|
||||
@ -147,10 +147,3 @@ We changed the `@Get` decorator for the `getData` function to point to the `api`
|
||||
Then we added the `root` function which renders the `index` file from our `views` directory.
|
||||
|
||||
> The serve process should still be running. If it isn't, restart the process with `nx serve todos`
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:3333 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to todos!"
|
||||
Page saying "{"message":"Welcome to todos!"}"
|
||||
404
|
||||
|
||||
@ -73,10 +73,3 @@ export class TodosService {
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `nx serve`. **So restart `nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between Nx applications and libraries
|
||||
Between Nx applications
|
||||
Between Nx libraries
|
||||
|
||||
@ -87,9 +87,3 @@ export class AppModule {}
|
||||
```
|
||||
|
||||
**Restart `nx serve todos` then go to http://localhost:3333/auth. You should see `{ authenticated: true }`**
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
workspace.json and tsconfig.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "nx dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -73,10 +73,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `nx lint auth --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 1 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -73,9 +73,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
nx affected --target=build
|
||||
nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects with "invalid" were run
|
||||
An error message saying that the "invalid" target is invalid
|
||||
|
||||
@ -115,10 +115,3 @@ or
|
||||
```bash
|
||||
yarn nx serve todos
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:4200 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to Todos!"
|
||||
Page saying "This is an React app built with Create React App"
|
||||
404
|
||||
|
||||
@ -38,11 +38,3 @@ If you have not done so already, stop the `npx nx serve` command and run `npx nx
|
||||
A UI will open. Click the button in the top right corner that says "Run all specs". Keep the E2E tests running.
|
||||
|
||||
As you progress through the tutorial, you will work on making these E2E tests pass.
|
||||
|
||||
!!!!!
|
||||
What assertion fails?
|
||||
!!!!!
|
||||
Expect 0 to equal 2
|
||||
Nothing fails. Everything works.
|
||||
Cannot find any elements matching 'li.todo'
|
||||
Cannot find any elements matching 'button#add-todo'
|
||||
|
||||
@ -89,9 +89,3 @@ export default App;
|
||||
```
|
||||
|
||||
The tests should pass now.
|
||||
|
||||
!!!!!
|
||||
What will you see if you run: `npx nx e2e todos-e2e --headless`
|
||||
!!!!!
|
||||
Cypress will run in the headless mode, and the test will pass.
|
||||
Cypress will run in the headless mode, and the test will fail.
|
||||
|
||||
@ -52,10 +52,3 @@ const App = () => {
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run `npx nx serve todos` and open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
"the server responded with a status of 404 (Not Found)" in Console.
|
||||
Blank screen.
|
||||
Exception rendered on the screen.
|
||||
|
||||
@ -149,10 +149,3 @@ const server = app.listen(port, () => {
|
||||
});
|
||||
server.on('error', console.error);
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx serve api" and open http://localhost:3333/api/todos. What do you see?
|
||||
!!!!!
|
||||
`[{"title":"Todo 1"},{"title":"Todo 2"}]`
|
||||
Blank screen
|
||||
404
|
||||
|
||||
@ -75,10 +75,3 @@ Options:
|
||||
It helps with good editor integration (see [VSCode Support](https://nx.dev/react/getting-started/console)).
|
||||
|
||||
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).
|
||||
|
||||
!!!!!
|
||||
Now run both "npx nx serve todos" and "npx nx serve api" in separate terminals, open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
Todos application is working!
|
||||
404 in the console
|
||||
Todos are displayed but the Add Todo button doesn't work
|
||||
|
||||
@ -86,10 +86,3 @@ export default App;
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `npx nx serve`. **So restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between frontend and backend apps
|
||||
Between different frontend apps
|
||||
Between different node apps
|
||||
|
||||
@ -174,9 +174,3 @@ export default App;
|
||||
**Restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
> Nx helps you explore code generation options. Run `npx nx g @nrwl/react:component --help` to see all options available. Pass `--dry-run` to the command to see what would be generated without actually changing anything, like this: `npx nx g @nrwl/react:component mycmp --project=ui --dry-run`.
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
workspace.json and tsconfig.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "npx nx dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -94,10 +94,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `npx nx lint api --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 2 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -70,9 +70,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
npx nx affected --target=build
|
||||
npx nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects with "invalid" were run
|
||||
An error message saying that the "invalid" target is invalid
|
||||
|
||||
@ -117,10 +117,3 @@ yarn nx serve todos
|
||||
## Note on `nx serve` and `ng serve`
|
||||
|
||||
Internally, the Nx CLI delegates to the Angular CLI when running commands or generating code. The `nx serve` command produces the same result as `ng serve`, and `nx build` produces the same results as `ng build`. However, the Nx CLI supports advanced capabilities that aren't supported by the Angular CLI. For instance, Nx's computation cache only works when using the Nx CLI. In other words, using `nx` instead `ng` will result in the same output, but often will perform a lot better. [Read more about Nx CLI and Angular CLI.](/angular/cli/nx-and-cli)
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:4200 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to Todos!"
|
||||
Page saying "This is an Angular app built with the Angular CLI"
|
||||
404
|
||||
|
||||
@ -38,11 +38,3 @@ If you have not done so already, stop the `npx nx serve` command and run `npx nx
|
||||
A UI will open. Click the button in the top right corner that says "Run all specs". Keep the E2E tests running.
|
||||
|
||||
As you progress through the tutorial, you will work on making these E2E tests pass.
|
||||
|
||||
!!!!!
|
||||
What assertion fails?
|
||||
!!!!!
|
||||
Expect 0 to equal 2
|
||||
Nothing fails. Everything works.
|
||||
Cannot find any elements matching 'li.todo'
|
||||
Cannot find any elements matching 'button#add-todo'
|
||||
|
||||
@ -81,9 +81,3 @@ export class AppComponent {
|
||||
```
|
||||
|
||||
The tests should pass now.
|
||||
|
||||
!!!!!
|
||||
What will you see if you run: `npx nx e2e todos-e2e --headless`
|
||||
!!!!!
|
||||
Cypress will run in the headless mode, and the test will pass.
|
||||
Cypress will run in the headless mode, and the test will fail.
|
||||
|
||||
@ -57,10 +57,3 @@ export class AppComponent {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run `npx nx serve todos` and open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
"the server responded with a status of 404 (Not Found)" in Console.
|
||||
Blank screen.
|
||||
Exception rendered on the screen.
|
||||
|
||||
@ -181,10 +181,3 @@ export class AppController {
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx serve api" and open http://localhost:3333/api/todos. What do you see?
|
||||
!!!!!
|
||||
`[{"title":"Todo 1"},{"title":"Todo 2"}]`
|
||||
Blank screen
|
||||
404
|
||||
|
||||
@ -41,10 +41,3 @@ It created a proxy configuration that allows the Angular application to talk to
|
||||
```
|
||||
|
||||
This configuration tells `nx serve` to forward all requests starting with `/api` to the process listening on port 3333.
|
||||
|
||||
!!!!!
|
||||
Now run both "npx nx serve todos" and "npx nx serve api" in separate terminals, open http://localhost:4200. What do you see
|
||||
!!!!!
|
||||
Todos application is working!
|
||||
404 in the console
|
||||
Todos are displayed but the Add Todo button doesn't work
|
||||
|
||||
@ -109,10 +109,3 @@ export class AppComponent {
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `npx nx serve`. **So restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between frontend and backend apps
|
||||
Between different frontend apps
|
||||
Between different node apps
|
||||
|
||||
@ -155,9 +155,3 @@ export class AppModule {}
|
||||
```
|
||||
|
||||
**Restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
angular.json and tsconfig.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "npm run dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -99,10 +99,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `npx nx lint api --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 2 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -61,10 +61,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
npx nx affected --target=build
|
||||
npx nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects to run test
|
||||
The `todos` project failed as before
|
||||
`Cannot run tests against master` error
|
||||
|
||||
@ -118,10 +118,3 @@ Now that the application is set up, run it locally via:
|
||||
```shell script
|
||||
nx 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
|
||||
|
||||
@ -147,10 +147,3 @@ We changed the `@Get` decorator for the `getData` function to point to the `api`
|
||||
Then we added the `root` function which renders the `index` file from our `views` directory.
|
||||
|
||||
> The serve process should still be running. If it isn't, restart the process with `nx serve todos`
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:3333 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to todos!"
|
||||
Page saying "{"message":"Welcome to todos!"}"
|
||||
404
|
||||
|
||||
@ -73,10 +73,3 @@ export class TodosService {
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `nx serve`. **So restart `nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between Nx applications and libraries
|
||||
Between Nx applications
|
||||
Between Nx libraries
|
||||
|
||||
@ -87,9 +87,3 @@ export class AppModule {}
|
||||
```
|
||||
|
||||
**Restart `nx serve todos` then go to http://localhost:3333/auth. You should see `{ authenticated: true }`**
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
workspace.json and tsconfig.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "nx dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -73,10 +73,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `nx lint auth --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 1 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -73,9 +73,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
nx affected --target=build
|
||||
nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects with "invalid" were run
|
||||
An error message saying that the "invalid" target is invalid
|
||||
|
||||
@ -111,10 +111,3 @@ or
|
||||
```bash
|
||||
yarn nx serve todos
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Open http://localhost:4200 in the browser. What do you see?
|
||||
!!!!!
|
||||
Page saying "Welcome to Todos!"
|
||||
Page saying "This is an React app built with Create React App"
|
||||
404
|
||||
|
||||
@ -38,11 +38,3 @@ If you have not done so already, stop the `npx nx serve` command and run `npx nx
|
||||
A UI will open. Click the button in the top right corner that says "Run all specs". Keep the E2E tests running.
|
||||
|
||||
As you progress through the tutorial, you will work on making these E2E tests pass.
|
||||
|
||||
!!!!!
|
||||
What assertion fails?
|
||||
!!!!!
|
||||
Expect 0 to equal 2
|
||||
Nothing fails. Everything works.
|
||||
Cannot find any elements matching 'li.todo'
|
||||
Cannot find any elements matching 'button#add-todo'
|
||||
|
||||
@ -89,9 +89,3 @@ export default App;
|
||||
```
|
||||
|
||||
The tests should pass now.
|
||||
|
||||
!!!!!
|
||||
What will you see if you run: `npx nx e2e todos-e2e --headless`
|
||||
!!!!!
|
||||
Cypress will run in the headless mode, and the test will pass.
|
||||
Cypress will run in the headless mode, and the test will fail.
|
||||
|
||||
@ -52,10 +52,3 @@ const App = () => {
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run `npx nx serve todos` and open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
"the server responded with a status of 404 (Not Found)" in Console.
|
||||
Blank screen.
|
||||
Exception rendered on the screen.
|
||||
|
||||
@ -149,10 +149,3 @@ const server = app.listen(port, () => {
|
||||
});
|
||||
server.on('error', console.error);
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx serve api" and open http://localhost:3333/api/todos. What do you see?
|
||||
!!!!!
|
||||
`[{"title":"Todo 1"},{"title":"Todo 2"}]`
|
||||
Blank screen
|
||||
404
|
||||
|
||||
@ -75,10 +75,3 @@ Options:
|
||||
It helps with good editor integration (see [VSCode Support](https://nx.dev/react/cli/console)).
|
||||
|
||||
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).
|
||||
|
||||
!!!!!
|
||||
Now run both "npx nx serve todos" and "npx nx serve api" in separate terminals, open http://localhost:4200. What do you see?
|
||||
!!!!!
|
||||
Todos application is working!
|
||||
404 in the console
|
||||
Todos are displayed but the Add Todo button doesn't work
|
||||
|
||||
@ -86,10 +86,3 @@ export default App;
|
||||
```
|
||||
|
||||
Every time you add a new library, you have to restart `npx nx serve`. **So restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
!!!!!
|
||||
Nx allows you to share code...
|
||||
!!!!!
|
||||
Between frontend and backend apps
|
||||
Between different frontend apps
|
||||
Between different node apps
|
||||
|
||||
@ -174,9 +174,3 @@ export default App;
|
||||
**Restart both `npx nx serve api` and `npx nx serve todos` and you should see the application running.**
|
||||
|
||||
> Nx helps you explore code generation options. Run `npx nx g @nrwl/react:component --help` to see all options available. Pass `--dry-run` to the command to see what would be generated without actually changing anything, like this: `npx nx g @nrwl/react:component mycmp --project=ui --dry-run`.
|
||||
|
||||
!!!!!
|
||||
Libraries' public API is defined in...
|
||||
!!!!!
|
||||
index.ts
|
||||
workspace.json and tsconfig.json files
|
||||
|
||||
@ -9,10 +9,3 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
|
||||
Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
|
||||
|
||||
With Nx, you can do better than that.
|
||||
|
||||
!!!!!
|
||||
Run "npx nx dep-graph". What do you see?
|
||||
!!!!!
|
||||
A dependency diagram in the browser
|
||||
A dep-graph.html file created at the root of the workspace
|
||||
A json document printed out in the terminal
|
||||
|
||||
@ -94,10 +94,3 @@ All files pass linting.
|
||||
```
|
||||
|
||||
> Add --parallel to any command, and Nx will do most of the work in parallel.
|
||||
|
||||
!!!!!
|
||||
Run `npx nx lint api --with-deps`. What do you see?
|
||||
!!!!!
|
||||
Nx read the output from cache instead of running the command for 1 out of 2 projects.
|
||||
Everything was retrieved from the cache
|
||||
`Cannot lint data` error
|
||||
|
||||
@ -70,9 +70,3 @@ You can run any target against the affected projects in the graph like this:
|
||||
npx nx affected --target=build
|
||||
npx nx affected:build
|
||||
```
|
||||
|
||||
!!!!!
|
||||
Run "npx nx affected --target=invalid --base=master". What do you see?
|
||||
!!!!!
|
||||
No projects with "invalid" were run
|
||||
An error message saying that the "invalid" target is invalid
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user