171 lines
4.8 KiB
Markdown
171 lines
4.8 KiB
Markdown
# Angular Nx Tutorial - Step 1: Create Application
|
|
|
|
{% youtube
|
|
src="https://www.youtube.com/embed/i37yJKK8qGI"
|
|
title="Nx.dev Tutorial | Angular | Step 1: Create Application"
|
|
width="100%" /%}
|
|
|
|
In this tutorial you use Nx to build a full-stack application out of common libraries using modern technologies like Cypress and Nest.
|
|
|
|
{% callout type="check" title="Integrated Repo" %}
|
|
This tutorial sets up an [integrated repo](/concepts/integrated-vs-package-based). If you prefer a [package-based repo](/concepts/integrated-vs-package-based), check out the [Core Tutorial](/getting-started/core-tutorial).
|
|
{% /callout %}
|
|
|
|
## Contents
|
|
|
|
- [1 - Create Application](/angular-tutorial/01-create-application)
|
|
- [2 - Add E2E Test](/angular-tutorial/02-add-e2e-test)
|
|
- [3 - Display Todos](/angular-tutorial/03-display-todos)
|
|
- [4 - Connect to API](/angular-tutorial/04-connect-to-api)
|
|
- [5 - Add Node Application](/angular-tutorial/05-add-node-app)
|
|
- [6 - Proxy Configuration](/angular-tutorial/06-proxy)
|
|
- [7 - Share Code](/angular-tutorial/07-share-code)
|
|
- [8 - Create Libraries](/angular-tutorial/08-create-libs)
|
|
- [9 - Project Graph](/angular-tutorial/09-dep-graph)
|
|
- [10 - Use Computation Caching](/angular-tutorial/10-computation-caching)
|
|
- [11 - Test Affected Projects](/angular-tutorial/11-test-affected-projects)
|
|
- [12 - Summary](/angular-tutorial/12-summary)
|
|
|
|
## Create a new workspace
|
|
|
|
**Start by creating a new workspace.**
|
|
|
|
```bash
|
|
npx create-nx-workspace@latest
|
|
```
|
|
|
|
You then receive the following prompts in your command line:
|
|
|
|
```bash
|
|
Workspace name (e.g., org name) myorg
|
|
What to create in the new workspace angular
|
|
Application name todos
|
|
Default stylesheet format CSS
|
|
```
|
|
|
|
> You can also choose to add [Nx Cloud](https://nx.app), but its not required for the tutorial.
|
|
|
|
When asked about 'preset', select `angular`, and `todos` for the app name.
|
|
|
|
```treeview
|
|
myorg/
|
|
├── apps/
|
|
│ ├── todos/
|
|
│ │ ├── src/
|
|
│ │ │ ├── app/
|
|
│ │ │ ├── assets/
|
|
│ │ │ ├── environments/
|
|
│ │ │ ├── favicon.ico
|
|
│ │ │ ├── index.html
|
|
│ │ │ ├── main.ts
|
|
│ │ │ ├── polyfills.ts
|
|
│ │ │ ├── styles.scss
|
|
│ │ │ └── test-setup.ts
|
|
│ │ ├── .browserslistrc
|
|
│ │ ├── .eslintrc.json
|
|
│ │ ├── jest.config.ts
|
|
│ │ ├── project.json
|
|
│ │ ├── tsconfig.app.json
|
|
│ │ ├── tsconfig.editor.json
|
|
│ │ ├── tsconfig.json
|
|
│ │ └── tsconfig.spec.json
|
|
│ └── todos-e2e/
|
|
│ ├── src/
|
|
│ │ ├── fixtures/
|
|
│ │ │ └── example.json
|
|
│ │ ├── e2e/
|
|
│ │ │ └── app.cy.ts
|
|
│ │ └── support/
|
|
│ │ ├── app.po.ts
|
|
│ │ ├── commands.ts
|
|
│ │ └── e2e.ts
|
|
│ ├── cypress.config.ts
|
|
│ ├── project.json
|
|
│ └── tsconfig.json
|
|
├── libs/
|
|
├── tools/
|
|
├── .eslintrc.json
|
|
├── .prettierrc
|
|
├── angular.json
|
|
├── decorate-angular-cli.js
|
|
├── jest.config.ts
|
|
├── jest.preset.js
|
|
├── nx.json
|
|
├── package.json
|
|
├── README.md
|
|
└── tsconfig.base.json
|
|
```
|
|
|
|
The generate command added two projects to our workspace:
|
|
|
|
- An Angular application
|
|
- E2E tests for the Angular application
|
|
|
|
## Serve the newly created application
|
|
|
|
Now that the application is set up, run it locally via:
|
|
|
|
```bash
|
|
npx nx serve todos
|
|
```
|
|
|
|
## Note on the Nx CLI
|
|
|
|
If you would prefer to run using a global installation of Nx, you can run:
|
|
|
|
```bash
|
|
nx serve todos
|
|
```
|
|
|
|
Depending on how your dev env is set up, the command above might result in `Command 'nx' not found`.
|
|
|
|
To fix it, you can either install the `nx` cli globally by running:
|
|
|
|
{% tabs %}
|
|
{% tab label="yarn" %}
|
|
|
|
```bash
|
|
yarn global add nx
|
|
```
|
|
|
|
{% /tab %}
|
|
{% tab label="npm" %}
|
|
|
|
```bash
|
|
npm install -g nx
|
|
```
|
|
|
|
{% /tab %}
|
|
{% /tabs %}
|
|
|
|
Alternatively, you can run the local installation of Nx by prepending every command with `npx`:
|
|
|
|
{% tabs %}
|
|
{% tab label="yarn" %}
|
|
|
|
```bash
|
|
yarn nx serve todos
|
|
```
|
|
|
|
{% /tab %}
|
|
{% tab label="npm" %}
|
|
|
|
```bash
|
|
npx nx serve todos
|
|
```
|
|
|
|
{% /tab %}
|
|
{% /tabs %}
|
|
|
|
## Note on `nx serve` and `ng serve`
|
|
|
|
The Nx CLI syntax is intentionally similar to the Angular CLI. The `nx serve` command
|
|
produces the same result as `ng serve`, and `nx build` produces the same results as `ng build`. However, the Nx CLI
|
|
supports advanced capabilities that aren't supported by the Angular CLI. For instance, Nx's computation cache only
|
|
works when using the Nx CLI. In other words, using `nx` instead of `ng` results in the same output, but often performs
|
|
a lot better.
|
|
|
|
## What's Next
|
|
|
|
- Continue to [Step 2: Add E2E Tests](/angular-tutorial/02-add-e2e-test)
|