Skip to content

Commit

Permalink
docs(nx): update getting started guides
Browse files Browse the repository at this point in the history
  • Loading branch information
FrozenPandaz authored and vsavkin committed May 23, 2019
1 parent 3910be2 commit 5f404f4
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 26 deletions.
29 changes: 21 additions & 8 deletions docs/getting-started/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,28 @@ yarn create nx-workspace myworkspace
If you already have a regular Angular CLI project, you can add Nx power-ups by running:

```bash
ng add @nrwl/schematics
ng add @nrwl/workspace
```

## Creating First Application
## Adding Capabilities

Unlike the CLI, an Nx workspace starts blank. There are no applications to build, serve, and test. To create one run:
Unlike the Angular CLI, an Nx workspace starts blank. There are no applications to create, build, serve, and test. Capabilities other code generation and build tooling that you may add to your workspace. To add capabilities to the workspace:

```sh
ng add @nrwl/angular # Adds Angular capabilities
ng add @nrwl/react # Adds React capabilities
ng add @nrwl/nest # Adds Nest capabilities
ng add @nrwl/express # Adds Express capabilities
ng add @nrwl/web # Adds Web capabilities
ng add @nrwl/node # Adds Node capabilities
```

## Creating your First Application

After the capability is added, you can now create your first application via:

```bash
ng g application myapp
ng g @nrwl/angular:application myapp
```

The result will look like this:
Expand All @@ -52,8 +65,6 @@ The result will look like this:
├── angular.json
├── apps/
│   ├── myapp/
│   │   ├── browserslist
│   │   ├── jest.conf.js
│   │   ├── src/
│   │   │   ├── app/
│   │   │   ├── assets/
Expand All @@ -64,6 +75,8 @@ The result will look like this:
│   │   │   ├── polyfills.ts
│   │   │   ├── styles.scss
│   │   │   └── test.ts
│   │   ├── browserslist
│   │   ├── jest.config.js
│   │   ├── tsconfig.app.json
│   │   ├── tsconfig.json
│   │   ├── tsconfig.spec.json
Expand Down Expand Up @@ -92,14 +105,14 @@ The result will look like this:
└── 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 applications and libraries in the future.
All the files that the Angular 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

Run `ng serve myapp` to serve the newly generated application!

## Using Angular Console

You can also create a new Nx project using Angular Console--UI for the CLI:
You can also create a new Nx project using [Angular Console](https://angularconsole.com)--UI for the CLI:

![Create Workspace](./create-workspace.gif)
32 changes: 14 additions & 18 deletions docs/getting-started/nx-and-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,33 +15,29 @@ What does Nx add?

## 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.
With Nx, you can build a backend application next to your frontend application in the same repository. The backend and the frontend can share code. You can connect them to enable a fantastic development experience.

_How do you do it?_

First, generate a node application.
First, generate an Angular application.

```bash
ng g node-application backend
ng addd @nrwl/angular # Add Angular capabilities to a workspace
ng g @nrwl/angular:app frontend
```

The command will use Nest by default. If you prefer Express or you want to build your backend from scratch, pass `--framework=express` or `--framework=none`.

Second, generate an Angular application.
Second, generate a Nest application.

```bash
ng g application frontend
ng add @nrwl/nest # Add Nest capabilities to a workspace
ng g @nrwl/nest:app backend --frontend-project frontend # Generate a Nest Application and sets up a proxy for the frontend application.
```

Now, add the right proxy configuration:
We recommend using [Nest](https://nestjs.com). If you prefer Express or you want to build your backend from scratch, add and use different capabilities to your workspacevia:

```json
{
"/graphql": {
"target": "http://localhost:3333",
"secure": false
}
}
```sh
ng add @nrwl/express # Add Express capabilities to a workspace
ng add @nrwl/node # Add Node capabilities to a workspace
```

Finally, you can run `ng serve backend` and `ng serve frontend`. There is a lot more to full-stack development in Nx, which you can read about [here](/fundamentals/build-full-stack-applications).
Expand Down Expand Up @@ -133,13 +129,13 @@ Tools like Cypress, Jest, Prettier, and Nest have gained a lot of popularity.

It's not the case that Cypress is always better than Protractor or Nest is always better than say Express. 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!
Adding these tools to the dev workflow is challenging in a regular Angular 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!

When using Nx, adding Cypress or Jest is easy:

```bash
ng g application myapp --e2e-test-runner=cypress --unit-test-runner=jest # cypress and jest are actually defaults
ng g application myapp --e2e-test-runner=protractor --unit-test-runner=karma
ng g @nrwl/angular:app myapp --e2e-test-runner=cypress --unit-test-runner=jest # cypress and jest are actually defaults
ng g @nrwl/angular:app myapp --e2e-test-runner=protractor --unit-test-runner=karma
```

Tests can then be run just like you would run them normally:
Expand Down

0 comments on commit 5f404f4

Please sign in to comment.