miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

doc(fundamentals): treeview markdown

Browse Source
This commit is contained in:
ben 2019-02-13 13:45:12 -05:00 committed by Victor Savkin
parent 667e1a3619
commit 47eeefd478
3 changed files with 236 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
docs/fundamentals/building-like-google.md
View File

@ -19,15 +19,15 @@ To see how Nx delivers all of these, start with an empty Nx workspace:
## Monorepos with Nx ## Monorepos with Nx
```console ```treeview
apps/ <workspace name>/
libs/ ├── apps/
tools/ ├── libs/
angular.json ├── nx.json
nx.json ├── package.json
package.json ├── tools/
tsconfig.json ├── tsconfig.json
tslint.json └── tslint.json
``` ```
An empty workspace has several root-level configuration files and the folders for applications, libraries, and tools. Since an Nx workspace is an Angular CLI workspace, most configuration files are created by Angular CLI. The only exception is `nx.json`, which contains Nx-specific configuration. An empty workspace has several root-level configuration files and the folders for applications, libraries, and tools. Since an Nx workspace is an Angular CLI workspace, most configuration files are created by Angular CLI. The only exception is `nx.json`, which contains Nx-specific configuration.
@ -48,36 +48,35 @@ Out of the box, Nx comes with two schematics for creating applications.
Creating a new Angular application will result in something like this: Creating a new Angular application will result in something like this:
```console ```treeview
apps/ <workspace name>/
myapp/ ├── README.md
src/ ├── angular.json
app/ ├── apps/
assets/ │   ├── myapp/
environments/ │   │   ├── browserslist
favicon.ico │   │   ├── jest.conf.js
index.html │   │   ├── src/
main.ts │   │   │   ├── app/
polyfills.ts │   │   │   ├── assets/
styles.css │   │   │   ├── environments/
test.ts │   │   │   ├── favicon.ico
browserslist │   │   │   ├── index.html
jest.conf.js │   │   │   ├── main.ts
tsconfig.json │   │   │   ├── polyfills.ts
tsconfig.app.json │   │   │   ├── styles.scss
tsconfig.spec.json │   │   │   └── test.ts
tslint.json │   │   ├── tsconfig.app.json
myapp-e2e/ │   │   ├── tsconfig.json
... │   │   ├── tsconfig.spec.json
libs/ │   │   └── tslint.json
... │   └── myapp-e2e/
tools/ ├── libs/
... ├── nx.json
angular.json ├── package.json
nx.json ├── tools/
package.json ├── tsconfig.json
tsconfig.json └── tslint.json
tslint.json
``` ```
You can run: You can run:
@ -98,26 +97,25 @@ Nx comes with a schematic for creating libraries.
Creating a new TypeScript library will result in something like this: Creating a new TypeScript library will result in something like this:
```console ```treeview
apps/ <workspace name>/
... ├── apps/
libs/ ├── libs/
mylib/ │   └── mylibrary/
src/ │      ├── jest.conf.js
lib/ │      ├── src/
index.ts │      │   ├── lib/
jest.config.js │      │   └── index.ts
tsconfig.json │      ├── tsconfig.app.json
tsconfig.lib.json │      ├── tsconfig.json
tsconfig.spec.json │      ├── tsconfig.spec.json
tslint.json │      └── tslint.json
tools/ ├── nx.json
... ├── package-lock.json
angular.json ├── package.json
nx.json ├── tools/
package.json ├── tsconfig.json
tsconfig.json └── tslint.json
tslint.json
``` ```
By default, libraries are only buildable in the context of a particular application. As a result, the only two available targets are: By default, libraries are only buildable in the context of a particular application. As a result, the only two available targets are:

170
docs/fundamentals/full-stack-development.md
View File

@ -8,36 +8,35 @@ Start with implementing the frontend.
The easier way to add a frontend app to an Nx workspace is to run `ng g application frontend`, which will create: The easier way to add a frontend app to an Nx workspace is to run `ng g application frontend`, which will create:
```console ```treeview
apps/ <workspace name>/
frontend/ ├── README.md
src/ ├── angular.json
app/ ├── apps/
assets/ │   ├── frontend/
environments/ │   │   ├── browserslist
favicon.ico │   │   ├── jest.conf.js
index.html │   │   ├── src/
main.ts │   │   │   ├── app/
polyfills.ts │   │   │   ├── assets/
styles.css │   │   │   ├── environments/
test.ts │   │   │   ├── favicon.ico
browserslist │   │   │   ├── index.html
jest.conf.js │   │   │   ├── main.ts
tsconfig.json │   │   │   ├── polyfills.ts
tsconfig.app.json │   │   │   ├── styles.scss
tsconfig.spec.json │   │   │   └── test.ts
tslint.json │   │   ├── tsconfig.app.json
frontend-e2e/ │   │   ├── tsconfig.json
... │   │   ├── tsconfig.spec.json
libs/ │   │   └── tslint.json
... │   └── frontend-e2e/
tools/ ├── libs/
... ├── nx.json
angular.json ├── package.json
nx.json ├── tools/
package.json ├── tsconfig.json
tsconfig.json └── tslint.json
tslint.json
``` ```
If you have used the Angular CLI, this should all look familiar: same configuration files, same folders. If you have used the Angular CLI, this should all look familiar: same configuration files, same folders.
@ -78,41 +77,36 @@ export class AppComponent {
Next, create the api. You can do it by running `ng g node-application api --frontend-project=frontend` (`--frontend-project=frontend` set ups the proxy configuration such that the frontend application can access the api). Next, create the api. You can do it by running `ng g node-application api --frontend-project=frontend` (`--frontend-project=frontend` set ups the proxy configuration such that the frontend application can access the api).
```console ```treeview
apps/ <workspace name>/
frontend/ ├── apps/
... │   ├── frontend/
frontend-e2e/ │   ├── frontend-e2e/
... │   └── api/
api/ │      ├── jest.conf.js
src/ │      ├── proxy.conf.json
app/ │      ├── src/
app.module.ts │      │   ├── app/
app.controller.ts │      │   │   ├── app.controller.ts
app.controller.spec.ts │      │   │   ├── app.controller.spec.ts
app.service.ts │      │   │   ├── app.module.ts
app.service.spec.ts │      │   │   ├── app.service.ts
assets/ │      │   │   └── app.service.spec.ts
... │      │   ├── assets/
environments/ │      │   ├── environments/
environment.ts │      │   │   ├── environment.ts
environment.prod.ts │      │   │ └── environment.prod.ts
main.ts │      │   └── main.ts
jest.config.js │      ├── tsconfig.app.json
tsconfig.json │      ├── tsconfig.json
tsconfig.app.json │      ├── tsconfig.spec.json
tsconfig.spec.json │      └── tslint.json
tslint.json ├── libs/
proxy.conf.json ├── nx.json
libs/ ├── package.json
... ├── tools/
tools/ ├── tsconfig.json
... └── tslint.json
angular.json
nx.json
package.json
tsconfig.json
tslint.json
``` ```
The `apps` directory is where Nx places anything you can run: frontend applications, backend applications, e2e test suites. That's why the `api` application appeared there. The `apps` directory is where Nx places anything you can run: frontend applications, backend applications, e2e test suites. That's why the `api` application appeared there.
@ -195,31 +189,27 @@ Normally sharing code between the backend and the frontend would have required d
Create a new lib by running `ng g library data --framework=none`. Create a new lib by running `ng g library data --framework=none`.
```console ```treeview
apps/ <workspace name>/
frontend/ ├── apps/
... │   ├── frontend/
frontend-e2e/ │   ├── frontend-e2e/
... │   └── api/
api/ ├── libs/
... │   └── data/
libs/ │      ├── jest.conf.js
data/ │      ├── src/
src/ │      │   ├── lib/
lib/ │      │   └── index.ts
index.ts │      ├── tsconfig.app.json
jest.config.js │      ├── tsconfig.json
tsconfig.json │      ├── tsconfig.spec.json
tsconfig.lib.json │      └── tslint.json
tsconfig.spec.json ├── nx.json
tslint.json ├── package.json
tools/ ├── tools/
... ├── tsconfig.json
angular.json └── tslint.json
nx.json
package.json
tsconfig.json
tslint.json
``` ```
Next, move `Ticket` into `libs/data/src/index.ts`: Next, move `Ticket` into `libs/data/src/index.ts`:

199
docs/fundamentals/modernizing-dev-workflow.md
View File

@ -27,37 +27,34 @@ ng g node-application api # you can also be explicit and pass `--framework=nestj
This will create the following: This will create the following:
```console ```treeview
apps/ <workspace name>/
api/ ├── apps/
src/ │   └── api/
app/ │      ├── jest.conf.js
app.module.ts │      ├── proxy.conf.json
app.controller.ts │      ├── src/
app.controller.spec.ts │      │   ├── app/
app.service.ts │      │   │   ├── app.controller.ts
app.service.spec.ts │      │   │   ├── app.controller.spec.ts
assets/ │      │   │   ├── app.module.ts
... │      │   │   ├── app.service.ts
environments/ │      │   │   └── app.service.spec.ts
environment.ts │      │   ├── assets/
environment.prod.ts │      │   ├── environments/
main.ts │      │   │   ├── environment.ts
jest.config.js │      │   │ └── environment.prod.ts
tsconfig.json │      │   └── main.ts
tsconfig.app.json │      ├── tsconfig.app.json
tsconfig.spec.json │      ├── tsconfig.json
tslint.json │      ├── tsconfig.spec.json
proxy.conf.json │      └── tslint.json
libs/ ├── libs/
... ├── nx.json
tools/ ├── package.json
... ├── tools/
angular.json ├── tsconfig.json
nx.json └── tslint.json
package.json
tsconfig.json
tslint.json
``` ```
You can run: You can run:
@ -103,35 +100,34 @@ By default, when creating a new Angular application, Nx will use Cypress to crea
So running `ng g application frontend` will create: So running `ng g application frontend` will create:
```console ```treeview
apps/ <workspace name>/
frontend/ ├── README.md
... ├── angular.json
frontend-e2e/ ├── apps/
src/ │   ├── frontend/
fixtures/ │   └── frontend-e2e/
example.json │      ├── cypress.json
integration/ │      ├── src/
app.spec.ts │      │   ├── fixtures/
plugins/ │      │   │   └── example.json
index.ts │      │   ├── integration/
support/ │      │   │   └── app.spec.ts
app.po.ts │      │   ├── plugins/
commands.ts │      │   │   └── index.ts
index.ts │      │   └── support/
cypress.json │      │      ├── app.po.ts
tsconfig.e2e.json │      │      ├── commands.ts
tsconfig.json │      │      └── index.ts
│      ├── tsconfig.e2e.json
libs/ │      ├── tsconfig.json
... │      └── tslint.json
tools/ ├── libs/
... ├── nx.json
angular.json ├── package.json
nx.json ├── tools/
package.json ├── tsconfig.json
tsconfig.json └── tslint.json
tslint.json
``` ```
You can run: You can run:
@ -154,36 +150,36 @@ Jest is a fast 0-setup testing framework from Facebook.
By default, Nx uses Jest for both Angular and Node.js applications. So if you run `ng g application frontend`, you will get: By default, Nx uses Jest for both Angular and Node.js applications. So if you run `ng g application frontend`, you will get:
```console ```treeview
apps/ <workspace name>/
frontend/ ├── README.md
src/ ├── angular.json
app/ ├── apps/
assets/ │   ├── frontend/
environments/ │   │   ├── browserslist
favicon.ico │   │   ├── jest.conf.js
index.html │   │   ├── src/
main.ts │   │   │   ├── app/
polyfills.ts │   │   │   ├── assets/
styles.css │   │   │   ├── environments/
test.ts │   │   │   ├── favicon.ico
browserslist │   │   │   ├── index.html
jest.conf.js │   │   │   ├── main.ts
tsconfig.json │   │   │   ├── polyfills.ts
tsconfig.app.json │   │   │   ├── styles.scss
tsconfig.spec.json │   │   │   └── test.ts
tslint.json │   │   ├── tsconfig.app.json
frontend-e2e/ │   │   ├── tsconfig.json
... │   │   ├── tsconfig.spec.json
libs/ │   │   └── tslint.json
... │   └── frontend-e2e/
tools/ ├── libs/
... ├── nx.json
angular.json ├── package-lock.json
nx.json ├── package.json
package.json ├── tools/
tsconfig.json ├── tsconfig.json
tslint.json └── tslint.json
``` ```
Read more about Jest at [jestjs.io](https://jestjs.io). Read more about Jest at [jestjs.io](https://jestjs.io).
@ -198,16 +194,19 @@ To use Karma instead of Jest, run `ng g application frontend --unit-test-runner=
Prettier is an opinionated code formatter. An Nx workspace comes with Prettier preconfigured. Prettier is an opinionated code formatter. An Nx workspace comes with Prettier preconfigured.
```cosnole ```treeview
apps/ <workspace name>/
libs/ ├── README.md
tools/ ├── angular.json
.prettierrc # prettier config ├── apps/
angular.json ├── libs/
nx.json ├── nx.json
package.json ├── package-lock.json
tsconfig.json ├── package.json
tslint.json ├── tools/
├── .prettierrc # prettier config
├── tsconfig.json
└── tslint.json
``` ```
You can run: You can run: