You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+74-88Lines changed: 74 additions & 88 deletions
Original file line number
Diff line number
Diff line change
@@ -28,88 +28,58 @@
28
28
29
29
# What is Nx?
30
30
31
-
🔎 **Nx is a set of Angular CLI power-ups that transform the CLI into a powerful tool for full-stack development.**
31
+
🔎 **Nx is a set of Angular CLI power-ups for modern development.**
32
32
33
-
With Nx, you can:
33
+
##Nx Helps You
34
34
35
-
- Build full-stack applications using Angular and Nest
36
-
- Use effective development practices pioneered at Google
37
-
- Use innovative tools like Cypress and Jest
35
+
### Use Modern Tools
38
36
39
-
## Does it replace Angular CLI?
40
-
41
-
Nx **is not** a replacement for Angular CLI. **An Nx workspace is an Angular CLI workspace.**
42
-
43
-
- You run same `ng build`, `ng serve` commands.
44
-
- You configure your projects in `angular.json`.
45
-
- Anything you can do in a standard Angular CLI project, you can also do in an Nx workspace.
46
-
47
-
## Features
48
-
49
-
### Full-Stack Development
50
-
51
-
With Nx, you can build a backend application next to your Angular application in the same repository. The backend and the frontend can share code. You can connect them to enable a fantastic development experience.
37
+
Using Nx, you can add Cypress, Jest, Prettier, 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.
52
38
53
-
### Use effective development practices pioneered at Google
39
+
### Build Full-Stack Applications
54
40
55
-
Using Nx, you can implement monorepo-style development--an approach popularized by Google and used by many tech companies today (Facebook, Uber, Twitter, etc..).
41
+
With Nx, you can build full-stack applications using Angular and Node.js frameworks such as Nest and Express. You can share code between the frontend and the backend. And you can use the familiar `ng build/test/serve` commands to power whole dev experience.
56
42
57
-
_Doesn't Angular CLI support having multiple projects in the same workspace?_
43
+
### Develop Like Google
58
44
59
-
Yes, starting with Angular CLI 6 you can add different types of projects to a single workspace (by default you can add applications and libraries). This is great, but is not sufficient to enable the monorepo-style development. Nx adds an extra layer of tooling to make this possible.
45
+
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 helps enforce your organization’s standards and community best practices.
60
46
61
-
In addition to using the monorepo, Google is also known for its use of automation. Nx adds powerful capabilities helping your team promote best practices and ensure consistency.
62
-
63
-
### Use Innovative Tools
64
-
65
-
Tools like Apollo, Cypress, Jest, Prettier, and Nest have gained a lot of popularity.
47
+
## A la carte
66
48
67
-
It's not the case that Apollo is always better than REST or Cypress is always better than Protractor. There are tradeoffs. But in many situations, for many projects, these innovative tools offer a lot of advantages.
49
+
Most importantly, you can use these power-ups a la carte. Just want to build a single Angular application using Cypress? Nx is still an excellent choice for that.
68
50
69
-
Adding these tools to the dev workflow is challenging in a regular CLI project. The choice you have is not between Protractor or Cypress, but between a hacked-up setup for Cypress and a great CLI setup for Protractor. Nx changes that!
51
+
## Does it replace Angular CLI?
70
52
71
-
## A la carte
53
+
Nx **is not** a replacement for Angular CLI. **An Nx workspace is an Angular CLI workspace.**
72
54
73
-
Most importantly, you can use these power-ups a la carte. Just want to build a single Angular application using Cypress? Nx is still an excellent choice for that.
55
+
- You run same `ng build`, `ng serve` commands.
56
+
- You configure your projects in `angular.json`.
57
+
- Anything you can do in a standard Angular CLI project, you can also do in an Nx workspace.
74
58
75
59
# Getting Started
76
60
77
-
Nx is just a set of power-ups for Angular CLI, **so an Nx workspace is an Angular CLI workspace**. This means that it will be handy to have the Angular CLI installed globally, which can be done via npm or yarn as well.
61
+
## Creating an Nx Workspace Using Npx
78
62
79
-
```bash
80
-
npm install -g @angular/cli
81
-
```
63
+
Using [Npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) you can create a new Nx workspace without installing any packages.
> Note: If you do not have the Angular CLI installed globally you may not be able to use ng from the terminal to run CLI commands within the project. But the `package.json` file comes with npm scripts to run ng commands, so you can run npm start to ng serve and you can run `npm run ng <command>` to run any of the ng commands.
71
+
## Creating an Nx Workspace Without Npx
90
72
91
-
After you have installed the Angular CLI, install`@nrwl/schematics`.
73
+
Install`@nrwl/schematics`.
92
74
93
75
```bash
94
76
npm install -g @nrwl/schematics
95
77
```
96
78
97
-
or
98
-
99
-
```bash
100
-
yarn global add @nrwl/schematics
101
-
```
102
-
103
-
> If you want to work with the version still in development you can use `@nrwl/schematics@next` as the package to install.
104
-
105
-
## Nx Workspace
106
-
107
-
### Creating an Nx Workspace
108
-
109
-
To create an Nx workspace, run:
79
+
Then run:
110
80
111
81
```bash
112
-
ng new myworkspace --collection=@nrwl/schematics
82
+
ng new myworkspace --collection=@nrw/schematics
113
83
```
114
84
115
85
The `ng new` command uses globally-installed packages. Anything installed globally can be in a messy state. If you have any problems running the command above, you can also run:
This command still runs `ng new` under the hood, but it does it in a sandboxed environment, and, as a result, never fails.
122
92
123
-
###Adding to an Existing Angular CLI workspace
93
+
## Adding Nx to an Existing Angular CLI workspace
124
94
125
95
If you already have a regular Angular CLI project, you can add Nx power-ups by running:
126
96
@@ -138,37 +108,53 @@ ng g application myapp
138
108
139
109
The result will look like this:
140
110
141
-
```
142
-
apps/
143
-
myapp/
144
-
src/
145
-
app/
146
-
assets/
147
-
environment/
148
-
favicon.ico
149
-
index.html
150
-
main.ts
151
-
polyfills.ts
152
-
styles.css
153
-
tsconfig.json
154
-
tsconfig.app.json
155
-
tsconfig.spec.json
156
-
tslint.json
157
-
myapp-e2e/
158
-
src/
159
-
tsconfig.json
160
-
tsconfig.e2e.json
161
-
tslint.json
162
-
libs/
163
-
tools/
164
-
package.json
165
-
tsconfig.json
166
-
tslint.json
167
-
angular.json
168
-
nx.json
111
+
```treeview
112
+
<workspace name>/
113
+
├── README.md
114
+
├── angular.json
115
+
├── apps/
116
+
│ ├── myapp/
117
+
│ │ ├── browserslist
118
+
│ │ ├── jest.conf.js
119
+
│ │ ├── src/
120
+
│ │ │ ├── app/
121
+
│ │ │ ├── assets/
122
+
│ │ │ ├── environments/
123
+
│ │ │ ├── favicon.ico
124
+
│ │ │ ├── index.html
125
+
│ │ │ ├── main.ts
126
+
│ │ │ ├── polyfills.ts
127
+
│ │ │ ├── styles.scss
128
+
│ │ │ └── test.ts
129
+
│ │ ├── tsconfig.app.json
130
+
│ │ ├── tsconfig.json
131
+
│ │ ├── tsconfig.spec.json
132
+
│ │ └── tslint.json
133
+
│ └── myapp-e2e/
134
+
│ ├── cypress.json
135
+
│ ├── src/
136
+
│ │ ├── fixtures/
137
+
│ │ │ └── example.json
138
+
│ │ ├── integration/
139
+
│ │ │ └── app.spec.ts
140
+
│ │ ├── plugins/
141
+
│ │ │ └── index.ts
142
+
│ │ └── support/
143
+
│ │ ├── app.po.ts
144
+
│ │ ├── commands.ts
145
+
│ │ └── index.ts
146
+
│ ├── tsconfig.e2e.json
147
+
│ ├── tsconfig.json
148
+
│ └── tslint.json
149
+
├── libs/
150
+
├── nx.json
151
+
├── package.json
152
+
├── tools/
153
+
├── tsconfig.json
154
+
└── tslint.json
169
155
```
170
156
171
-
All the files that the CLI would have in a new project are still here, just in a different folder structure which makes it easier to create more apps and libs in the future.
157
+
All the files that the CLI would have in a new project are still here, just in a different folder structure which makes it easier to create more applications and libraries in the future.
0 commit comments