docs(core): documentation format fix (#6058)
This commit is contained in:
parent
6454ebbc1f
commit
03e3f60338
@ -165,7 +165,7 @@ ReactDOM.render(<App />, document.querySelector('happynrwl-root'));
|
|||||||
|
|
||||||
and `app.tsx` contains the following component:
|
and `app.tsx` contains the following component:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
|
|
||||||
@ -338,7 +338,7 @@ Using Greeting in the react app requires similar steps.
|
|||||||
|
|
||||||
Next, let's include the new library in `main.ts`.
|
Next, let's include the new library in `main.ts`.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import '@happynrwl/ui';
|
import '@happynrwl/ui';
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
@ -365,7 +365,7 @@ declare namespace JSX {
|
|||||||
|
|
||||||
Finally, we can update `app.tsx` to use our shared web component.
|
Finally, we can update `app.tsx` to use our shared web component.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
|
|
||||||
|
|||||||
@ -134,7 +134,7 @@ describe('shared-ui', () => {
|
|||||||
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
|
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
|
||||||
|
|
||||||
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [...],
|
stories: [...],
|
||||||
...,
|
...,
|
||||||
@ -143,7 +143,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
|
|||||||
```
|
```
|
||||||
2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js` use the `addDecorator` function.
|
2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js` use the `addDecorator` function.
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { configure, addDecorator } from '@storybook/angular';
|
import { configure, addDecorator } from '@storybook/angular';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -155,7 +155,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
|
|||||||
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
|
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
|
||||||
|
|
||||||
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [...],
|
stories: [...],
|
||||||
...,
|
...,
|
||||||
@ -164,7 +164,7 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook
|
|||||||
```
|
```
|
||||||
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
|
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { configure, addDecorator } from '@storybook/angular';
|
import { configure, addDecorator } from '@storybook/angular';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -215,7 +215,7 @@ The `@nrwl/angular:storybook-migrate-defaults-5-to-6` generator will not exactly
|
|||||||
|
|
||||||
That way, you can have working Storybook instances for all your projects just by running
|
That way, you can have working Storybook instances for all your projects just by running
|
||||||
|
|
||||||
```
|
```bash
|
||||||
nx g @nrwl/angular:storybook-migrate-defaults-5-to-6
|
nx g @nrwl/angular:storybook-migrate-defaults-5-to-6
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -271,7 +271,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
|
|||||||
|
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
```
|
```bash
|
||||||
yarn add --dev @storybook/angular@latest
|
yarn add --dev @storybook/angular@latest
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -287,7 +287,7 @@ If you have not changed the content of the files which the `storybook-configurat
|
|||||||
|
|
||||||
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
|
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [],
|
stories: [],
|
||||||
addons: ['@storybook/addon-knobs/register'],
|
addons: ['@storybook/addon-knobs/register'],
|
||||||
@ -302,7 +302,7 @@ module.exports = {
|
|||||||
|
|
||||||
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
|
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
const lib_main_module = require('../../.storybook/main');
|
const lib_main_module = require('../../.storybook/main');
|
||||||
|
|
||||||
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
|
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
|
||||||
@ -314,7 +314,7 @@ Please take extra care making sure that the path to the root `./storybook` direc
|
|||||||
|
|
||||||
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
|
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
lib_main_module.addons.push('<YOUR_ADDON_HERE>');
|
lib_main_module.addons.push('<YOUR_ADDON_HERE>');
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -322,7 +322,7 @@ After you add any addons in the `main.js` file, you can safely delete the `addon
|
|||||||
|
|
||||||
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
|
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { addDecorator } from '<%= uiFramework %>';
|
import { addDecorator } from '<%= uiFramework %>';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -331,26 +331,26 @@ addDecorator(withKnobs);
|
|||||||
|
|
||||||
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
|
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
config.resolve.extensions.push('.ts', '.tsx');
|
config.resolve.extensions.push('.ts', '.tsx');
|
||||||
config.module.rules.push({
|
config.module.rules.push({
|
||||||
test: /\.(ts|tsx)$/,
|
test: /\.(ts|tsx)$/,
|
||||||
loader: require.resolve('babel-loader'),
|
loader: require.resolve('babel-loader'),
|
||||||
options: {
|
options: {
|
||||||
presets: [
|
presets: [
|
||||||
'@babel/preset-env',
|
'@babel/preset-env',
|
||||||
'@babel/preset-react',
|
'@babel/preset-react',
|
||||||
'@babel/preset-typescript'
|
'@babel/preset-typescript',
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Check final folder structure
|
#### Check final folder structure
|
||||||
|
|
||||||
Your folder structure should now look like this:
|
Your folder structure should now look like this:
|
||||||
|
|
||||||
```
|
```treeview
|
||||||
<workspace name>/
|
<workspace name>/
|
||||||
├── .storybook/
|
├── .storybook/
|
||||||
│ ├── main.js
|
│ ├── main.js
|
||||||
|
|||||||
@ -12,7 +12,7 @@ using a monorepo approach. If you are currently using an Angular CLI workspace,
|
|||||||
|
|
||||||
To add Nx to an existing Angular CLI workspace to an Nx workspace, with keeping your existing file structure in place, use the `ng add` command with the `--preserveAngularCLILayout` option:
|
To add Nx to an existing Angular CLI workspace to an Nx workspace, with keeping your existing file structure in place, use the `ng add` command with the `--preserveAngularCLILayout` option:
|
||||||
|
|
||||||
```
|
```bash
|
||||||
ng add @nrwl/workspace --preserveAngularCLILayout
|
ng add @nrwl/workspace --preserveAngularCLILayout
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -28,7 +28,7 @@ After the process completes, you continue using the same serve/build/lint/test c
|
|||||||
|
|
||||||
To transform a Angular CLI workspace to an Nx workspace, use the `ng add` command:
|
To transform a Angular CLI workspace to an Nx workspace, use the `ng add` command:
|
||||||
|
|
||||||
```
|
```bash
|
||||||
ng add @nrwl/workspace
|
ng add @nrwl/workspace
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -174,7 +174,7 @@ Your application code is self-contained within the `src` folder of your Angular
|
|||||||
|
|
||||||
Verify your app runs correctly by running:
|
Verify your app runs correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng serve <app name>
|
ng serve <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -184,7 +184,7 @@ Nx uses Jest by default. If you have any custom Jest configuration, you need to
|
|||||||
|
|
||||||
Verify your tests run correctly by running:
|
Verify your tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng test <app name>
|
ng test <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
|
|||||||
|
|
||||||
Verify your tests run correctly by running:
|
Verify your tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng test <app name>
|
ng test <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -266,7 +266,7 @@ ng test <app name>
|
|||||||
|
|
||||||
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
|
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng e2e <app name>-e2e
|
ng e2e <app name>-e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -350,7 +350,7 @@ Update the `apps/<app name>/tsconfig.json` to extend the root `tsconfig.json`:
|
|||||||
|
|
||||||
Verify your E2E tests run correctly by running:
|
Verify your E2E tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng e2e <app name>-e2e
|
ng e2e <app name>-e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -362,13 +362,13 @@ For lint rules, migrate your existing rules into the root `tslint.json` file.
|
|||||||
|
|
||||||
Verify your lint checks run correctly by running:
|
Verify your lint checks run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npm run lint
|
npm run lint
|
||||||
```
|
```
|
||||||
|
|
||||||
OR
|
OR
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
yarn lint
|
yarn lint
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -64,13 +64,13 @@ Depending on how your dev env is set up, the command above might result in `Comm
|
|||||||
|
|
||||||
To fix it, you can either install the `nx` cli globally by running:
|
To fix it, you can either install the `nx` cli globally by running:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -g nx
|
npm install -g nx
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
or
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn global add nx
|
yarn global add nx
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -96,7 +96,7 @@ Every target uses a builder which actually runs this target. So targets are anal
|
|||||||
|
|
||||||
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
|
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx run todos:serve [options,...]
|
nx run todos:serve [options,...]
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
@ -119,6 +119,6 @@ But, most importantly, it provides a holistic dev experience regardless of the t
|
|||||||
|
|
||||||
Now that the application is set up, run it locally via:
|
Now that the application is set up, run it locally via:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve todos
|
nx serve todos
|
||||||
```
|
```
|
||||||
|
|||||||
@ -14,7 +14,7 @@ With Nx, we have the ability to scaffold out new code for our application. Let's
|
|||||||
|
|
||||||
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
|
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
$ nx generate @nrwl/nest:service todo --project todos --directory app
|
$ nx generate @nrwl/nest:service todo --project todos --directory app
|
||||||
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
|
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
|
||||||
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
|
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
|
||||||
@ -54,13 +54,13 @@ We now have our Todos service ready!
|
|||||||
|
|
||||||
In order to render some views, we'll need to install a template engine:
|
In order to render some views, we'll need to install a template engine:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add hbs
|
yarn add hbs
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
or
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install --save hbs
|
npm install --save hbs
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
|
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import logo from './logo.png';
|
import logo from './logo.png';
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ SVG images can be imported using the method described above.
|
|||||||
|
|
||||||
Alternatively, you can import SVG images as React components.
|
Alternatively, you can import SVG images as React components.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
import { ReactComponent as Logo } from './logo.svg';
|
||||||
|
|
||||||
|
|||||||
@ -121,7 +121,7 @@ Run:
|
|||||||
|
|
||||||
You can import the shared-components library into the Next.js application like this.
|
You can import the shared-components library into the Next.js application like this.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import { Home } from '@happynrwl/shared-components';
|
import { Home } from '@happynrwl/shared-components';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
@ -205,7 +205,7 @@ module.exports = {
|
|||||||
2. Ensure the Next.js "Framework Preset" is selected
|
2. Ensure the Next.js "Framework Preset" is selected
|
||||||
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
|
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx nx build tuskdesk --prod --outputPath=.
|
npx nx build tuskdesk --prod --outputPath=.
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -116,7 +116,7 @@ describe('shared-ui', () => {
|
|||||||
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
|
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
|
||||||
|
|
||||||
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [...],
|
stories: [...],
|
||||||
...,
|
...,
|
||||||
@ -125,7 +125,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
|
|||||||
```
|
```
|
||||||
2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js` use the `addDecorator` function.
|
2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js` use the `addDecorator` function.
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { configure, addDecorator } from '@storybook/react';
|
import { configure, addDecorator } from '@storybook/react';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -137,7 +137,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
|
|||||||
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
|
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
|
||||||
|
|
||||||
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [...],
|
stories: [...],
|
||||||
...,
|
...,
|
||||||
@ -146,7 +146,7 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook
|
|||||||
```
|
```
|
||||||
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
|
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { configure, addDecorator } from '@storybook/react';
|
import { configure, addDecorator } from '@storybook/react';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -251,7 +251,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
|
|||||||
|
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
```
|
```bash
|
||||||
yarn add --dev @storybook/react@latest
|
yarn add --dev @storybook/react@latest
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -267,7 +267,7 @@ If you have not changed the content of the files which the `storybook-configurat
|
|||||||
|
|
||||||
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
|
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [],
|
stories: [],
|
||||||
addons: ['@storybook/addon-knobs/register'],
|
addons: ['@storybook/addon-knobs/register'],
|
||||||
@ -282,7 +282,7 @@ module.exports = {
|
|||||||
|
|
||||||
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
|
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
const lib_main_module = require('../../.storybook/main');
|
const lib_main_module = require('../../.storybook/main');
|
||||||
|
|
||||||
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
|
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
|
||||||
@ -294,7 +294,7 @@ Please take extra care making sure that the path to the root `./storybook` direc
|
|||||||
|
|
||||||
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
|
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
lib_main_module.addons.push('<YOUR_ADDON_HERE>');
|
lib_main_module.addons.push('<YOUR_ADDON_HERE>');
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -302,7 +302,7 @@ After you add any addons in the `main.js` file, you can safely delete the `addon
|
|||||||
|
|
||||||
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
|
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { addDecorator } from '<%= uiFramework %>';
|
import { addDecorator } from '<%= uiFramework %>';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -311,26 +311,26 @@ addDecorator(withKnobs);
|
|||||||
|
|
||||||
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
|
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
config.resolve.extensions.push('.ts', '.tsx');
|
config.resolve.extensions.push('.ts', '.tsx');
|
||||||
config.module.rules.push({
|
config.module.rules.push({
|
||||||
test: /\.(ts|tsx)$/,
|
test: /\.(ts|tsx)$/,
|
||||||
loader: require.resolve('babel-loader'),
|
loader: require.resolve('babel-loader'),
|
||||||
options: {
|
options: {
|
||||||
presets: [
|
presets: [
|
||||||
'@babel/preset-env',
|
'@babel/preset-env',
|
||||||
'@babel/preset-react',
|
'@babel/preset-react',
|
||||||
'@babel/preset-typescript'
|
'@babel/preset-typescript',
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Check final folder structure
|
#### Check final folder structure
|
||||||
|
|
||||||
Your folder structure should now look like this:
|
Your folder structure should now look like this:
|
||||||
|
|
||||||
```
|
```treeview
|
||||||
<workspace name>/
|
<workspace name>/
|
||||||
├── .storybook/
|
├── .storybook/
|
||||||
│ ├── main.js
|
│ ├── main.js
|
||||||
|
|||||||
@ -14,7 +14,7 @@ The best way to work with Cypress is to keep the failing E2E test running while
|
|||||||
|
|
||||||
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
|
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
@ -48,7 +48,7 @@ export default App;
|
|||||||
|
|
||||||
**Add the `add-todo` button with the corresponding click handler.**
|
**Add the `add-todo` button with the corresponding click handler.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
|
|||||||
@ -8,7 +8,7 @@ Real-world applications do not live in isolation — they need APIs to talk
|
|||||||
|
|
||||||
**Let's change our application to fetch the data from the API.**
|
**Let's change our application to fetch the data from the API.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
|
|||||||
@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
|
|||||||
|
|
||||||
**Next import the interface in `apps/todos/src/app/app.tsx`:**
|
**Next import the interface in `apps/todos/src/app/app.tsx`:**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -50,7 +50,7 @@ myorg/
|
|||||||
|
|
||||||
The `libs/ui/src/lib/ui.tsx` file looks like this:
|
The `libs/ui/src/lib/ui.tsx` file looks like this:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import './ui.css';
|
import './ui.css';
|
||||||
@ -111,7 +111,7 @@ myorg/
|
|||||||
|
|
||||||
**Implement the Todos component.**
|
**Implement the Todos component.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -16,7 +16,7 @@ git checkout -b testbranch
|
|||||||
|
|
||||||
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
|
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -12,12 +12,12 @@ The Nx Plugin for Angular contains executors, generators, and utilities for mana
|
|||||||
|
|
||||||
Adding the Angular plugin to a workspace can be done with the following:
|
Adding the Angular plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/angular
|
yarn add -D @nrwl/angular
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/angular
|
npm install -D @nrwl/angular
|
||||||
```
|
```
|
||||||
|
|||||||
@ -6,12 +6,12 @@ The Express plugin contains generators to add a new Express application to an Nx
|
|||||||
|
|
||||||
Adding the Express plugin to a workspace can be done with the following:
|
Adding the Express plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/express
|
yarn add -D @nrwl/express
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/express
|
npm install -D @nrwl/express
|
||||||
```
|
```
|
||||||
@ -22,7 +22,7 @@ npm install -D @nrwl/express
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/express:application <express-app>
|
nx generate @nrwl/express:application <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -68,7 +68,7 @@ server.on('error', console.error);
|
|||||||
|
|
||||||
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/express:application <express-app> --frontendProject my-react-app
|
nx generate @nrwl/express:application <express-app> --frontendProject my-react-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -78,13 +78,13 @@ When a Express application is added to the workspace.json (or angular.json), the
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <express-app>
|
nx build <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <express-app> --configuration=production
|
nx build <express-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <express-app>
|
nx serve <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -115,7 +115,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Express app.
|
The lint command will run linting within the scope of the Express app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <express-app>
|
nx lint <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -123,6 +123,6 @@ nx lint <express-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Express app.
|
Test will execute Jest tests within the scope of the Express app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <express-app>
|
nx test <express-app>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -10,11 +10,11 @@ The Nx Plugin for Gatsby contains executors and generators for managing Gatsby a
|
|||||||
|
|
||||||
Installing the Gatsby plugin to a workspace can be done with the following:
|
Installing the Gatsby plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add -D @nrwl/gatsby
|
yarn add -D @nrwl/gatsby
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -D @nrwl/gatsby
|
npm install -D @nrwl/gatsby
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/gatsby:application <name>
|
nx generate @nrwl/gatsby:application <name>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -6,7 +6,7 @@ In general, the more modern your applications browser support is, the smaller th
|
|||||||
|
|
||||||
By default, applications generated from official Nx generators ship an aggressively modern browser support config, in the form of a `.browserlistrc` file in the root of the application with the following contents.
|
By default, applications generated from official Nx generators ship an aggressively modern browser support config, in the form of a `.browserlistrc` file in the root of the application with the following contents.
|
||||||
|
|
||||||
```
|
```text
|
||||||
last 1 Chrome version
|
last 1 Chrome version
|
||||||
last 1 Firefox version
|
last 1 Firefox version
|
||||||
last 2 Edge major versions
|
last 2 Edge major versions
|
||||||
@ -24,7 +24,7 @@ Adding support for IE or any other browser is as easy as changing the `.browserl
|
|||||||
|
|
||||||
To add support for IE 11 simply change the final line in the `.browserlistrc` file to include IE:
|
To add support for IE 11 simply change the final line in the `.browserlistrc` file to include IE:
|
||||||
|
|
||||||
```
|
```text
|
||||||
last 1 Chrome version
|
last 1 Chrome version
|
||||||
last 1 Firefox version
|
last 1 Firefox version
|
||||||
last 2 Edge major versions
|
last 2 Edge major versions
|
||||||
@ -42,7 +42,7 @@ Sometimes broad configurations like `> 0.5%, not IE 11` can lead to surprising r
|
|||||||
|
|
||||||
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
|
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
$ npx browserslist
|
$ npx browserslist
|
||||||
and_chr 61
|
and_chr 61
|
||||||
chrome 83
|
chrome 83
|
||||||
@ -65,6 +65,6 @@ safari 12
|
|||||||
|
|
||||||
Alternatively, if your support config is short you can just add it as a string param on the CLI:
|
Alternatively, if your support config is short you can just add it as a string param on the CLI:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx browserslist '> 0.5%, not IE 11'
|
npx browserslist '> 0.5%, not IE 11'
|
||||||
```
|
```
|
||||||
|
|||||||
@ -15,11 +15,11 @@ Many conventions and best practices used in Angular applications can be also be
|
|||||||
|
|
||||||
Installing the Nest plugin to a workspace can be done with the following:
|
Installing the Nest plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add -D @nrwl/nest
|
yarn add -D @nrwl/nest
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -D @nrwl/nest
|
npm install -D @nrwl/nest
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ npm install -D @nrwl/nest
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:application <nest-app>
|
nx generate @nrwl/nest:application <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -78,7 +78,7 @@ bootstrap();
|
|||||||
|
|
||||||
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:application <nest-app> --frontendProject my-angular-app
|
nx generate @nrwl/nest:application <nest-app> --frontendProject my-angular-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -88,13 +88,13 @@ When a Nest application is added to the workspace.json (or angular.json), the fo
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-app>
|
nx build <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-app> --configuration=production
|
nx build <nest-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <nest-app>
|
nx serve <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -125,7 +125,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Nest app.
|
The lint command will run linting within the scope of the Nest app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <nest-app>
|
nx lint <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -133,7 +133,7 @@ nx lint <nest-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Nest app.
|
Test will execute Jest tests within the scope of the Nest app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <nest-app>
|
nx test <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -141,13 +141,13 @@ nx test <nest-app>
|
|||||||
|
|
||||||
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
|
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib>
|
nx generate @nrwl/nest:library <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
|
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -156,7 +156,7 @@ nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
|||||||
|
|
||||||
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib> --buildable
|
nx generate @nrwl/nest:library <nest-lib> --buildable
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -168,7 +168,7 @@ When a Nest library is added to the workspace.json (or angular.json), the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Nest library.
|
The lint command will run linting within the scope of the Nest library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <nest-lib>
|
nx lint <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -176,7 +176,7 @@ nx lint <nest-lib>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Nest library.
|
Test will execute Jest tests within the scope of the Nest library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <nest-lib>
|
nx test <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -188,7 +188,7 @@ The build command will only be available if the library was generated with the `
|
|||||||
|
|
||||||
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-lib>
|
nx build <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -10,11 +10,11 @@ The Nx Plugin for Next.js contains executors and generators for managing Next.js
|
|||||||
|
|
||||||
Installing the Next plugin to a workspace can be done with the following:
|
Installing the Next plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add @nrwl/next
|
yarn add @nrwl/next
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install @nrwl/next
|
npm install @nrwl/next
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ npm install @nrwl/next
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/next:application <name>
|
nx generate @nrwl/next:application <name>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -6,12 +6,12 @@ The Node Plugin contains generators and executors to manage Node applications wi
|
|||||||
|
|
||||||
Installing the Node plugin to a workspace can be done with the following:
|
Installing the Node plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/node
|
yarn add -D @nrwl/node
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/node
|
npm install -D @nrwl/node
|
||||||
```
|
```
|
||||||
@ -20,7 +20,7 @@ npm install -D @nrwl/node
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:application <node-app>
|
nx generate @nrwl/node:application <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -51,7 +51,7 @@ Make sure to import any files within the `main.ts` file so that they can be exec
|
|||||||
|
|
||||||
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:application <node-app> --frontendProject my-react-app
|
nx generate @nrwl/node:application <node-app> --frontendProject my-react-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -61,13 +61,13 @@ When a Node application is added to the workspace.json (or angular.json), the fo
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-app>
|
nx build <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-app> --configuration=production
|
nx build <node-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <node-app>
|
nx serve <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -94,7 +94,7 @@ For additional information on how to debug Node applications, see the [Node.js d
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Node app.
|
The lint command will run linting within the scope of the Node app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <node-app>
|
nx lint <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ nx lint <node-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Node app.
|
Test will execute Jest tests within the scope of the Node app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <node-app>
|
nx test <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -110,7 +110,7 @@ nx test <node-app>
|
|||||||
|
|
||||||
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
|
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:library <node-lib>
|
nx generate @nrwl/node:library <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -118,7 +118,7 @@ nx generate @nrwl/node:library <node-lib>
|
|||||||
|
|
||||||
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:library <node-lib> --buildable
|
nx generate @nrwl/node:library <node-lib> --buildable
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -130,7 +130,7 @@ When a Node library is added to the workspace.json (or angular.json), the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Node library.
|
The lint command will run linting within the scope of the Node library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <node-lib>
|
nx lint <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -138,7 +138,7 @@ nx lint <node-lib>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Node library.
|
Test will execute Jest tests within the scope of the Node library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <node-lib>
|
nx test <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -148,6 +148,6 @@ The build command will only be available if the library was generated with the `
|
|||||||
|
|
||||||
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-lib>
|
nx build <node-lib>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -11,12 +11,12 @@ The Nx Plugin for React contains generators for managing React applications and
|
|||||||
|
|
||||||
Adding the React plugin to a workspace can be done with the following:
|
Adding the React plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/react
|
yarn add -D @nrwl/react
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/react
|
npm install -D @nrwl/react
|
||||||
```
|
```
|
||||||
|
|||||||
@ -14,7 +14,7 @@ make hello
|
|||||||
|
|
||||||
With this `Makefile` in the root of the project:
|
With this `Makefile` in the root of the project:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
hello:
|
hello:
|
||||||
echo "Hello, world!"
|
echo "Hello, world!"
|
||||||
```
|
```
|
||||||
|
|||||||
@ -109,7 +109,7 @@ This is all that’s required from the `package.json` file:
|
|||||||
|
|
||||||
After your files are created, compile your executor with `tsc` (which is available locally in any Nx workspace):
|
After your files are created, compile your executor with `tsc` (which is available locally in any Nx workspace):
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx tsc tools/executors/echo/impl
|
npx tsc tools/executors/echo/impl
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -149,13 +149,13 @@ Note that the format of the `executor` string here is: `${Path to directory cont
|
|||||||
|
|
||||||
Finally, you run the executor via the CLI as follows:
|
Finally, you run the executor via the CLI as follows:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx run platform:echo
|
nx run platform:echo
|
||||||
```
|
```
|
||||||
|
|
||||||
To which we'll see the console output:
|
To which we'll see the console output:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
> nx run platform:echo
|
> nx run platform:echo
|
||||||
Executing "echo"...
|
Executing "echo"...
|
||||||
Options: {
|
Options: {
|
||||||
|
|||||||
@ -6,7 +6,7 @@ Workspace generators provide a way to automate many tasks you regularly perform
|
|||||||
|
|
||||||
Use the Nx CLI to generate the initial files needed for your workspace generator.
|
Use the Nx CLI to generate the initial files needed for your workspace generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx generate @nrwl/workspace:workspace-generator my-generator
|
nx generate @nrwl/workspace:workspace-generator my-generator
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -73,7 +73,7 @@ The `$default` object is used to read arguments from the command-line that are p
|
|||||||
|
|
||||||
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
|
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-generator mylib
|
nx workspace-generator my-generator mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -81,13 +81,13 @@ nx workspace-generator my-generator mylib
|
|||||||
|
|
||||||
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
|
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-schematic mylib
|
nx workspace-generator my-schematic mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
The command is also aliased to the previous `workspace-schematic` command, so this still works:
|
The command is also aliased to the previous `workspace-schematic` command, so this still works:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-schematic my-schematic mylib
|
nx workspace-schematic my-schematic mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -158,13 +158,13 @@ Next, run the generator:
|
|||||||
|
|
||||||
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
|
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-generator mylib
|
nx workspace-generator my-generator mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
The following information will be displayed.
|
The following information will be displayed.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
CREATE libs/mylib/README.md
|
CREATE libs/mylib/README.md
|
||||||
CREATE libs/mylib/.babelrc
|
CREATE libs/mylib/.babelrc
|
||||||
CREATE libs/mylib/src/index.ts
|
CREATE libs/mylib/src/index.ts
|
||||||
|
|||||||
@ -10,12 +10,12 @@ The Nx Plugin for Web Components contains generators for managing Web Component
|
|||||||
|
|
||||||
Adding the Web plugin to a workspace can be done with the following:
|
Adding the Web plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/web
|
yarn add -D @nrwl/web
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/web
|
npm install -D @nrwl/web
|
||||||
```
|
```
|
||||||
|
|||||||
@ -26,7 +26,7 @@ Let's use Nrwl Airlines as an example organization. This organization has two ap
|
|||||||
|
|
||||||
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
|
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
|
||||||
|
|
||||||
```txt
|
```text
|
||||||
apps/
|
apps/
|
||||||
booking/
|
booking/
|
||||||
check-in/
|
check-in/
|
||||||
@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
|
|||||||
|
|
||||||
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
|
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
|
||||||
|
|
||||||
```txt
|
```text
|
||||||
libs/
|
libs/
|
||||||
booking/
|
booking/
|
||||||
data-access/ <---- app-specific library
|
data-access/ <---- app-specific library
|
||||||
|
|||||||
@ -53,7 +53,7 @@ export function CodeBlock({
|
|||||||
</button>
|
</button>
|
||||||
</CopyToClipboard>
|
</CopyToClipboard>
|
||||||
<SyntaxHighlighter
|
<SyntaxHighlighter
|
||||||
showLineNumbers={language !== 'bash' && language !== 'treeview'}
|
showLineNumbers={!['bash', 'text', 'treeview'].includes(language)}
|
||||||
useInlineStyles={false}
|
useInlineStyles={false}
|
||||||
language={language}
|
language={language}
|
||||||
children={text}
|
children={text}
|
||||||
|
|||||||
@ -165,7 +165,7 @@ ReactDOM.render(<App />, document.querySelector('happynrwl-root'));
|
|||||||
|
|
||||||
and `app.tsx` contains the following component:
|
and `app.tsx` contains the following component:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
|
|
||||||
@ -338,7 +338,7 @@ Using Greeting in the react app requires similar steps.
|
|||||||
|
|
||||||
Next, let's include the new library in `main.ts`.
|
Next, let's include the new library in `main.ts`.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import '@happynrwl/ui';
|
import '@happynrwl/ui';
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
@ -365,7 +365,7 @@ declare namespace JSX {
|
|||||||
|
|
||||||
Finally, we can update `app.tsx` to use our shared web component.
|
Finally, we can update `app.tsx` to use our shared web component.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
|
|
||||||
|
|||||||
@ -174,7 +174,7 @@ Your application code is self-contained within the `src` folder of your Angular
|
|||||||
|
|
||||||
Verify your app runs correctly by running:
|
Verify your app runs correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng serve <app name>
|
ng serve <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -184,7 +184,7 @@ Nx uses Jest by default. If you have any custom Jest configuration, you need to
|
|||||||
|
|
||||||
Verify your tests run correctly by running:
|
Verify your tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng test <app name>
|
ng test <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
|
|||||||
|
|
||||||
Verify your tests run correctly by running:
|
Verify your tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng test <app name>
|
ng test <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -266,7 +266,7 @@ ng test <app name>
|
|||||||
|
|
||||||
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
|
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng e2e <app name>-e2e
|
ng e2e <app name>-e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -350,7 +350,7 @@ Update the `apps/<app name>/tsconfig.json` to extend the root `tsconfig.json`:
|
|||||||
|
|
||||||
Verify your E2E tests run correctly by running:
|
Verify your E2E tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng e2e <app name>-e2e
|
ng e2e <app name>-e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -362,13 +362,13 @@ For lint rules, migrate your existing rules into the root `tslint.json` file.
|
|||||||
|
|
||||||
Verify your lint checks run correctly by running:
|
Verify your lint checks run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npm run lint
|
npm run lint
|
||||||
```
|
```
|
||||||
|
|
||||||
OR
|
OR
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
yarn lint
|
yarn lint
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -64,13 +64,13 @@ Depending on how your dev env is set up, the command above might result in `Comm
|
|||||||
|
|
||||||
To fix it, you can either install the `nx` cli globally by running:
|
To fix it, you can either install the `nx` cli globally by running:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -g nx
|
npm install -g nx
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
or
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn global add nx
|
yarn global add nx
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -96,7 +96,7 @@ Every target uses a builder which actually runs this target. So targets are anal
|
|||||||
|
|
||||||
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
|
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx run todos:serve [options,...]
|
nx run todos:serve [options,...]
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
@ -119,6 +119,6 @@ But, most importantly, it provides a holistic dev experience regardless of the t
|
|||||||
|
|
||||||
Now that the application is set up, run it locally via:
|
Now that the application is set up, run it locally via:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve todos
|
nx serve todos
|
||||||
```
|
```
|
||||||
|
|||||||
@ -14,7 +14,7 @@ With Nx, we have the ability to scaffold out new code for our application. Let's
|
|||||||
|
|
||||||
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
|
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
$ nx generate @nrwl/nest:service todo --project todos --directory app
|
$ nx generate @nrwl/nest:service todo --project todos --directory app
|
||||||
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
|
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
|
||||||
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
|
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
|
||||||
@ -54,13 +54,13 @@ We now have our Todos service ready!
|
|||||||
|
|
||||||
In order to render some views, we'll need to install a template engine:
|
In order to render some views, we'll need to install a template engine:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add hbs
|
yarn add hbs
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
or
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install --save hbs
|
npm install --save hbs
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
|
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import logo from './logo.png';
|
import logo from './logo.png';
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ SVG images can be imported using the method described above.
|
|||||||
|
|
||||||
Alternatively, you can import SVG images as React components.
|
Alternatively, you can import SVG images as React components.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
import { ReactComponent as Logo } from './logo.svg';
|
||||||
|
|
||||||
|
|||||||
@ -121,7 +121,7 @@ Run:
|
|||||||
|
|
||||||
You can import the shared-components library into the Next.js application like this.
|
You can import the shared-components library into the Next.js application like this.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import { Home } from '@happynrwl/shared-components';
|
import { Home } from '@happynrwl/shared-components';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
@ -205,7 +205,7 @@ module.exports = {
|
|||||||
2. Ensure the Next.js "Framework Preset" is selected
|
2. Ensure the Next.js "Framework Preset" is selected
|
||||||
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
|
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx nx build tuskdesk --prod --outputPath=.
|
npx nx build tuskdesk --prod --outputPath=.
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -14,7 +14,7 @@ The best way to work with Cypress is to keep the failing E2E test running while
|
|||||||
|
|
||||||
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
|
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
@ -48,7 +48,7 @@ export default App;
|
|||||||
|
|
||||||
**Add the `add-todo` button with the corresponding click handler.**
|
**Add the `add-todo` button with the corresponding click handler.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
|
|||||||
@ -8,7 +8,7 @@ Real-world applications do not live in isolation — they need APIs to talk
|
|||||||
|
|
||||||
**Let's change our application to fetch the data from the API.**
|
**Let's change our application to fetch the data from the API.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
|
|||||||
@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
|
|||||||
|
|
||||||
**Next import the interface in `apps/todos/src/app/app.tsx`:**
|
**Next import the interface in `apps/todos/src/app/app.tsx`:**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -50,7 +50,7 @@ myorg/
|
|||||||
|
|
||||||
The `libs/ui/src/lib/ui.tsx` file looks like this:
|
The `libs/ui/src/lib/ui.tsx` file looks like this:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import './ui.css';
|
import './ui.css';
|
||||||
@ -111,7 +111,7 @@ myorg/
|
|||||||
|
|
||||||
**Implement the Todos component.**
|
**Implement the Todos component.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -16,7 +16,7 @@ git checkout -b testbranch
|
|||||||
|
|
||||||
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
|
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -12,12 +12,12 @@ The Nx Plugin for Angular contains executors, generators, and utilities for mana
|
|||||||
|
|
||||||
Adding the Angular plugin to a workspace can be done with the following:
|
Adding the Angular plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/angular
|
yarn add -D @nrwl/angular
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/angular
|
npm install -D @nrwl/angular
|
||||||
```
|
```
|
||||||
|
|||||||
@ -6,12 +6,12 @@ The Express plugin contains generators to add a new Express application to an Nx
|
|||||||
|
|
||||||
Adding the Express plugin to a workspace can be done with the following:
|
Adding the Express plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/express
|
yarn add -D @nrwl/express
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/express
|
npm install -D @nrwl/express
|
||||||
```
|
```
|
||||||
@ -22,7 +22,7 @@ npm install -D @nrwl/express
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/express:application <express-app>
|
nx generate @nrwl/express:application <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -68,7 +68,7 @@ server.on('error', console.error);
|
|||||||
|
|
||||||
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/express:application <express-app> --frontendProject my-react-app
|
nx generate @nrwl/express:application <express-app> --frontendProject my-react-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -78,13 +78,13 @@ When a Express application is added to the workspace.json (or angular.json), the
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <express-app>
|
nx build <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <express-app> --configuration=production
|
nx build <express-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <express-app>
|
nx serve <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -115,7 +115,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Express app.
|
The lint command will run linting within the scope of the Express app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <express-app>
|
nx lint <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -123,6 +123,6 @@ nx lint <express-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Express app.
|
Test will execute Jest tests within the scope of the Express app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <express-app>
|
nx test <express-app>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -10,11 +10,11 @@ The Nx Plugin for Gatsby contains executors and generators for managing Gatsby a
|
|||||||
|
|
||||||
Installing the Gatsby plugin to a workspace can be done with the following:
|
Installing the Gatsby plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add -D @nrwl/gatsby
|
yarn add -D @nrwl/gatsby
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -D @nrwl/gatsby
|
npm install -D @nrwl/gatsby
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/gatsby:application <name>
|
nx generate @nrwl/gatsby:application <name>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -42,7 +42,7 @@ Sometimes broad configurations like `> 0.5%, not IE 11` can lead to surprising r
|
|||||||
|
|
||||||
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
|
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
$ npx browserslist
|
$ npx browserslist
|
||||||
and_chr 61
|
and_chr 61
|
||||||
chrome 83
|
chrome 83
|
||||||
@ -65,6 +65,6 @@ safari 12
|
|||||||
|
|
||||||
Alternatively, if your support config is short you can just add it as a string param on the CLI:
|
Alternatively, if your support config is short you can just add it as a string param on the CLI:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx browserslist '> 0.5%, not IE 11'
|
npx browserslist '> 0.5%, not IE 11'
|
||||||
```
|
```
|
||||||
|
|||||||
@ -15,11 +15,11 @@ Many conventions and best practices used in Angular applications can be also be
|
|||||||
|
|
||||||
Installing the Nest plugin to a workspace can be done with the following:
|
Installing the Nest plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add -D @nrwl/nest
|
yarn add -D @nrwl/nest
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -D @nrwl/nest
|
npm install -D @nrwl/nest
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ npm install -D @nrwl/nest
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:application <nest-app>
|
nx generate @nrwl/nest:application <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -78,7 +78,7 @@ bootstrap();
|
|||||||
|
|
||||||
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:application <nest-app> --frontendProject my-angular-app
|
nx generate @nrwl/nest:application <nest-app> --frontendProject my-angular-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -88,13 +88,13 @@ When a Nest application is added to the workspace.json (or angular.json), the fo
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-app>
|
nx build <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-app> --configuration=production
|
nx build <nest-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <nest-app>
|
nx serve <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -125,7 +125,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Nest app.
|
The lint command will run linting within the scope of the Nest app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <nest-app>
|
nx lint <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -133,7 +133,7 @@ nx lint <nest-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Nest app.
|
Test will execute Jest tests within the scope of the Nest app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <nest-app>
|
nx test <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -141,13 +141,13 @@ nx test <nest-app>
|
|||||||
|
|
||||||
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
|
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib>
|
nx generate @nrwl/nest:library <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
|
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -156,7 +156,7 @@ nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
|||||||
|
|
||||||
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib> --buildable
|
nx generate @nrwl/nest:library <nest-lib> --buildable
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -168,7 +168,7 @@ When a Nest library is added to the workspace.json (or angular.json), the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Nest library.
|
The lint command will run linting within the scope of the Nest library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <nest-lib>
|
nx lint <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -176,7 +176,7 @@ nx lint <nest-lib>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Nest library.
|
Test will execute Jest tests within the scope of the Nest library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <nest-lib>
|
nx test <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -188,7 +188,7 @@ The build command will only be available if the library was generated with the `
|
|||||||
|
|
||||||
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-lib>
|
nx build <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -10,11 +10,11 @@ The Nx Plugin for Next.js contains executors and generators for managing Next.js
|
|||||||
|
|
||||||
Installing the Next plugin to a workspace can be done with the following:
|
Installing the Next plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add @nrwl/next
|
yarn add @nrwl/next
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install @nrwl/next
|
npm install @nrwl/next
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ npm install @nrwl/next
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/next:application <name>
|
nx generate @nrwl/next:application <name>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -6,12 +6,12 @@ The Node Plugin contains generators and executors to manage Node applications wi
|
|||||||
|
|
||||||
Installing the Node plugin to a workspace can be done with the following:
|
Installing the Node plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/node
|
yarn add -D @nrwl/node
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/node
|
npm install -D @nrwl/node
|
||||||
```
|
```
|
||||||
@ -20,7 +20,7 @@ npm install -D @nrwl/node
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:application <node-app>
|
nx generate @nrwl/node:application <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -51,7 +51,7 @@ Make sure to import any files within the `main.ts` file so that they can be exec
|
|||||||
|
|
||||||
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:application <node-app> --frontendProject my-react-app
|
nx generate @nrwl/node:application <node-app> --frontendProject my-react-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -61,13 +61,13 @@ When a Node application is added to the workspace.json (or angular.json), the fo
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-app>
|
nx build <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-app> --configuration=production
|
nx build <node-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <node-app>
|
nx serve <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -94,7 +94,7 @@ For additional information on how to debug Node applications, see the [Node.js d
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Node app.
|
The lint command will run linting within the scope of the Node app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <node-app>
|
nx lint <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ nx lint <node-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Node app.
|
Test will execute Jest tests within the scope of the Node app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <node-app>
|
nx test <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -110,7 +110,7 @@ nx test <node-app>
|
|||||||
|
|
||||||
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
|
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:library <node-lib>
|
nx generate @nrwl/node:library <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -118,7 +118,7 @@ nx generate @nrwl/node:library <node-lib>
|
|||||||
|
|
||||||
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:library <node-lib> --buildable
|
nx generate @nrwl/node:library <node-lib> --buildable
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -130,7 +130,7 @@ When a Node library is added to the workspace.json (or angular.json), the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Node library.
|
The lint command will run linting within the scope of the Node library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <node-lib>
|
nx lint <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -138,7 +138,7 @@ nx lint <node-lib>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Node library.
|
Test will execute Jest tests within the scope of the Node library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <node-lib>
|
nx test <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -148,6 +148,6 @@ The build command will only be available if the library was generated with the `
|
|||||||
|
|
||||||
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-lib>
|
nx build <node-lib>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -11,12 +11,12 @@ The Nx Plugin for React contains generators for managing React applications and
|
|||||||
|
|
||||||
Adding the React plugin to a workspace can be done with the following:
|
Adding the React plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/react
|
yarn add -D @nrwl/react
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/react
|
npm install -D @nrwl/react
|
||||||
```
|
```
|
||||||
|
|||||||
@ -14,7 +14,7 @@ make hello
|
|||||||
|
|
||||||
With this `Makefile` in the root of the project:
|
With this `Makefile` in the root of the project:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
hello:
|
hello:
|
||||||
echo "Hello, world!"
|
echo "Hello, world!"
|
||||||
```
|
```
|
||||||
|
|||||||
@ -109,7 +109,7 @@ This is all that’s required from the `package.json` file:
|
|||||||
|
|
||||||
After your files are created, compile your executor with `tsc` (which is available locally in any Nx workspace):
|
After your files are created, compile your executor with `tsc` (which is available locally in any Nx workspace):
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx tsc tools/executors/echo/impl
|
npx tsc tools/executors/echo/impl
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -149,13 +149,13 @@ Note that the format of the `executor` string here is: `${Path to directory cont
|
|||||||
|
|
||||||
Finally, you run the executor via the CLI as follows:
|
Finally, you run the executor via the CLI as follows:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx run platform:echo
|
nx run platform:echo
|
||||||
```
|
```
|
||||||
|
|
||||||
To which we'll see the console output:
|
To which we'll see the console output:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
> nx run platform:echo
|
> nx run platform:echo
|
||||||
Executing "echo"...
|
Executing "echo"...
|
||||||
Options: {
|
Options: {
|
||||||
|
|||||||
@ -6,7 +6,7 @@ Workspace generators provide a way to automate many tasks you regularly perform
|
|||||||
|
|
||||||
Use the Nx CLI to generate the initial files needed for your workspace generator.
|
Use the Nx CLI to generate the initial files needed for your workspace generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx generate @nrwl/workspace:workspace-generator my-generator
|
nx generate @nrwl/workspace:workspace-generator my-generator
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -73,7 +73,7 @@ The `$default` object is used to read arguments from the command-line that are p
|
|||||||
|
|
||||||
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
|
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-generator mylib
|
nx workspace-generator my-generator mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -81,13 +81,13 @@ nx workspace-generator my-generator mylib
|
|||||||
|
|
||||||
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
|
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-schematic mylib
|
nx workspace-generator my-schematic mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
The command is also aliased to the previous `workspace-schematic` command, so this still works:
|
The command is also aliased to the previous `workspace-schematic` command, so this still works:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-schematic my-schematic mylib
|
nx workspace-schematic my-schematic mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -158,13 +158,13 @@ Next, run the generator:
|
|||||||
|
|
||||||
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
|
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-generator mylib
|
nx workspace-generator my-generator mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
The following information will be displayed.
|
The following information will be displayed.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
CREATE libs/mylib/README.md
|
CREATE libs/mylib/README.md
|
||||||
CREATE libs/mylib/.babelrc
|
CREATE libs/mylib/.babelrc
|
||||||
CREATE libs/mylib/src/index.ts
|
CREATE libs/mylib/src/index.ts
|
||||||
|
|||||||
@ -10,12 +10,12 @@ The Nx Plugin for Web Components contains generators for managing Web Component
|
|||||||
|
|
||||||
Adding the Web plugin to a workspace can be done with the following:
|
Adding the Web plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/web
|
yarn add -D @nrwl/web
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/web
|
npm install -D @nrwl/web
|
||||||
```
|
```
|
||||||
|
|||||||
@ -26,7 +26,7 @@ Let's use Nrwl Airlines as an example organization. This organization has two ap
|
|||||||
|
|
||||||
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
|
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
|
||||||
|
|
||||||
```txt
|
```text
|
||||||
apps/
|
apps/
|
||||||
booking/
|
booking/
|
||||||
check-in/
|
check-in/
|
||||||
@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
|
|||||||
|
|
||||||
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
|
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
|
||||||
|
|
||||||
```txt
|
```text
|
||||||
libs/
|
libs/
|
||||||
booking/
|
booking/
|
||||||
data-access/ <---- app-specific library
|
data-access/ <---- app-specific library
|
||||||
|
|||||||
@ -164,7 +164,7 @@ ReactDOM.render(<App />, document.querySelector('happynrwl-root'));
|
|||||||
|
|
||||||
and `app.tsx` contains the following component:
|
and `app.tsx` contains the following component:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
|
|
||||||
@ -336,7 +336,7 @@ Using Greeting in the react app requires similar steps.
|
|||||||
|
|
||||||
Next, let's include the new library in `main.ts`.
|
Next, let's include the new library in `main.ts`.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import '@happynrwl/ui';
|
import '@happynrwl/ui';
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
@ -363,7 +363,7 @@ declare namespace JSX {
|
|||||||
|
|
||||||
Finally, we can update `app.tsx` to use our shared web component.
|
Finally, we can update `app.tsx` to use our shared web component.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Component } from 'react';
|
import { Component } from 'react';
|
||||||
|
|
||||||
|
|||||||
@ -174,7 +174,7 @@ Your application code is self-contained within the `src` folder of your Angular
|
|||||||
|
|
||||||
Verify your app runs correctly by running:
|
Verify your app runs correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng serve <app name>
|
ng serve <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -184,7 +184,7 @@ Nx uses Jest by default. If you have any custom Jest configuration, you need to
|
|||||||
|
|
||||||
Verify your tests run correctly by running:
|
Verify your tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng test <app name>
|
ng test <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
|
|||||||
|
|
||||||
Verify your tests run correctly by running:
|
Verify your tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng test <app name>
|
ng test <app name>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -266,7 +266,7 @@ ng test <app name>
|
|||||||
|
|
||||||
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
|
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/<app name>-e2e` folder and verify your tests still run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng e2e <app name>-e2e
|
ng e2e <app name>-e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -350,7 +350,7 @@ Update the `apps/<app name>/tsconfig.json` to extend the root `tsconfig.json`:
|
|||||||
|
|
||||||
Verify your E2E tests run correctly by running:
|
Verify your E2E tests run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
ng e2e <app name>-e2e
|
ng e2e <app name>-e2e
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -362,13 +362,13 @@ For lint rules, migrate your existing rules into the root `tslint.json` file.
|
|||||||
|
|
||||||
Verify your lint checks run correctly by running:
|
Verify your lint checks run correctly by running:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npm run lint
|
npm run lint
|
||||||
```
|
```
|
||||||
|
|
||||||
OR
|
OR
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
yarn lint
|
yarn lint
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -64,13 +64,13 @@ Depending on how your dev env is set up, the command above might result in `Comm
|
|||||||
|
|
||||||
To fix it, you can either install the `nx` cli globally by running:
|
To fix it, you can either install the `nx` cli globally by running:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -g nx
|
npm install -g nx
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
or
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn global add nx
|
yarn global add nx
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -96,7 +96,7 @@ Every target uses a builder which actually runs this target. So targets are anal
|
|||||||
|
|
||||||
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
|
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx run todos:serve [options,...]
|
nx run todos:serve [options,...]
|
||||||
|
|
||||||
Options:
|
Options:
|
||||||
@ -119,7 +119,7 @@ But, most importantly, it provides a holistic dev experience regardless of the t
|
|||||||
|
|
||||||
Now that the application is set up, run it locally via:
|
Now that the application is set up, run it locally via:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve todos
|
nx serve todos
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -14,7 +14,7 @@ With Nx, we have the ability to scaffold out new code for our application. Let's
|
|||||||
|
|
||||||
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
|
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
$ nx generate @nrwl/nest:service todo --project todos --directory app
|
$ nx generate @nrwl/nest:service todo --project todos --directory app
|
||||||
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
|
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
|
||||||
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
|
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
|
||||||
@ -54,13 +54,13 @@ We now have our Todos service ready!
|
|||||||
|
|
||||||
In order to render some views, we'll need to install a template engine:
|
In order to render some views, we'll need to install a template engine:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add hbs
|
yarn add hbs
|
||||||
```
|
```
|
||||||
|
|
||||||
or
|
or
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install --save hbs
|
npm install --save hbs
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
|
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import logo from './logo.png';
|
import logo from './logo.png';
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ SVG images can be imported using the method described above.
|
|||||||
|
|
||||||
Alternatively, you can import SVG images as React components.
|
Alternatively, you can import SVG images as React components.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ReactComponent as Logo } from './logo.svg';
|
import { ReactComponent as Logo } from './logo.svg';
|
||||||
|
|
||||||
|
|||||||
@ -121,7 +121,7 @@ Run:
|
|||||||
|
|
||||||
You can import the shared-components library into the Next.js application like this.
|
You can import the shared-components library into the Next.js application like this.
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import { Home } from '@happynrwl/shared-components';
|
import { Home } from '@happynrwl/shared-components';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
@ -153,7 +153,7 @@ In order to deploy your Next.js application from your Nx workspace you should do
|
|||||||
|
|
||||||
Let's continue to use our `tuskdesk` example from above, and so we need to check out our config at `apps/tuskdesk/next.config.js`. If you created the application using a recent (at the time of writing) version of Nx, such as Nx 11, then you will likely see the following in that config by default:
|
Let's continue to use our `tuskdesk` example from above, and so we need to check out our config at `apps/tuskdesk/next.config.js`. If you created the application using a recent (at the time of writing) version of Nx, such as Nx 11, then you will likely see the following in that config by default:
|
||||||
|
|
||||||
```js
|
```typescript
|
||||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
const withNx = require('@nrwl/next/plugins/with-nx');
|
const withNx = require('@nrwl/next/plugins/with-nx');
|
||||||
|
|
||||||
@ -164,7 +164,7 @@ If you have a config which looks like that (leveraging the `withNx()` config plu
|
|||||||
|
|
||||||
If, however, you created the application using an older version of Nx, you may just see an empty object:
|
If, however, you created the application using an older version of Nx, you may just see an empty object:
|
||||||
|
|
||||||
```js
|
```typescript
|
||||||
module.exports = {};
|
module.exports = {};
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -176,7 +176,7 @@ If this is the case, or if you are using a version of Nx older than `11.1.0`, th
|
|||||||
|
|
||||||
E.g.
|
E.g.
|
||||||
|
|
||||||
```js
|
```typescript
|
||||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
const withNx = require('@nrwl/next/plugins/with-nx');
|
const withNx = require('@nrwl/next/plugins/with-nx');
|
||||||
|
|
||||||
@ -188,7 +188,7 @@ module.exports = withNx({
|
|||||||
|
|
||||||
OR
|
OR
|
||||||
|
|
||||||
```js
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
target: 'experimental-serverless-trace',
|
target: 'experimental-serverless-trace',
|
||||||
// ...You can of course have other Next.js config options specified here too, but the "target" is critical for Vercel deployments...
|
// ...You can of course have other Next.js config options specified here too, but the "target" is critical for Vercel deployments...
|
||||||
@ -205,7 +205,7 @@ module.exports = {
|
|||||||
2. Ensure the Next.js "Framework Preset" is selected
|
2. Ensure the Next.js "Framework Preset" is selected
|
||||||
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
|
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx nx build tuskdesk --prod --outputPath=.
|
npx nx build tuskdesk --prod --outputPath=.
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -116,7 +116,7 @@ describe('shared-ui', () => {
|
|||||||
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
|
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
|
||||||
|
|
||||||
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [...],
|
stories: [...],
|
||||||
...,
|
...,
|
||||||
@ -125,7 +125,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
|
|||||||
```
|
```
|
||||||
2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js` use the `addDecorator` function.
|
2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js` use the `addDecorator` function.
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { configure, addDecorator } from '@storybook/react';
|
import { configure, addDecorator } from '@storybook/react';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -137,7 +137,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
|
|||||||
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
|
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
|
||||||
|
|
||||||
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [...],
|
stories: [...],
|
||||||
...,
|
...,
|
||||||
@ -146,7 +146,7 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook
|
|||||||
```
|
```
|
||||||
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
|
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { configure, addDecorator } from '@storybook/react';
|
import { configure, addDecorator } from '@storybook/react';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -197,7 +197,7 @@ The `@nrwl/react:storybook-migrate-defaults-5-to-6` generator will not exactly d
|
|||||||
|
|
||||||
That way, you can have working Storybook instances for all your projects just by running
|
That way, you can have working Storybook instances for all your projects just by running
|
||||||
|
|
||||||
```
|
```bash
|
||||||
nx g @nrwl/react:storybook-migrate-defaults-5-to-6
|
nx g @nrwl/react:storybook-migrate-defaults-5-to-6
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -251,7 +251,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
|
|||||||
|
|
||||||
For example:
|
For example:
|
||||||
|
|
||||||
```
|
```bash
|
||||||
yarn add --dev @storybook/react@latest
|
yarn add --dev @storybook/react@latest
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -267,7 +267,7 @@ If you have not changed the content of the files which the `storybook-configurat
|
|||||||
|
|
||||||
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
|
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
module.exports = {
|
module.exports = {
|
||||||
stories: [],
|
stories: [],
|
||||||
addons: ['@storybook/addon-knobs/register'],
|
addons: ['@storybook/addon-knobs/register'],
|
||||||
@ -282,7 +282,7 @@ module.exports = {
|
|||||||
|
|
||||||
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
|
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
const lib_main_module = require('../../.storybook/main');
|
const lib_main_module = require('../../.storybook/main');
|
||||||
|
|
||||||
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
|
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
|
||||||
@ -294,7 +294,7 @@ Please take extra care making sure that the path to the root `./storybook` direc
|
|||||||
|
|
||||||
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
|
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
lib_main_module.addons.push('<YOUR_ADDON_HERE>');
|
lib_main_module.addons.push('<YOUR_ADDON_HERE>');
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -302,7 +302,7 @@ After you add any addons in the `main.js` file, you can safely delete the `addon
|
|||||||
|
|
||||||
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
|
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
import { addDecorator } from '<%= uiFramework %>';
|
import { addDecorator } from '<%= uiFramework %>';
|
||||||
import { withKnobs } from '@storybook/addon-knobs';
|
import { withKnobs } from '@storybook/addon-knobs';
|
||||||
|
|
||||||
@ -311,26 +311,26 @@ addDecorator(withKnobs);
|
|||||||
|
|
||||||
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
|
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
|
||||||
|
|
||||||
```
|
```typescript
|
||||||
config.resolve.extensions.push('.ts', '.tsx');
|
config.resolve.extensions.push('.ts', '.tsx');
|
||||||
config.module.rules.push({
|
config.module.rules.push({
|
||||||
test: /\.(ts|tsx)$/,
|
test: /\.(ts|tsx)$/,
|
||||||
loader: require.resolve('babel-loader'),
|
loader: require.resolve('babel-loader'),
|
||||||
options: {
|
options: {
|
||||||
presets: [
|
presets: [
|
||||||
'@babel/preset-env',
|
'@babel/preset-env',
|
||||||
'@babel/preset-react',
|
'@babel/preset-react',
|
||||||
'@babel/preset-typescript'
|
'@babel/preset-typescript',
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Check final folder structure
|
#### Check final folder structure
|
||||||
|
|
||||||
Your folder structure should now look like this:
|
Your folder structure should now look like this:
|
||||||
|
|
||||||
```
|
```treeview
|
||||||
<workspace name>/
|
<workspace name>/
|
||||||
├── .storybook/
|
├── .storybook/
|
||||||
│ ├── main.js
|
│ ├── main.js
|
||||||
|
|||||||
@ -14,7 +14,7 @@ The best way to work with Cypress is to keep the failing E2E test running while
|
|||||||
|
|
||||||
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
|
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
@ -48,7 +48,7 @@ export default App;
|
|||||||
|
|
||||||
**Add the `add-todo` button with the corresponding click handler.**
|
**Add the `add-todo` button with the corresponding click handler.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
|
|||||||
@ -8,7 +8,7 @@ Real-world applications do not live in isolation — they need APIs to talk
|
|||||||
|
|
||||||
**Let's change our application to fetch the data from the API.**
|
**Let's change our application to fetch the data from the API.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
interface Todo {
|
interface Todo {
|
||||||
|
|||||||
@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
|
|||||||
|
|
||||||
**Next import the interface in `apps/todos/src/app/app.tsx`:**
|
**Next import the interface in `apps/todos/src/app/app.tsx`:**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -50,7 +50,7 @@ myorg/
|
|||||||
|
|
||||||
The `libs/ui/src/lib/ui.tsx` file looks like this:
|
The `libs/ui/src/lib/ui.tsx` file looks like this:
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import './ui.css';
|
import './ui.css';
|
||||||
@ -111,7 +111,7 @@ myorg/
|
|||||||
|
|
||||||
**Implement the Todos component.**
|
**Implement the Todos component.**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -16,7 +16,7 @@ git checkout -b testbranch
|
|||||||
|
|
||||||
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
|
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
|
||||||
|
|
||||||
```typescript jsx
|
```typescript
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Todo } from '@myorg/data';
|
import { Todo } from '@myorg/data';
|
||||||
|
|
||||||
|
|||||||
@ -12,12 +12,12 @@ The Nx Plugin for Angular contains executors, generators, and utilities for mana
|
|||||||
|
|
||||||
Adding the Angular plugin to a workspace can be done with the following:
|
Adding the Angular plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/angular
|
yarn add -D @nrwl/angular
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/angular
|
npm install -D @nrwl/angular
|
||||||
```
|
```
|
||||||
|
|||||||
@ -6,12 +6,12 @@ The Express plugin contains generators to add a new Express application to an Nx
|
|||||||
|
|
||||||
Adding the Express plugin to a workspace can be done with the following:
|
Adding the Express plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/express
|
yarn add -D @nrwl/express
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/express
|
npm install -D @nrwl/express
|
||||||
```
|
```
|
||||||
@ -22,7 +22,7 @@ npm install -D @nrwl/express
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/express:application <express-app>
|
nx generate @nrwl/express:application <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -68,7 +68,7 @@ server.on('error', console.error);
|
|||||||
|
|
||||||
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/express:application <express-app> --frontendProject my-react-app
|
nx generate @nrwl/express:application <express-app> --frontendProject my-react-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -78,13 +78,13 @@ When a Express application is added to the workspace.json (or angular.json), the
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <express-app>
|
nx build <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <express-app> --configuration=production
|
nx build <express-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <express-app>
|
nx serve <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -115,7 +115,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Express app.
|
The lint command will run linting within the scope of the Express app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <express-app>
|
nx lint <express-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -123,6 +123,6 @@ nx lint <express-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Express app.
|
Test will execute Jest tests within the scope of the Express app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <express-app>
|
nx test <express-app>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -10,11 +10,11 @@ The Nx Plugin for Gatsby contains executors and generators for managing Gatsby a
|
|||||||
|
|
||||||
Installing the Gatsby plugin to a workspace can be done with the following:
|
Installing the Gatsby plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add -D @nrwl/gatsby
|
yarn add -D @nrwl/gatsby
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -D @nrwl/gatsby
|
npm install -D @nrwl/gatsby
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/gatsby:application <name>
|
nx generate @nrwl/gatsby:application <name>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -6,7 +6,7 @@ In general, the more modern your applications browser support is, the smaller th
|
|||||||
|
|
||||||
By default, applications generated from official Nx generators ship an aggressively modern browser support config, in the form of a `.browserlistrc` file in the root of the application with the following contents.
|
By default, applications generated from official Nx generators ship an aggressively modern browser support config, in the form of a `.browserlistrc` file in the root of the application with the following contents.
|
||||||
|
|
||||||
```
|
```text
|
||||||
last 1 Chrome version
|
last 1 Chrome version
|
||||||
last 1 Firefox version
|
last 1 Firefox version
|
||||||
last 2 Edge major versions
|
last 2 Edge major versions
|
||||||
@ -24,7 +24,7 @@ Adding support for IE or any other browser is as easy as changing the `.browserl
|
|||||||
|
|
||||||
To add support for IE 11 simply change the final line in the `.browserlistrc` file to include IE:
|
To add support for IE 11 simply change the final line in the `.browserlistrc` file to include IE:
|
||||||
|
|
||||||
```
|
```text
|
||||||
last 1 Chrome version
|
last 1 Chrome version
|
||||||
last 1 Firefox version
|
last 1 Firefox version
|
||||||
last 2 Edge major versions
|
last 2 Edge major versions
|
||||||
@ -42,7 +42,7 @@ Sometimes broad configurations like `> 0.5%, not IE 11` can lead to surprising r
|
|||||||
|
|
||||||
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
|
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
$ npx browserslist
|
$ npx browserslist
|
||||||
and_chr 61
|
and_chr 61
|
||||||
chrome 83
|
chrome 83
|
||||||
@ -65,6 +65,6 @@ safari 12
|
|||||||
|
|
||||||
Alternatively, if your support config is short you can just add it as a string param on the CLI:
|
Alternatively, if your support config is short you can just add it as a string param on the CLI:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
npx browserslist '> 0.5%, not IE 11'
|
npx browserslist '> 0.5%, not IE 11'
|
||||||
```
|
```
|
||||||
|
|||||||
@ -15,11 +15,11 @@ Many conventions and best practices used in Angular applications can be also be
|
|||||||
|
|
||||||
Installing the Nest plugin to a workspace can be done with the following:
|
Installing the Nest plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add -D @nrwl/nest
|
yarn add -D @nrwl/nest
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -D @nrwl/nest
|
npm install -D @nrwl/nest
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -27,7 +27,7 @@ npm install -D @nrwl/nest
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:application <nest-app>
|
nx generate @nrwl/nest:application <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -78,7 +78,7 @@ bootstrap();
|
|||||||
|
|
||||||
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:application <nest-app> --frontendProject my-angular-app
|
nx generate @nrwl/nest:application <nest-app> --frontendProject my-angular-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -88,13 +88,13 @@ When a Nest application is added to the workspace.json (or angular.json), the fo
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-app>
|
nx build <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-app> --configuration=production
|
nx build <nest-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <nest-app>
|
nx serve <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -125,7 +125,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Nest app.
|
The lint command will run linting within the scope of the Nest app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <nest-app>
|
nx lint <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -133,7 +133,7 @@ nx lint <nest-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Nest app.
|
Test will execute Jest tests within the scope of the Nest app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <nest-app>
|
nx test <nest-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -141,13 +141,13 @@ nx test <nest-app>
|
|||||||
|
|
||||||
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
|
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib>
|
nx generate @nrwl/nest:library <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
|
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -156,7 +156,7 @@ nx generate @nrwl/nest:library <nest-lib> [--controller] [--service] [--global]
|
|||||||
|
|
||||||
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/nest:library <nest-lib> --buildable
|
nx generate @nrwl/nest:library <nest-lib> --buildable
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -168,7 +168,7 @@ When a Nest library is added to the workspace.json (or angular.json), the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Nest library.
|
The lint command will run linting within the scope of the Nest library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <nest-lib>
|
nx lint <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -176,7 +176,7 @@ nx lint <nest-lib>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Nest library.
|
Test will execute Jest tests within the scope of the Nest library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <nest-lib>
|
nx test <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -188,7 +188,7 @@ The build command will only be available if the library was generated with the `
|
|||||||
|
|
||||||
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <nest-lib>
|
nx build <nest-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -10,11 +10,11 @@ The Nx Plugin for Next.js contains executors and generators for managing Next.js
|
|||||||
|
|
||||||
Installing the Next plugin to a workspace can be done with the following:
|
Installing the Next plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
yarn add -D @nrwl/next
|
yarn add -D @nrwl/next
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
npm install -D @nrwl/next
|
npm install -D @nrwl/next
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -22,7 +22,7 @@ npm install -D @nrwl/next
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/next:application <name>
|
nx generate @nrwl/next:application <name>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -6,12 +6,12 @@ The Node Plugin contains generators and executors to manage Node applications wi
|
|||||||
|
|
||||||
Installing the Node plugin to a workspace can be done with the following:
|
Installing the Node plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/node
|
yarn add -D @nrwl/node
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/node
|
npm install -D @nrwl/node
|
||||||
```
|
```
|
||||||
@ -20,7 +20,7 @@ npm install -D @nrwl/node
|
|||||||
|
|
||||||
Generating new applications can be done with the following:
|
Generating new applications can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:application <node-app>
|
nx generate @nrwl/node:application <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -51,7 +51,7 @@ Make sure to import any files within the `main.ts` file so that they can be exec
|
|||||||
|
|
||||||
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:application <node-app> --frontendProject my-react-app
|
nx generate @nrwl/node:application <node-app> --frontendProject my-react-app
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -61,13 +61,13 @@ When a Node application is added to the workspace.json (or angular.json), the fo
|
|||||||
|
|
||||||
#### build
|
#### build
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-app>
|
nx build <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-app> --configuration=production
|
nx build <node-app> --configuration=production
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
|
|||||||
|
|
||||||
#### serve
|
#### serve
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx serve <node-app>
|
nx serve <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -94,7 +94,7 @@ For additional information on how to debug Node applications, see the [Node.js d
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Node app.
|
The lint command will run linting within the scope of the Node app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <node-app>
|
nx lint <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ nx lint <node-app>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Node app.
|
Test will execute Jest tests within the scope of the Node app.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <node-app>
|
nx test <node-app>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -110,7 +110,7 @@ nx test <node-app>
|
|||||||
|
|
||||||
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
|
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:library <node-lib>
|
nx generate @nrwl/node:library <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -118,7 +118,7 @@ nx generate @nrwl/node:library <node-lib>
|
|||||||
|
|
||||||
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx generate @nrwl/node:library <node-lib> --buildable
|
nx generate @nrwl/node:library <node-lib> --buildable
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -130,7 +130,7 @@ When a Node library is added to the workspace.json (or angular.json), the follow
|
|||||||
|
|
||||||
The lint command will run linting within the scope of the Node library.
|
The lint command will run linting within the scope of the Node library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx lint <node-lib>
|
nx lint <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -138,7 +138,7 @@ nx lint <node-lib>
|
|||||||
|
|
||||||
Test will execute Jest tests within the scope of the Node library.
|
Test will execute Jest tests within the scope of the Node library.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx test <node-lib>
|
nx test <node-lib>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -148,6 +148,6 @@ The build command will only be available if the library was generated with the `
|
|||||||
|
|
||||||
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
nx build <node-lib>
|
nx build <node-lib>
|
||||||
```
|
```
|
||||||
|
|||||||
@ -11,12 +11,12 @@ The Nx Plugin for React contains generators for managing React applications and
|
|||||||
|
|
||||||
Adding the React plugin to a workspace can be done with the following:
|
Adding the React plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/react
|
yarn add -D @nrwl/react
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/react
|
npm install -D @nrwl/react
|
||||||
```
|
```
|
||||||
|
|||||||
@ -14,7 +14,7 @@ make hello
|
|||||||
|
|
||||||
With this `Makefile` in the root of the project:
|
With this `Makefile` in the root of the project:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
hello:
|
hello:
|
||||||
echo "Hello, world!"
|
echo "Hello, world!"
|
||||||
```
|
```
|
||||||
|
|||||||
@ -201,7 +201,7 @@ export default async function (
|
|||||||
|
|
||||||
After your files are created, you can compile your builder with `tsc` (which should be available as long as you've installed Typescript globally: `npm i -g typescript`):
|
After your files are created, you can compile your builder with `tsc` (which should be available as long as you've installed Typescript globally: `npm i -g typescript`):
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
tsc tools/builders/echo/impl
|
tsc tools/builders/echo/impl
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -241,13 +241,13 @@ Note that the format of the `executor` string here is: `${Path to directory cont
|
|||||||
|
|
||||||
Finally, we may run our builder via the CLI as follows:
|
Finally, we may run our builder via the CLI as follows:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx run platform:echo
|
nx run platform:echo
|
||||||
```
|
```
|
||||||
|
|
||||||
To which we'll see the console output:
|
To which we'll see the console output:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
> ng run platform:echo
|
> ng run platform:echo
|
||||||
Executing "echo"...
|
Executing "echo"...
|
||||||
Hello World
|
Hello World
|
||||||
|
|||||||
@ -6,7 +6,7 @@ Workspace generators provide a way to automate many tasks you regularly perform
|
|||||||
|
|
||||||
Use the Nx CLI to generate the initial files needed for your workspace generator.
|
Use the Nx CLI to generate the initial files needed for your workspace generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx generate @nrwl/workspace:workspace-generator my-generator
|
nx generate @nrwl/workspace:workspace-generator my-generator
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -73,7 +73,7 @@ The `$default` object is used to read arguments from the command-line that are p
|
|||||||
|
|
||||||
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
|
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-generator mylib
|
nx workspace-generator my-generator mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -81,13 +81,13 @@ nx workspace-generator my-generator mylib
|
|||||||
|
|
||||||
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
|
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-schematic mylib
|
nx workspace-generator my-schematic mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
The command is also aliased to the previous `workspace-schematic` command, so this still works:
|
The command is also aliased to the previous `workspace-schematic` command, so this still works:
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-schematic my-schematic mylib
|
nx workspace-schematic my-schematic mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -165,13 +165,13 @@ Next, run the schematic:
|
|||||||
|
|
||||||
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
|
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
nx workspace-generator my-schematic mylib
|
nx workspace-generator my-schematic mylib
|
||||||
```
|
```
|
||||||
|
|
||||||
The following information will be displayed.
|
The following information will be displayed.
|
||||||
|
|
||||||
```sh
|
```bash
|
||||||
> NX Executing your local schematic: my-schematic
|
> NX Executing your local schematic: my-schematic
|
||||||
|
|
||||||
CREATE libs/mylib/tslint.json (48 bytes)
|
CREATE libs/mylib/tslint.json (48 bytes)
|
||||||
|
|||||||
@ -10,12 +10,12 @@ The Nx Plugin for Web Components contains generators for managing Web Component
|
|||||||
|
|
||||||
Adding the Web plugin to a workspace can be done with the following:
|
Adding the Web plugin to a workspace can be done with the following:
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#yarn
|
#yarn
|
||||||
yarn add -D @nrwl/web
|
yarn add -D @nrwl/web
|
||||||
```
|
```
|
||||||
|
|
||||||
```shell script
|
```bash
|
||||||
#npm
|
#npm
|
||||||
npm install -D @nrwl/web
|
npm install -D @nrwl/web
|
||||||
```
|
```
|
||||||
|
|||||||
@ -26,7 +26,7 @@ Let's use Nrwl Airlines as an example organization. This organization has two ap
|
|||||||
|
|
||||||
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
|
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
|
||||||
|
|
||||||
```txt
|
```text
|
||||||
apps/
|
apps/
|
||||||
booking/
|
booking/
|
||||||
check-in/
|
check-in/
|
||||||
@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
|
|||||||
|
|
||||||
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
|
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
|
||||||
|
|
||||||
```txt
|
```text
|
||||||
libs/
|
libs/
|
||||||
booking/
|
booking/
|
||||||
data-access/ <---- app-specific library
|
data-access/ <---- app-specific library
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user