Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(core): small tutorial updates #26559

Merged
merged 3 commits into from
Jun 21, 2024
Merged

docs(core): small tutorial updates #26559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e598d2
docs(core): small tutorial updates
isaacplmann Jun 14, 2024
a932060
docs(core): clean up angular tutorial
isaacplmann Jun 20, 2024
eec3327
docs(core): clean up react tutorial
isaacplmann Jun 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 15 additions & 28 deletions docs/shared/tutorials/angular-monorepo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,24 +385,12 @@ All libraries that we generate automatically have aliases created in the root-le
}
```

Hence we can easily import them into other libraries and our Angular application. As an example, let's create and expose a `ProductListComponent` component from our `libs/products` library. Either create it by hand or run
Hence we can easily import them into other libraries and our Angular application. As an example, let's use the pre-generated `ProductsComponent` component from our `libs/products` library.

```shell
nx g @nx/angular:component product-list --directory=libs/products/src/lib/product-list --standalone --export
```

We don't need to implement anything fancy as we just want to learn how to import it into our main Angular application.

```html {% fileName="libs/products/src/lib/product-list/product-list.component.html" %}
<p>product-list works!</p>
```

Make sure the `ProductListComponent` is exported via the `index.ts` file of our `products` library and is listed in the `exports` of the `ProductsModule`. This is our public API with the rest of the workspace. Only export what's really necessary to be usable outside the library itself.
You can see that the `ProductsComponent` is exported via the `index.ts` file of our `products` library so that other projects in the repository can use it. This is our public API with the rest of the workspace. Only export what's really necessary to be usable outside the library itself.

```ts {% fileName="libs/products/src/index.ts" %}
export * from './lib/products/products.component';

export * from './lib/product-list/product-list.component';
```

We're ready to import it into our main application now. First (if you haven't already), let's set up the Angular router. Configure it in the `app.config.ts`.
Expand All @@ -426,7 +414,7 @@ And in `app.component.html`:
<router-outlet></router-outlet>
```

Then we can add the `ProductListComponent` component to our `app.routes.ts` and render it via the routing mechanism whenever a user hits the `/products` route.
Then we can add the `ProductsComponent` component to our `app.routes.ts` and render it via the routing mechanism whenever a user hits the `/products` route.

```ts {% fileName="apps/angular-store/src/app/app.routes.ts" highlightLines=[10,11,12,13,14] %}
import { Route } from '@angular/router';
Expand All @@ -441,7 +429,7 @@ export const appRoutes: Route[] = [
{
path: 'products',
loadComponent: () =>
import('@angular-monorepo/products').then((m) => m.ProductListComponent),
import('@angular-monorepo/products').then((m) => m.ProductsComponent),
},
];
```
Expand All @@ -452,8 +440,7 @@ Serving your app (`nx serve angular-store`) and then navigating to `/products` s

Let's apply the same for our `orders` library.

- generate a new component `OrderListComponent` in `libs/orders` and export it in the corresponding `index.ts` file
- import it into the `app.routes.ts` and render it via the routing mechanism whenever a user hits the `/orders` route
- import the `OrdersComponent` from `libs/orders` into the `app.routes.ts` and render it via the routing mechanism whenever a user hits the `/orders` route

In the end, your `app.routes.ts` should look similar to this:

Expand All @@ -470,12 +457,12 @@ export const appRoutes: Route[] = [
{
path: 'products',
loadComponent: () =>
import('@angular-monorepo/products').then((m) => m.ProductListComponent),
import('@angular-monorepo/products').then((m) => m.ProductsComponent),
},
{
path: 'orders',
loadComponent: () =>
import('@angular-monorepo/orders').then((m) => m.OrderListComponent),
import('@angular-monorepo/orders').then((m) => m.OrdersComponent),
},
];
```
Expand All @@ -484,12 +471,12 @@ Let's also show products in the `inventory` app.

```ts {% fileName="apps/inventory/src/app/app.component.ts" highlightLines=[2,6] %}
import { Component } from '@angular/core';
import { ProductListComponent } from '@angular-monorepo/products';
import { ProductsComponent } from '@angular-monorepo/products';

@Component({
standalone: true,
imports: [ProductListComponent],
selector: 'angular-monorepo-root',
imports: [ProductsComponent],
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
Expand All @@ -499,7 +486,7 @@ export class AppComponent {
```

```ts {% fileName="apps/inventory/src/app/app.component.html" %}
<angular-monorepo-product-list></angular-monorepo-product-list>
<lib-products></lib-products>
```

## Visualizing your Project Structure
Expand Down Expand Up @@ -1185,14 +1172,14 @@ To enforce the rules, Nx ships with a custom ESLint rule. Open the `.eslintrc.ba
}
```

To test it, go to your `libs/products/src/lib/product-list/product-list.component.ts` file and import the `OrderListComponent` from the `orders` project:
To test it, go to your `libs/products/src/lib/product-list/product-list.component.ts` file and import the `OrdersComponent` from the `orders` project:

```ts {% fileName="libs/products/src/lib/product-list/product-list.component.ts" highlightLines=[4,5] %}
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

// This import is not allowed 👇
import { OrderListComponent } from '@angular-monorepo/orders';
import { OrdersComponent } from '@angular-monorepo/orders';

@Component({
selector: 'angular-monorepo-product-list',
Expand All @@ -1201,7 +1188,7 @@ import { OrderListComponent } from '@angular-monorepo/orders';
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css'],
})
export class ProductListComponent {}
export class ProductsComponent {}
```

If you lint your workspace you'll get an error now:
Expand All @@ -1213,7 +1200,7 @@ NX Running target lint for 7 projects

/Users/isaac/Documents/code/nx-recipes/angular-monorepo/libs/products/src/lib/product-list/product-list.component.ts
5:1 error A project tagged with "scope:products" can only depend on libs tagged with "scope:products", "scope:shared" @nx/enforce-module-boundaries
5:10 warning 'OrderListComponent' is defined but never used @typescript-eslint/no-unused-vars
5:10 warning 'OrdersComponent' is defined but never used @typescript-eslint/no-unused-vars

✖ 2 problems (1 error, 1 warning)

Expand Down
8 changes: 4 additions & 4 deletions docs/shared/tutorials/npm-workspaces.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ First, let's delete the `outputs` array from `nx.json` so that we don't override
Now let's add the `@nx/vite` plugin:

```{% command="npx nx add @nx/vite" path="~/tuskydesign" %}
✔ Installing @nx/vite@18.1.0...
✔ Installing @nx/vite...
✔ Initializing @nx/vite...

NX Package @nx/vite added successfully.
Expand All @@ -311,13 +311,13 @@ Now let's add the `@nx/vite` plugin:
The `nx add` command installs the version of the plugin that matches your repo's Nx version and runs that plugin's initialization script. For `@nx/vite`, the initialization script registers the plugin in the `plugins` array of `nx.json` and updates any `package.json` scripts that execute Vite related tasks. Open the project details view for the `demo` app and look at the `build` task.

```shell {% path="~/tuskydesigns" %}
npx nx show project @tuskdesign/demo --web
npx nx show project @tuskdesign/demo
```

{% project-details title="Project Details View" jsonFile="shared/tutorials/npm-workspaces-pdv.json" %}
{% /project-details %}

If you hover over the settings for the `build` task, you can see where those settings come from. The `inputs` and `outputs` are defined by the `@nx/vite` plugin from the `vite.config.ts` file where as the `dependsOn` property we set earlier in the tutorial in the `targetDefaults` in the `nx.json` file.
If you hover over the settings for the `vite:build` task, you can see where those settings come from. The `inputs` and `outputs` are defined by the `@nx/vite` plugin from the `vite.config.ts` file where as the `dependsOn` property we set earlier in the tutorial in the `targetDefaults` in the `nx.json` file.

Now let's change where the `build` results are output to in the `vite.config.ts` file.

Expand Down Expand Up @@ -403,7 +403,7 @@ This generator creates a `.github/workflows/ci.yml` file that contains a CI pipe
The key line in the CI pipeline is:

```yml
- run: npx nx affected -t lint test build e2e-ci
- run: npx nx affected -t lint test build
```

### Connect to Nx Cloud
Expand Down
Loading