fix(docs): update README
This commit is contained in:
Victor Savkin
parent
f22fccf413
commit
697f68e883
170
README.md
170
README.md
@ -28,13 +28,25 @@
|
|||||||
|
|
||||||
# What is Nx?
|
# What is Nx?
|
||||||
|
|
||||||
🔎 **Nx is a set of Angular CLI power-ups that transform the CLI into a powerful tool for full-stack development.**
|
🔎 **Nx is a set of Angular CLI power-ups for modern development.**
|
||||||
|
|
||||||
With Nx, you can:
|
## Nx Helps You
|
||||||
|
|
||||||
- Build full-stack applications using Angular and Nest
|
### Use Modern Tools
|
||||||
- Use effective development practices pioneered at Google
|
|
||||||
- Use innovative tools like Cypress and Jest
|
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.
|
||||||
|
|
||||||
|
### Build Full-Stack Applications
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
### Develop Like Google
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
## A la carte
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
## Does it replace Angular CLI?
|
## Does it replace Angular CLI?
|
||||||
|
|
||||||
@ -44,72 +56,30 @@ Nx **is not** a replacement for Angular CLI. **An Nx workspace is an Angular CLI
|
|||||||
- You configure your projects in `angular.json`.
|
- You configure your projects in `angular.json`.
|
||||||
- Anything you can do in a standard Angular CLI project, you can also do in an Nx workspace.
|
- Anything you can do in a standard Angular CLI project, you can also do in an Nx workspace.
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
### Full-Stack Development
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
### Use effective development practices pioneered at Google
|
|
||||||
|
|
||||||
Using Nx, you can implement monorepo-style development--an approach popularized by Google and used by many tech companies today (Facebook, Uber, Twitter, etc..).
|
|
||||||
|
|
||||||
_Doesn't Angular CLI support having multiple projects in the same workspace?_
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
### Use Innovative Tools
|
|
||||||
|
|
||||||
Tools like Apollo, Cypress, Jest, Prettier, and Nest have gained a lot of popularity.
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
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!
|
|
||||||
|
|
||||||
## A la carte
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
# Getting Started
|
# Getting Started
|
||||||
|
|
||||||
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.
|
## Creating an Nx Workspace Using Npx
|
||||||
|
|
||||||
|
Using [Npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) you can create a new Nx workspace without installing any packages.
|
||||||
|
|
||||||
|
Simply run:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install -g @angular/cli
|
npx -p @nrwl/schematics create-nx-workspace myworkspace
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
## Creating an Nx Workspace Without Npx
|
||||||
|
|
||||||
```bash
|
Install `@nrwl/schematics`.
|
||||||
yarn global add @angular/cli
|
|
||||||
```
|
|
||||||
|
|
||||||
> 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.
|
|
||||||
|
|
||||||
After you have installed the Angular CLI, install `@nrwl/schematics`.
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install -g @nrwl/schematics
|
npm install -g @nrwl/schematics
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
Then run:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn global add @nrwl/schematics
|
ng new myworkspace --collection=@nrw/schematics
|
||||||
```
|
|
||||||
|
|
||||||
> If you want to work with the version still in development you can use `@nrwl/schematics@next` as the package to install.
|
|
||||||
|
|
||||||
## Nx Workspace
|
|
||||||
|
|
||||||
### Creating an Nx Workspace
|
|
||||||
|
|
||||||
To create an Nx workspace, run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ng new myworkspace --collection=@nrwl/schematics
|
|
||||||
```
|
```
|
||||||
|
|
||||||
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:
|
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:
|
||||||
@ -120,7 +90,7 @@ create-nx-workspace myworkspacename
|
|||||||
|
|
||||||
This command still runs `ng new` under the hood, but it does it in a sandboxed environment, and, as a result, never fails.
|
This command still runs `ng new` under the hood, but it does it in a sandboxed environment, and, as a result, never fails.
|
||||||
|
|
||||||
### Adding to an Existing Angular CLI workspace
|
## Adding Nx to an Existing Angular CLI workspace
|
||||||
|
|
||||||
If you already have a regular Angular CLI project, you can add Nx power-ups by running:
|
If you already have a regular Angular CLI project, you can add Nx power-ups by running:
|
||||||
|
|
||||||
@ -138,37 +108,53 @@ ng g application myapp
|
|||||||
|
|
||||||
The result will look like this:
|
The result will look like this:
|
||||||
|
|
||||||
```
|
```treeview
|
||||||
apps/
|
<workspace name>/
|
||||||
myapp/
|
├── README.md
|
||||||
src/
|
├── angular.json
|
||||||
app/
|
├── apps/
|
||||||
assets/
|
│ ├── myapp/
|
||||||
environment/
|
│ │ ├── browserslist
|
||||||
favicon.ico
|
│ │ ├── jest.conf.js
|
||||||
index.html
|
│ │ ├── src/
|
||||||
main.ts
|
│ │ │ ├── app/
|
||||||
polyfills.ts
|
│ │ │ ├── assets/
|
||||||
styles.css
|
│ │ │ ├── environments/
|
||||||
tsconfig.json
|
│ │ │ ├── favicon.ico
|
||||||
tsconfig.app.json
|
│ │ │ ├── index.html
|
||||||
tsconfig.spec.json
|
│ │ │ ├── main.ts
|
||||||
tslint.json
|
│ │ │ ├── polyfills.ts
|
||||||
myapp-e2e/
|
│ │ │ ├── styles.scss
|
||||||
src/
|
│ │ │ └── test.ts
|
||||||
tsconfig.json
|
│ │ ├── tsconfig.app.json
|
||||||
tsconfig.e2e.json
|
│ │ ├── tsconfig.json
|
||||||
tslint.json
|
│ │ ├── tsconfig.spec.json
|
||||||
libs/
|
│ │ └── tslint.json
|
||||||
tools/
|
│ └── myapp-e2e/
|
||||||
package.json
|
│ ├── cypress.json
|
||||||
tsconfig.json
|
│ ├── src/
|
||||||
tslint.json
|
│ │ ├── fixtures/
|
||||||
angular.json
|
│ │ │ └── example.json
|
||||||
nx.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
|
||||||
```
|
```
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
## Serving Application
|
## Serving Application
|
||||||
|
|
||||||
@ -178,15 +164,15 @@ You are good to go!
|
|||||||
|
|
||||||
## Quick Start & Documentation
|
## Quick Start & Documentation
|
||||||
|
|
||||||
|
### Documentation
|
||||||
|
|
||||||
|
- [Nx Documentation and Guides](https://nx.dev)
|
||||||
|
- [Nx blog posts](https://blog.nrwl.io/nx/home)
|
||||||
|
|
||||||
### Books
|
### Books
|
||||||
|
|
||||||
- [Angular Enteprise Monorepo Patters](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)
|
- [Angular Enteprise Monorepo Patters](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)
|
||||||
|
|
||||||
### Documentation
|
|
||||||
|
|
||||||
- [Nx Documentation and Guides](https://nrwl.io/nx)
|
|
||||||
- [Nx blog posts](https://blog.nrwl.io/nx/home)
|
|
||||||
|
|
||||||
### Videos
|
### Videos
|
||||||
|
|
||||||
- [5-minute video on how to get started with Nx.](http://nrwl.io/nx)
|
- [5-minute video on how to get started with Nx.](http://nrwl.io/nx)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user