UNPKG

@nrwl/schematics/README.md

Version:

8.85 kBMarkdownView Raw

1<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png" width="450"></p>
2
3<div align="center">
4
5[![Build Status](https://travis-ci.org/nrwl/nx.svg?branch=master)](https://travis-ci.org/nrwl/nx)
6[![License](https://img.shields.io/npm/l/@nrwl/workspace.svg?style=flat-square)]()
7[![NPM Version](https://badge.fury.io/js/%40nrwl%2Fworkspace.svg)](https://www.npmjs.com/@nrwl/workspace)
8[![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)]()
9[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
10[![Join the chat at https://gitter.im/nrwl-nx/community](https://badges.gitter.im/nrwl-nx/community.svg)](https://gitter.im/nrwl-nx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
11[![Join us @nrwl/community on slack](https://img.shields.io/badge/slack-%40nrwl%2Fcommunity-brightgreen)](https://join.slack.com/t/nrwlcommunity/shared_invite/enQtNzU5MTE4OTQwOTk0LTgxY2E0ZWYzMWE0YzA5ZDA2MWM1NDVhNmI2ZWMyYmZhNWJiODk3MjkxZjY3MzU5ZjRmM2NmNWU1OTgyZmE4Mzc)
12
13</div>
14
15<hr>
16
17# What is Nx?
18
19🔎 **Extensible Dev Tools for Monorepos.**
20
21## Nx Helps You
22
23### Use Modern Tools
24
25Using Nx, you can add TypeScript, Cypress, Jest, Prettier, Angular, React, Next.js and Nest into your dev workflow. Nx sets up these tools and allows you to use them seamlessly. Nx fully integrates with the other modern tools you already use and love.
26
27### Build Full-Stack Applications
28
29With Nx, you can build full-stack applications using modern frameworks. You can share code between the frontend and the backend. And you can use the same `build/test/serve` commands throughout the whole dev experience.
30
31### Develop like Google, Facebook, and Microsoft
32
33With Nx, you can develop multiple full-stack applications holistically and share code between them all in the same workspace. Nx provides advanced tools which help you scale your enterprise development. Nx also helps enforce your organization’s standards and community best practices.
34
35# Getting Started
36
37## Creating an Nx Workspace
38
39**Using `npx`**
40
41```bash
42npx create-nx-workspace myworkspace
43```
44
45**Using `npm init`**
46
47```bash
48npm init nx-workspace myworkspace
49```
50
51**Using `yarn create`**
52
53```bash
54yarn create nx-workspace myworkspace
55```
56
57If it's your first Nx project, the command will recommend you to install `@nrwl/cli` globally, so you can invoke `nx` directly without going through yarn or npm.
58
59## Creating First Application
60
61By default, an Nx workspace starts blank. There are no applications to build, serve, and test. To create one, you need to add capabilities to the workspace.
62
63**To add a web components app, run:**
64
65```bash
66yarn add --dev @nrwl/web
67nx g @nrwl/web:app myapp # or just "nx g myapp"
68```
69
70```bash
71npm install --save-dev @nrwl/web
72nx g @nrwl/web:app myapp # or just "nx g myapp"
73```
74
75**To add an Angular app, run:**
76
77```bash
78yarn add --dev @nrwl/angular
79nx g @nrwl/angular:app myapp # or just "nx g myapp"
80```
81
82```bash
83npm install --save-dev @nrwl/angular
84nx g @nrwl/angular:app myapp # or just "nx g myapp"
85```
86
87**To add a React app, run:**
88
89```bash
90yarn add --dev @nrwl/react
91nx g @nrwl/react:app myapp # or just "nx g myapp"
92```
93
94```bash
95npm install --save-dev @nrwl/react
96nx g @nrwl/react:app myapp # or just "nx g myapp"
97```
98
99If `nx g` fails, use: `yarn nx g @nrwl/web:app myapp` or `npm run nx -- g @nrwl/web:app myapp`.
100
101Regardless of what framework you chose, the resulting file tree will look like this:
102
103```treeview
104<workspace name>/
105├── apps/
106│   ├── myapp/
107│   └── myapp-e2e/
108├── libs/
109├── tools/
110├── nx.json
111├── package.json
112├── tsconfig.json
113└── tslint.json
114```
115
116## Serving Application
117
118- Run `nx serve myapp` to serve the newly generated application!
119- Run `nx test myapp` to test it.
120- Run `nx e2e myapp-e2e` to run e2e tests for it.
121
122Angular users can also run `ng g/serve/test/e2e`.
123
124You are good to go!
125
126### Documentation
127
128- [Nx Documentation and Guides](https://nx.dev)
129- [Nx blog posts](https://blog.nrwl.io/nx/home)
130
131### Quick Start Videos
132
133<table>
134  <tr>
135    <td>    
136      <a href="https://www.youtube.com/watch?v=mVKMse-gFBI" target="_blank">
137      <p align="center">Angular<br><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-angular-video.png" width="350"></p>
138      </a>
139    </td>
140    <td>    
141      <a href="https://www.youtube.com/watch?v=E188J7E_MDU" target="_blank">
142      <p align="center">React<br><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-react-video.png" width="350"></p>
143      </a>
144    </td>
145  </tr>
146</table>
147
148### Courses
149
150<table>
151  <tr>
152    <td>    
153      <a href="https://www.youtube.com/watch?v=2mYLe9Kp9VM&list=PLakNactNC1dH38AfqmwabvOszDmKriGco" target="_blank">
154        <p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-workspace-course.png" width="350"></p>
155      </a>
156    </td>
157    <td>    
158      <a href="https://nxplaybook.com/p/advanced-nx-workspaces" target="_blank">
159      <p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/advanced-nx-workspace-course.png" width="350"></p>
160      </a>
161    </td>
162  </tr>
163</table>
164
165### Books
166
167- [Effective React Development with Nx](https://go.nrwl.io/effective-react-development-with-nx-new-book)
168- [Angular Enterprise Monorepo Patterns](https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book?utm_campaign=Book%3A%20Monorepo%20Patterns%2C%20Jan%202019&utm_source=Github&utm_medium=Banner%20Ad)
169
170### Videos
171
172- [Building Angular full-stack applications in a monorepo.](https://www.youtube.com/watch?v=XZpp52IqD2A&t=1292s)
173- [Building React full-stack applications in a monorepo.](https://www.youtube.com/watch?v=Jxh_--FeJeY&t=2s)
174
175### Talks
176
177- [Angular at Large Organizations](https://www.youtube.com/watch?v=piQ0EZhtus0)
178- [Nx: The New Way to Build Enterprise Angular Apps](https://www.youtube.com/watch?v=xo-1SDmvM8Y)
179- [Supercharging the Angular CLI](https://www.youtube.com/watch?v=bMkKz8AedHc)
180- [Hands on Full Stack development with Nx and Bazel](https://www.youtube.com/watch?v=1KDDIhcQORM)
181
182## Misc
183
184- [nx-examples](https://github.com/nrwl/nx-examples) repo has branches for different nx comments to display expected behavior and example app and libraries. Check out the branch (workspace, ngrx...) to see what gets created for you. More info on readme.
185- [xplat - Cross-platform tools for Nx workspaces](https://nstudio.io/xplat/)
186
187## Want to help?
188
189If you want to file a bug or submit a PR, read up on our [guidelines for contributing](https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md).
190
191## Core Team
192
193| Victor Savkin                                                          | Jason Jean                                                            | Benjamin Cabanes                                                            | Brandon Roberts                                                          |
194| ---------------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
195| ![Victor Savkin](https://avatars1.githubusercontent.com/u/35996?s=150) | ![Jason Jean](https://avatars2.githubusercontent.com/u/8104246?s=150) | ![Benjamin Cabanes](https://avatars2.githubusercontent.com/u/3447705?s=150) | ![Brandon Roberts](https://avatars1.githubusercontent.com/u/42211?s=150) |
196| [vsavkin](https://github.com/vsavkin)                                  | [FrozenPandaz](https://github.com/FrozenPandaz)                       | [bcabanes](https://github.com/bcabanes)                                     | [brandonroberts](https://github.com/brandonroberts)                      |
197
198| Jack Hsu                                                              | Jo Hanna Pearce                                                               | Matt Briggs                                                              |
199| --------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
200| ![Jack Hsu](https://avatars0.githubusercontent.com/u/53559?s=150&v=4) | ![Jo Hanna Pearce](https://avatars1.githubusercontent.com/u/439121?s=150&v=4) | ![Matt Briggs](https://avatars2.githubusercontent.com/u/89260?s=150&v=4) |
201| [jaysoo](https://github.com/jaysoo)                                   | [jdpearce](https://github.com/jdpearce)                                       | [mbriggs](https://github.com/mbriggs)                                    |

1	`<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-logo.png" width="450"></p>`
2
3	`<div align="center">`
4
5	`[![Build Status](https://travis-ci.org/nrwl/nx.svg?branch=master)](https://travis-ci.org/nrwl/nx)`
6	`[![License](https://img.shields.io/npm/l/@nrwl/workspace.svg?style=flat-square)]()`
7	`[![NPM Version](https://badge.fury.io/js/%40nrwl%2Fworkspace.svg)](https://www.npmjs.com/@nrwl/workspace)`
8	`[![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)]()`
9	`[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)`
10	`[![Join the chat at https://gitter.im/nrwl-nx/community](https://badges.gitter.im/nrwl-nx/community.svg)](https://gitter.im/nrwl-nx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)`
11	`[![Join us @nrwl/community on slack](https://img.shields.io/badge/slack-%40nrwl%2Fcommunity-brightgreen)](https://join.slack.com/t/nrwlcommunity/shared_invite/enQtNzU5MTE4OTQwOTk0LTgxY2E0ZWYzMWE0YzA5ZDA2MWM1NDVhNmI2ZWMyYmZhNWJiODk3MjkxZjY3MzU5ZjRmM2NmNWU1OTgyZmE4Mzc)`
12
13	`</div>`
14
15	`<hr>`
16
17	`# What is Nx?`
18
19	`🔎 Extensible Dev Tools for Monorepos.`
20
21	`## Nx Helps You`
22
23	`### Use Modern Tools`
24
25	`Using Nx, you can add TypeScript, Cypress, Jest, Prettier, Angular, React, Next.js and Nest into your dev workflow. Nx sets up these tools and allows you to use them seamlessly. Nx fully integrates with the other modern tools you already use and love.`
26
27	`### Build Full-Stack Applications`
28
29	With Nx, you can build full-stack applications using modern frameworks. You can share code between the frontend and the backend. And you can use the same `build/test/serve` commands throughout the whole dev experience.
30
31	`### Develop like Google, Facebook, and Microsoft`
32
33	`With Nx, you can develop multiple full-stack applications holistically and share code between them all in the same workspace. Nx provides advanced tools which help you scale your enterprise development. Nx also helps enforce your organization’s standards and community best practices.`
34
35	`# Getting Started`
36
37	`## Creating an Nx Workspace`
38
39	Using `npx`
40
41	```bash
42	`npx create-nx-workspace myworkspace`
43	```
44
45	Using `npm init`
46
47	```bash
48	`npm init nx-workspace myworkspace`
49	```
50
51	Using `yarn create`
52
53	```bash
54	`yarn create nx-workspace myworkspace`
55	```
56
57	If it's your first Nx project, the command will recommend you to install `@nrwl/cli` globally, so you can invoke `nx` directly without going through yarn or npm.
58
59	`## Creating First Application`
60
61	`By default, an Nx workspace starts blank. There are no applications to build, serve, and test. To create one, you need to add capabilities to the workspace.`
62
63	`To add a web components app, run:`
64
65	```bash
66	`yarn add --dev @nrwl/web`
67	`nx g @nrwl/web:app myapp # or just "nx g myapp"`
68	```
69
70	```bash
71	`npm install --save-dev @nrwl/web`
72	`nx g @nrwl/web:app myapp # or just "nx g myapp"`
73	```
74
75	`To add an Angular app, run:`
76
77	```bash
78	`yarn add --dev @nrwl/angular`
79	`nx g @nrwl/angular:app myapp # or just "nx g myapp"`
80	```
81
82	```bash
83	`npm install --save-dev @nrwl/angular`
84	`nx g @nrwl/angular:app myapp # or just "nx g myapp"`
85	```
86
87	`To add a React app, run:`
88
89	```bash
90	`yarn add --dev @nrwl/react`
91	`nx g @nrwl/react:app myapp # or just "nx g myapp"`
92	```
93
94	```bash
95	`npm install --save-dev @nrwl/react`
96	`nx g @nrwl/react:app myapp # or just "nx g myapp"`
97	```
98
99	If `nx g` fails, use: `yarn nx g @nrwl/web:app myapp` or `npm run nx -- g @nrwl/web:app myapp`.
100
101	`Regardless of what framework you chose, the resulting file tree will look like this:`
102
103	```treeview
104	`<workspace name>/`
105	`├── apps/`
106	`│ ├── myapp/`
107	`│ └── myapp-e2e/`
108	`├── libs/`
109	`├── tools/`
110	`├── nx.json`
111	`├── package.json`
112	`├── tsconfig.json`
113	`└── tslint.json`
114	```
115
116	`## Serving Application`
117
118	- Run `nx serve myapp` to serve the newly generated application!
119	- Run `nx test myapp` to test it.
120	- Run `nx e2e myapp-e2e` to run e2e tests for it.
121
122	Angular users can also run `ng g/serve/test/e2e`.
123
124	`You are good to go!`
125
126	`### Documentation`
127
128	`- [Nx Documentation and Guides](https://nx.dev)`
129	`- [Nx blog posts](https://blog.nrwl.io/nx/home)`
130
131	`### Quick Start Videos`
132
133	`<table>`
134	`<tr>`
135	`<td>`
136	`<a href="https://www.youtube.com/watch?v=mVKMse-gFBI" target="_blank">`
137	`<p align="center">Angular<br><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-angular-video.png" width="350"></p>`
138	`</a>`
139	`</td>`
140	`<td>`
141	`<a href="https://www.youtube.com/watch?v=E188J7E_MDU" target="_blank">`
142	`<p align="center">React<br><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-react-video.png" width="350"></p>`
143	`</a>`
144	`</td>`
145	`</tr>`
146	`</table>`
147
148	`### Courses`
149
150	`<table>`
151	`<tr>`
152	`<td>`
153	`<a href="https://www.youtube.com/watch?v=2mYLe9Kp9VM&list=PLakNactNC1dH38AfqmwabvOszDmKriGco" target="_blank">`
154	`<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/nx-workspace-course.png" width="350"></p>`
155	`</a>`
156	`</td>`
157	`<td>`
158	`<a href="https://nxplaybook.com/p/advanced-nx-workspaces" target="_blank">`
159	`<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/advanced-nx-workspace-course.png" width="350"></p>`
160	`</a>`
161	`</td>`
162	`</tr>`
163	`</table>`
164
165	`### Books`
166
167	`- [Effective React Development with Nx](https://go.nrwl.io/effective-react-development-with-nx-new-book)`
168	`- [Angular Enterprise Monorepo Patterns](https://go.nrwl.io/angular-enterprise-monorepo-patterns-new-book?utm_campaign=Book%3A%20Monorepo%20Patterns%2C%20Jan%202019&utm_source=Github&utm_medium=Banner%20Ad)`
169
170	`### Videos`
171
172	`- [Building Angular full-stack applications in a monorepo.](https://www.youtube.com/watch?v=XZpp52IqD2A&t=1292s)`
173	`- [Building React full-stack applications in a monorepo.](https://www.youtube.com/watch?v=Jxh_--FeJeY&t=2s)`
174
175	`### Talks`
176
177	`- [Angular at Large Organizations](https://www.youtube.com/watch?v=piQ0EZhtus0)`
178	`- [Nx: The New Way to Build Enterprise Angular Apps](https://www.youtube.com/watch?v=xo-1SDmvM8Y)`
179	`- [Supercharging the Angular CLI](https://www.youtube.com/watch?v=bMkKz8AedHc)`
180	`- [Hands on Full Stack development with Nx and Bazel](https://www.youtube.com/watch?v=1KDDIhcQORM)`
181
182	`## Misc`
183
184	`- [nx-examples](https://github.com/nrwl/nx-examples) repo has branches for different nx comments to display expected behavior and example app and libraries. Check out the branch (workspace, ngrx...) to see what gets created for you. More info on readme.`
185	`- [xplat - Cross-platform tools for Nx workspaces](https://nstudio.io/xplat/)`
186
187	`## Want to help?`
188
189	`If you want to file a bug or submit a PR, read up on our [guidelines for contributing](https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md).`
190
191	`## Core Team`
192
193	`\| Victor Savkin \| Jason Jean \| Benjamin Cabanes \| Brandon Roberts \|`
194	`\| ---------------------------------------------------------------------- \| --------------------------------------------------------------------- \| --------------------------------------------------------------------------- \| ------------------------------------------------------------------------ \|`
195	`\| ![Victor Savkin](https://avatars1.githubusercontent.com/u/35996?s=150) \| ![Jason Jean](https://avatars2.githubusercontent.com/u/8104246?s=150) \| ![Benjamin Cabanes](https://avatars2.githubusercontent.com/u/3447705?s=150) \| ![Brandon Roberts](https://avatars1.githubusercontent.com/u/42211?s=150) \|`
196	`\| [vsavkin](https://github.com/vsavkin) \| [FrozenPandaz](https://github.com/FrozenPandaz) \| [bcabanes](https://github.com/bcabanes) \| [brandonroberts](https://github.com/brandonroberts) \|`
197
198	`\| Jack Hsu \| Jo Hanna Pearce \| Matt Briggs \|`
199	`\| --------------------------------------------------------------------- \| ----------------------------------------------------------------------------- \| ------------------------------------------------------------------------ \|`
200	`\| ![Jack Hsu](https://avatars0.githubusercontent.com/u/53559?s=150&v=4) \| ![Jo Hanna Pearce](https://avatars1.githubusercontent.com/u/439121?s=150&v=4) \| ![Matt Briggs](https://avatars2.githubusercontent.com/u/89260?s=150&v=4) \|`
201	`\| [jaysoo](https://github.com/jaysoo) \| [jdpearce](https://github.com/jdpearce) \| [mbriggs](https://github.com/mbriggs) \|`