doc(fundamentals): treeview markdown
This commit is contained in:
ben
Victor Savkin
parent
667e1a3619
commit
47eeefd478
@ -19,15 +19,15 @@ To see how Nx delivers all of these, start with an empty Nx workspace:
|
||||
|
||||
## Monorepos with Nx
|
||||
|
||||
```console
|
||||
apps/
|
||||
libs/
|
||||
tools/
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── apps/
|
||||
├── libs/
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── tsconfig.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.
|
||||
@ -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:
|
||||
|
||||
```console
|
||||
apps/
|
||||
myapp/
|
||||
src/
|
||||
app/
|
||||
assets/
|
||||
environments/
|
||||
favicon.ico
|
||||
index.html
|
||||
main.ts
|
||||
polyfills.ts
|
||||
styles.css
|
||||
test.ts
|
||||
browserslist
|
||||
jest.conf.js
|
||||
tsconfig.json
|
||||
tsconfig.app.json
|
||||
tsconfig.spec.json
|
||||
tslint.json
|
||||
myapp-e2e/
|
||||
...
|
||||
libs/
|
||||
...
|
||||
tools/
|
||||
...
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── README.md
|
||||
├── angular.json
|
||||
├── apps/
|
||||
│ ├── myapp/
|
||||
│ │ ├── browserslist
|
||||
│ │ ├── jest.conf.js
|
||||
│ │ ├── src/
|
||||
│ │ │ ├── app/
|
||||
│ │ │ ├── assets/
|
||||
│ │ │ ├── environments/
|
||||
│ │ │ ├── favicon.ico
|
||||
│ │ │ ├── index.html
|
||||
│ │ │ ├── main.ts
|
||||
│ │ │ ├── polyfills.ts
|
||||
│ │ │ ├── styles.scss
|
||||
│ │ │ └── test.ts
|
||||
│ │ ├── tsconfig.app.json
|
||||
│ │ ├── tsconfig.json
|
||||
│ │ ├── tsconfig.spec.json
|
||||
│ │ └── tslint.json
|
||||
│ └── myapp-e2e/
|
||||
├── libs/
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── tsconfig.json
|
||||
└── tslint.json
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```console
|
||||
apps/
|
||||
...
|
||||
libs/
|
||||
mylib/
|
||||
src/
|
||||
lib/
|
||||
index.ts
|
||||
jest.config.js
|
||||
tsconfig.json
|
||||
tsconfig.lib.json
|
||||
tsconfig.spec.json
|
||||
tslint.json
|
||||
tools/
|
||||
...
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── apps/
|
||||
├── libs/
|
||||
│ └── mylibrary/
|
||||
│ ├── jest.conf.js
|
||||
│ ├── src/
|
||||
│ │ ├── lib/
|
||||
│ │ └── index.ts
|
||||
│ ├── tsconfig.app.json
|
||||
│ ├── tsconfig.json
|
||||
│ ├── tsconfig.spec.json
|
||||
│ └── tslint.json
|
||||
├── nx.json
|
||||
├── package-lock.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── tsconfig.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:
|
||||
|
||||
@ -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:
|
||||
|
||||
```console
|
||||
apps/
|
||||
frontend/
|
||||
src/
|
||||
app/
|
||||
assets/
|
||||
environments/
|
||||
favicon.ico
|
||||
index.html
|
||||
main.ts
|
||||
polyfills.ts
|
||||
styles.css
|
||||
test.ts
|
||||
browserslist
|
||||
jest.conf.js
|
||||
tsconfig.json
|
||||
tsconfig.app.json
|
||||
tsconfig.spec.json
|
||||
tslint.json
|
||||
frontend-e2e/
|
||||
...
|
||||
libs/
|
||||
...
|
||||
tools/
|
||||
...
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── README.md
|
||||
├── angular.json
|
||||
├── apps/
|
||||
│ ├── frontend/
|
||||
│ │ ├── browserslist
|
||||
│ │ ├── jest.conf.js
|
||||
│ │ ├── src/
|
||||
│ │ │ ├── app/
|
||||
│ │ │ ├── assets/
|
||||
│ │ │ ├── environments/
|
||||
│ │ │ ├── favicon.ico
|
||||
│ │ │ ├── index.html
|
||||
│ │ │ ├── main.ts
|
||||
│ │ │ ├── polyfills.ts
|
||||
│ │ │ ├── styles.scss
|
||||
│ │ │ └── test.ts
|
||||
│ │ ├── tsconfig.app.json
|
||||
│ │ ├── tsconfig.json
|
||||
│ │ ├── tsconfig.spec.json
|
||||
│ │ └── tslint.json
|
||||
│ └── frontend-e2e/
|
||||
├── libs/
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── tsconfig.json
|
||||
└── tslint.json
|
||||
```
|
||||
|
||||
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).
|
||||
|
||||
```console
|
||||
apps/
|
||||
frontend/
|
||||
...
|
||||
frontend-e2e/
|
||||
...
|
||||
api/
|
||||
src/
|
||||
app/
|
||||
app.module.ts
|
||||
app.controller.ts
|
||||
app.controller.spec.ts
|
||||
app.service.ts
|
||||
app.service.spec.ts
|
||||
assets/
|
||||
...
|
||||
environments/
|
||||
environment.ts
|
||||
environment.prod.ts
|
||||
main.ts
|
||||
jest.config.js
|
||||
tsconfig.json
|
||||
tsconfig.app.json
|
||||
tsconfig.spec.json
|
||||
tslint.json
|
||||
proxy.conf.json
|
||||
libs/
|
||||
...
|
||||
tools/
|
||||
...
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── apps/
|
||||
│ ├── frontend/
|
||||
│ ├── frontend-e2e/
|
||||
│ └── api/
|
||||
│ ├── jest.conf.js
|
||||
│ ├── proxy.conf.json
|
||||
│ ├── src/
|
||||
│ │ ├── app/
|
||||
│ │ │ ├── app.controller.ts
|
||||
│ │ │ ├── app.controller.spec.ts
|
||||
│ │ │ ├── app.module.ts
|
||||
│ │ │ ├── app.service.ts
|
||||
│ │ │ └── app.service.spec.ts
|
||||
│ │ ├── assets/
|
||||
│ │ ├── environments/
|
||||
│ │ │ ├── environment.ts
|
||||
│ │ │ └── environment.prod.ts
|
||||
│ │ └── main.ts
|
||||
│ ├── tsconfig.app.json
|
||||
│ ├── tsconfig.json
|
||||
│ ├── tsconfig.spec.json
|
||||
│ └── tslint.json
|
||||
├── libs/
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── 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.
|
||||
@ -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`.
|
||||
|
||||
```console
|
||||
apps/
|
||||
frontend/
|
||||
...
|
||||
frontend-e2e/
|
||||
...
|
||||
api/
|
||||
...
|
||||
libs/
|
||||
data/
|
||||
src/
|
||||
lib/
|
||||
index.ts
|
||||
jest.config.js
|
||||
tsconfig.json
|
||||
tsconfig.lib.json
|
||||
tsconfig.spec.json
|
||||
tslint.json
|
||||
tools/
|
||||
...
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── apps/
|
||||
│ ├── frontend/
|
||||
│ ├── frontend-e2e/
|
||||
│ └── api/
|
||||
├── libs/
|
||||
│ └── data/
|
||||
│ ├── jest.conf.js
|
||||
│ ├── src/
|
||||
│ │ ├── lib/
|
||||
│ │ └── index.ts
|
||||
│ ├── tsconfig.app.json
|
||||
│ ├── tsconfig.json
|
||||
│ ├── tsconfig.spec.json
|
||||
│ └── tslint.json
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── tsconfig.json
|
||||
└── tslint.json
|
||||
```
|
||||
|
||||
Next, move `Ticket` into `libs/data/src/index.ts`:
|
||||
|
||||
@ -27,37 +27,34 @@ ng g node-application api # you can also be explicit and pass `--framework=nestj
|
||||
|
||||
This will create the following:
|
||||
|
||||
```console
|
||||
apps/
|
||||
api/
|
||||
src/
|
||||
app/
|
||||
app.module.ts
|
||||
app.controller.ts
|
||||
app.controller.spec.ts
|
||||
app.service.ts
|
||||
app.service.spec.ts
|
||||
assets/
|
||||
...
|
||||
environments/
|
||||
environment.ts
|
||||
environment.prod.ts
|
||||
main.ts
|
||||
jest.config.js
|
||||
tsconfig.json
|
||||
tsconfig.app.json
|
||||
tsconfig.spec.json
|
||||
tslint.json
|
||||
proxy.conf.json
|
||||
libs/
|
||||
...
|
||||
tools/
|
||||
...
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── apps/
|
||||
│ └── api/
|
||||
│ ├── jest.conf.js
|
||||
│ ├── proxy.conf.json
|
||||
│ ├── src/
|
||||
│ │ ├── app/
|
||||
│ │ │ ├── app.controller.ts
|
||||
│ │ │ ├── app.controller.spec.ts
|
||||
│ │ │ ├── app.module.ts
|
||||
│ │ │ ├── app.service.ts
|
||||
│ │ │ └── app.service.spec.ts
|
||||
│ │ ├── assets/
|
||||
│ │ ├── environments/
|
||||
│ │ │ ├── environment.ts
|
||||
│ │ │ └── environment.prod.ts
|
||||
│ │ └── main.ts
|
||||
│ ├── tsconfig.app.json
|
||||
│ ├── tsconfig.json
|
||||
│ ├── tsconfig.spec.json
|
||||
│ └── tslint.json
|
||||
├── libs/
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── tsconfig.json
|
||||
└── tslint.json
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```console
|
||||
apps/
|
||||
frontend/
|
||||
...
|
||||
frontend-e2e/
|
||||
src/
|
||||
fixtures/
|
||||
example.json
|
||||
integration/
|
||||
app.spec.ts
|
||||
plugins/
|
||||
index.ts
|
||||
support/
|
||||
app.po.ts
|
||||
commands.ts
|
||||
index.ts
|
||||
cypress.json
|
||||
tsconfig.e2e.json
|
||||
tsconfig.json
|
||||
|
||||
libs/
|
||||
...
|
||||
tools/
|
||||
...
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── README.md
|
||||
├── angular.json
|
||||
├── apps/
|
||||
│ ├── frontend/
|
||||
│ └── frontend-e2e/
|
||||
│ ├── cypress.json
|
||||
│ ├── src/
|
||||
│ │ ├── fixtures/
|
||||
│ │ │ └── example.json
|
||||
│ │ ├── integration/
|
||||
│ │ │ └── app.spec.ts
|
||||
│ │ ├── plugins/
|
||||
│ │ │ └── index.ts
|
||||
│ │ └── support/
|
||||
│ │ ├── app.po.ts
|
||||
│ │ ├── commands.ts
|
||||
│ │ └── index.ts
|
||||
│ ├── tsconfig.e2e.json
|
||||
│ ├── tsconfig.json
|
||||
│ └── tslint.json
|
||||
├── libs/
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── tsconfig.json
|
||||
└── tslint.json
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```console
|
||||
apps/
|
||||
frontend/
|
||||
src/
|
||||
app/
|
||||
assets/
|
||||
environments/
|
||||
favicon.ico
|
||||
index.html
|
||||
main.ts
|
||||
polyfills.ts
|
||||
styles.css
|
||||
test.ts
|
||||
browserslist
|
||||
jest.conf.js
|
||||
tsconfig.json
|
||||
tsconfig.app.json
|
||||
tsconfig.spec.json
|
||||
tslint.json
|
||||
frontend-e2e/
|
||||
...
|
||||
libs/
|
||||
...
|
||||
tools/
|
||||
...
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── README.md
|
||||
├── angular.json
|
||||
├── apps/
|
||||
│ ├── frontend/
|
||||
│ │ ├── browserslist
|
||||
│ │ ├── jest.conf.js
|
||||
│ │ ├── src/
|
||||
│ │ │ ├── app/
|
||||
│ │ │ ├── assets/
|
||||
│ │ │ ├── environments/
|
||||
│ │ │ ├── favicon.ico
|
||||
│ │ │ ├── index.html
|
||||
│ │ │ ├── main.ts
|
||||
│ │ │ ├── polyfills.ts
|
||||
│ │ │ ├── styles.scss
|
||||
│ │ │ └── test.ts
|
||||
│ │ ├── tsconfig.app.json
|
||||
│ │ ├── tsconfig.json
|
||||
│ │ ├── tsconfig.spec.json
|
||||
│ │ └── tslint.json
|
||||
│ └── frontend-e2e/
|
||||
├── libs/
|
||||
├── nx.json
|
||||
├── package-lock.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── tsconfig.json
|
||||
└── tslint.json
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
```cosnole
|
||||
apps/
|
||||
libs/
|
||||
tools/
|
||||
.prettierrc # prettier config
|
||||
angular.json
|
||||
nx.json
|
||||
package.json
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── README.md
|
||||
├── angular.json
|
||||
├── apps/
|
||||
├── libs/
|
||||
├── nx.json
|
||||
├── package-lock.json
|
||||
├── package.json
|
||||
├── tools/
|
||||
├── .prettierrc # prettier config
|
||||
├── tsconfig.json
|
||||
└── tslint.json
|
||||
```
|
||||
|
||||
You can run:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user