docs(core): documentation format fix (#6058)

This commit is contained in:
Benjamin Cabanes 2021-06-17 13:55:49 -04:00 committed by GitHub
parent 6454ebbc1f
commit 03e3f60338
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
76 changed files with 358 additions and 358 deletions

View File

@ -165,7 +165,7 @@ ReactDOM.render(<App />, document.querySelector('happynrwl-root'));
and `app.tsx` contains the following component:
```typescript jsx
```typescript
import * as React 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`.
```typescript jsx
```typescript
import '@happynrwl/ui';
import * as React from 'react';
@ -365,7 +365,7 @@ declare namespace JSX {
Finally, we can update `app.tsx` to use our shared web component.
```typescript jsx
```typescript
import * as React from 'react';
import { Component } from 'react';

View File

@ -134,7 +134,7 @@ describe('shared-ui', () => {
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:
```
```typescript
module.exports = {
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.
```
```typescript
import { configure, addDecorator } from '@storybook/angular';
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:
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
```
```typescript
module.exports = {
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.
```
```typescript
import { configure, addDecorator } from '@storybook/angular';
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
```
```bash
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:
```
```bash
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:
```
```typescript
module.exports = {
stories: [],
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:
```
```typescript
const lib_main_module = require('../../.storybook/main');
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:
```
```typescript
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:
```
```typescript
import { addDecorator } from '<%= uiFramework %>';
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:
```
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
]
}
});
```typescript
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
},
});
```
#### Check final folder structure
Your folder structure should now look like this:
```
```treeview
<workspace name>/
├── .storybook/
│ ├── main.js

View File

@ -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:
```
```bash
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:
```
```bash
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:
```sh
```bash
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:
```sh
```bash
ng test <app name>
```
@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
Verify your tests run correctly by running:
```sh
```bash
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:
```sh
```bash
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:
```sh
```bash
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:
```sh
```bash
npm run lint
```
OR
```sh
```bash
yarn lint
```

View File

@ -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:
```shell script
```bash
npm install -g nx
```
or
```shell script
```bash
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:
```shell script
```bash
nx run todos:serve [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:
```shell script
```bash
nx serve todos
```

View File

@ -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**
```shell script
```bash
$ 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.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:
```shell script
```bash
yarn add hbs
```
or
```shell script
```bash
npm install --save hbs
```

View File

@ -2,7 +2,7 @@
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
```typescript jsx
```typescript
import React from 'react';
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.
```typescript jsx
```typescript
import React from 'react';
import { ReactComponent as Logo } from './logo.svg';

View File

@ -121,7 +121,7 @@ Run:
You can import the shared-components library into the Next.js application like this.
```typescript jsx
```typescript
import { Home } from '@happynrwl/shared-components';
import React from 'react';
@ -205,7 +205,7 @@ module.exports = {
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:
```sh
```bash
npx nx build tuskdesk --prod --outputPath=.
```

View File

@ -116,7 +116,7 @@ describe('shared-ui', () => {
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:
```
```typescript
module.exports = {
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.
```
```typescript
import { configure, addDecorator } from '@storybook/react';
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:
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
```
```typescript
module.exports = {
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.
```
```typescript
import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
@ -251,7 +251,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
For example:
```
```bash
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:
```
```typescript
module.exports = {
stories: [],
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:
```
```typescript
const lib_main_module = require('../../.storybook/main');
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:
```
```typescript
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:
```
```typescript
import { addDecorator } from '<%= uiFramework %>';
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:
```
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
]
}
});
```typescript
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
},
});
```
#### Check final folder structure
Your folder structure should now look like this:
```
```treeview
<workspace name>/
├── .storybook/
│ ├── main.js

View File

@ -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`:
```typescript jsx
```typescript
import React, { useState } from 'react';
interface Todo {
@ -48,7 +48,7 @@ export default App;
**Add the `add-todo` button with the corresponding click handler.**
```typescript jsx
```typescript
import React, { useState } from 'react';
interface Todo {

View File

@ -8,7 +8,7 @@ Real-world applications do not live in isolationthey need APIs to talk
**Let's change our application to fetch the data from the API.**
```typescript jsx
```typescript
import React, { useEffect, useState } from 'react';
interface Todo {

View File

@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
**Next import the interface in `apps/todos/src/app/app.tsx`:**
```typescript jsx
```typescript
import React, { useEffect, useState } from 'react';
import { Todo } from '@myorg/data';

View File

@ -50,7 +50,7 @@ myorg/
The `libs/ui/src/lib/ui.tsx` file looks like this:
```typescript jsx
```typescript
import React from 'react';
import './ui.css';
@ -111,7 +111,7 @@ myorg/
**Implement the Todos component.**
```typescript jsx
```typescript
import React from 'react';
import { Todo } from '@myorg/data';

View File

@ -16,7 +16,7 @@ git checkout -b testbranch
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
```typescript jsx
```typescript
import React from 'react';
import { Todo } from '@myorg/data';

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/angular
```
```shell script
```bash
#npm
npm install -D @nrwl/angular
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/express
```
```shell script
```bash
#npm
npm install -D @nrwl/express
```
@ -22,7 +22,7 @@ npm install -D @nrwl/express
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <express-app>
```
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
```
@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <express-app>
```
@ -123,6 +123,6 @@ nx lint <express-app>
Test will execute Jest tests within the scope of the Express app.
```shell script
```bash
nx test <express-app>
```

View File

@ -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:
```shell script
```bash
yarn add -D @nrwl/gatsby
```
```shell script
```bash
npm install -D @nrwl/gatsby
```
@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
Generating new applications can be done with the following:
```shell script
```bash
nx generate @nrwl/gatsby:application <name>
```

View File

@ -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.
```
```text
last 1 Chrome version
last 1 Firefox version
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:
```
```text
last 1 Chrome version
last 1 Firefox version
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.
```sh
```bash
$ npx browserslist
and_chr 61
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:
```sh
```bash
npx browserslist '> 0.5%, not IE 11'
```

View File

@ -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:
```shell script
```bash
yarn add -D @nrwl/nest
```
```shell script
```bash
npm install -D @nrwl/nest
```
@ -27,7 +27,7 @@ npm install -D @nrwl/nest
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <nest-app>
```
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
```
@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <nest-app>
```
@ -133,7 +133,7 @@ nx lint <nest-app>
Test will execute Jest tests within the scope of the Nest app.
```shell script
```bash
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:
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
nx lint <nest-lib>
```
@ -176,7 +176,7 @@ nx lint <nest-lib>
Test will execute Jest tests within the scope of the Nest library.
```shell script
```bash
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.
```shell script
```bash
nx build <nest-lib>
```

View File

@ -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:
```shell script
```bash
yarn add @nrwl/next
```
```shell script
```bash
npm install @nrwl/next
```
@ -22,7 +22,7 @@ npm install @nrwl/next
Generating new applications can be done with the following:
```shell script
```bash
nx generate @nrwl/next:application <name>
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/node
```
```shell script
```bash
#npm
npm install -D @nrwl/node
```
@ -20,7 +20,7 @@ npm install -D @nrwl/node
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <node-app>
```
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
```
@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <node-app>
```
@ -102,7 +102,7 @@ nx lint <node-app>
Test will execute Jest tests within the scope of the Node app.
```shell script
```bash
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:
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
nx lint <node-lib>
```
@ -138,7 +138,7 @@ nx lint <node-lib>
Test will execute Jest tests within the scope of the Node library.
```shell script
```bash
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.
```shell script
```bash
nx build <node-lib>
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/react
```
```shell script
```bash
#npm
npm install -D @nrwl/react
```

View File

@ -14,7 +14,7 @@ make hello
With this `Makefile` in the root of the project:
```shell script
```bash
hello:
echo "Hello, world!"
```

View File

@ -109,7 +109,7 @@ This is all thats required from the `package.json` file:
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
```
@ -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:
```sh
```bash
nx run platform:echo
```
To which we'll see the console output:
```sh
```bash
> nx run platform:echo
Executing "echo"...
Options: {

View File

@ -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.
```sh
```bash
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.
```sh
```bash
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.
```sh
```bash
nx workspace-generator my-schematic mylib
```
The command is also aliased to the previous `workspace-schematic` command, so this still works:
```sh
```bash
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.
```sh
```bash
nx workspace-generator my-generator mylib
```
The following information will be displayed.
```sh
```bash
CREATE libs/mylib/README.md
CREATE libs/mylib/.babelrc
CREATE libs/mylib/src/index.ts

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/web
```
```shell script
```bash
#npm
npm install -D @nrwl/web
```

View File

@ -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.
```txt
```text
apps/
booking/
check-in/
@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
Lets 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/
booking/
data-access/ <---- app-specific library

View File

@ -53,7 +53,7 @@ export function CodeBlock({
</button>
</CopyToClipboard>
<SyntaxHighlighter
showLineNumbers={language !== 'bash' && language !== 'treeview'}
showLineNumbers={!['bash', 'text', 'treeview'].includes(language)}
useInlineStyles={false}
language={language}
children={text}

View File

@ -165,7 +165,7 @@ ReactDOM.render(<App />, document.querySelector('happynrwl-root'));
and `app.tsx` contains the following component:
```typescript jsx
```typescript
import * as React 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`.
```typescript jsx
```typescript
import '@happynrwl/ui';
import * as React from 'react';
@ -365,7 +365,7 @@ declare namespace JSX {
Finally, we can update `app.tsx` to use our shared web component.
```typescript jsx
```typescript
import * as React from 'react';
import { Component } from 'react';

View File

@ -174,7 +174,7 @@ Your application code is self-contained within the `src` folder of your Angular
Verify your app runs correctly by running:
```sh
```bash
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:
```sh
```bash
ng test <app name>
```
@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
Verify your tests run correctly by running:
```sh
```bash
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:
```sh
```bash
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:
```sh
```bash
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:
```sh
```bash
npm run lint
```
OR
```sh
```bash
yarn lint
```

View File

@ -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:
```shell script
```bash
npm install -g nx
```
or
```shell script
```bash
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:
```shell script
```bash
nx run todos:serve [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:
```shell script
```bash
nx serve todos
```

View File

@ -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**
```shell script
```bash
$ 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.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:
```shell script
```bash
yarn add hbs
```
or
```shell script
```bash
npm install --save hbs
```

View File

@ -2,7 +2,7 @@
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
```typescript jsx
```typescript
import React from 'react';
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.
```typescript jsx
```typescript
import React from 'react';
import { ReactComponent as Logo } from './logo.svg';

View File

@ -121,7 +121,7 @@ Run:
You can import the shared-components library into the Next.js application like this.
```typescript jsx
```typescript
import { Home } from '@happynrwl/shared-components';
import React from 'react';
@ -205,7 +205,7 @@ module.exports = {
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:
```sh
```bash
npx nx build tuskdesk --prod --outputPath=.
```

View File

@ -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`:
```typescript jsx
```typescript
import React, { useState } from 'react';
interface Todo {
@ -48,7 +48,7 @@ export default App;
**Add the `add-todo` button with the corresponding click handler.**
```typescript jsx
```typescript
import React, { useState } from 'react';
interface Todo {

View File

@ -8,7 +8,7 @@ Real-world applications do not live in isolationthey need APIs to talk
**Let's change our application to fetch the data from the API.**
```typescript jsx
```typescript
import React, { useEffect, useState } from 'react';
interface Todo {

View File

@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
**Next import the interface in `apps/todos/src/app/app.tsx`:**
```typescript jsx
```typescript
import React, { useEffect, useState } from 'react';
import { Todo } from '@myorg/data';

View File

@ -50,7 +50,7 @@ myorg/
The `libs/ui/src/lib/ui.tsx` file looks like this:
```typescript jsx
```typescript
import React from 'react';
import './ui.css';
@ -111,7 +111,7 @@ myorg/
**Implement the Todos component.**
```typescript jsx
```typescript
import React from 'react';
import { Todo } from '@myorg/data';

View File

@ -16,7 +16,7 @@ git checkout -b testbranch
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
```typescript jsx
```typescript
import React from 'react';
import { Todo } from '@myorg/data';

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/angular
```
```shell script
```bash
#npm
npm install -D @nrwl/angular
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/express
```
```shell script
```bash
#npm
npm install -D @nrwl/express
```
@ -22,7 +22,7 @@ npm install -D @nrwl/express
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <express-app>
```
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
```
@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <express-app>
```
@ -123,6 +123,6 @@ nx lint <express-app>
Test will execute Jest tests within the scope of the Express app.
```shell script
```bash
nx test <express-app>
```

View File

@ -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:
```shell script
```bash
yarn add -D @nrwl/gatsby
```
```shell script
```bash
npm install -D @nrwl/gatsby
```
@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
Generating new applications can be done with the following:
```shell script
```bash
nx generate @nrwl/gatsby:application <name>
```

View File

@ -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.
```sh
```bash
$ npx browserslist
and_chr 61
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:
```sh
```bash
npx browserslist '> 0.5%, not IE 11'
```

View File

@ -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:
```shell script
```bash
yarn add -D @nrwl/nest
```
```shell script
```bash
npm install -D @nrwl/nest
```
@ -27,7 +27,7 @@ npm install -D @nrwl/nest
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <nest-app>
```
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
```
@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <nest-app>
```
@ -133,7 +133,7 @@ nx lint <nest-app>
Test will execute Jest tests within the scope of the Nest app.
```shell script
```bash
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:
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
nx lint <nest-lib>
```
@ -176,7 +176,7 @@ nx lint <nest-lib>
Test will execute Jest tests within the scope of the Nest library.
```shell script
```bash
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.
```shell script
```bash
nx build <nest-lib>
```

View File

@ -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:
```shell script
```bash
yarn add @nrwl/next
```
```shell script
```bash
npm install @nrwl/next
```
@ -22,7 +22,7 @@ npm install @nrwl/next
Generating new applications can be done with the following:
```shell script
```bash
nx generate @nrwl/next:application <name>
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/node
```
```shell script
```bash
#npm
npm install -D @nrwl/node
```
@ -20,7 +20,7 @@ npm install -D @nrwl/node
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <node-app>
```
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
```
@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <node-app>
```
@ -102,7 +102,7 @@ nx lint <node-app>
Test will execute Jest tests within the scope of the Node app.
```shell script
```bash
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:
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
nx lint <node-lib>
```
@ -138,7 +138,7 @@ nx lint <node-lib>
Test will execute Jest tests within the scope of the Node library.
```shell script
```bash
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.
```shell script
```bash
nx build <node-lib>
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/react
```
```shell script
```bash
#npm
npm install -D @nrwl/react
```

View File

@ -14,7 +14,7 @@ make hello
With this `Makefile` in the root of the project:
```shell script
```bash
hello:
echo "Hello, world!"
```

View File

@ -109,7 +109,7 @@ This is all thats required from the `package.json` file:
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
```
@ -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:
```sh
```bash
nx run platform:echo
```
To which we'll see the console output:
```sh
```bash
> nx run platform:echo
Executing "echo"...
Options: {

View File

@ -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.
```sh
```bash
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.
```sh
```bash
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.
```sh
```bash
nx workspace-generator my-schematic mylib
```
The command is also aliased to the previous `workspace-schematic` command, so this still works:
```sh
```bash
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.
```sh
```bash
nx workspace-generator my-generator mylib
```
The following information will be displayed.
```sh
```bash
CREATE libs/mylib/README.md
CREATE libs/mylib/.babelrc
CREATE libs/mylib/src/index.ts

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/web
```
```shell script
```bash
#npm
npm install -D @nrwl/web
```

View File

@ -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.
```txt
```text
apps/
booking/
check-in/
@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
Lets 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/
booking/
data-access/ <---- app-specific library

View File

@ -164,7 +164,7 @@ ReactDOM.render(<App />, document.querySelector('happynrwl-root'));
and `app.tsx` contains the following component:
```typescript jsx
```typescript
import * as React 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`.
```typescript jsx
```typescript
import '@happynrwl/ui';
import * as React from 'react';
@ -363,7 +363,7 @@ declare namespace JSX {
Finally, we can update `app.tsx` to use our shared web component.
```typescript jsx
```typescript
import * as React from 'react';
import { Component } from 'react';

View File

@ -174,7 +174,7 @@ Your application code is self-contained within the `src` folder of your Angular
Verify your app runs correctly by running:
```sh
```bash
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:
```sh
```bash
ng test <app name>
```
@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
Verify your tests run correctly by running:
```sh
```bash
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:
```sh
```bash
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:
```sh
```bash
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:
```sh
```bash
npm run lint
```
OR
```sh
```bash
yarn lint
```

View File

@ -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:
```shell script
```bash
npm install -g nx
```
or
```shell script
```bash
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:
```shell script
```bash
nx run todos:serve [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:
```shell script
```bash
nx serve todos
```

View File

@ -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**
```shell script
```bash
$ 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.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:
```shell script
```bash
yarn add hbs
```
or
```shell script
```bash
npm install --save hbs
```

View File

@ -2,7 +2,7 @@
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
```typescript jsx
```typescript
import React from 'react';
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.
```typescript jsx
```typescript
import React from 'react';
import { ReactComponent as Logo } from './logo.svg';

View File

@ -121,7 +121,7 @@ Run:
You can import the shared-components library into the Next.js application like this.
```typescript jsx
```typescript
import { Home } from '@happynrwl/shared-components';
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:
```js
```typescript
// eslint-disable-next-line @typescript-eslint/no-var-requires
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:
```js
```typescript
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.
```js
```typescript
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');
@ -188,7 +188,7 @@ module.exports = withNx({
OR
```js
```typescript
module.exports = {
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...
@ -205,7 +205,7 @@ module.exports = {
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:
```sh
```bash
npx nx build tuskdesk --prod --outputPath=.
```

View File

@ -116,7 +116,7 @@ describe('shared-ui', () => {
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:
```
```typescript
module.exports = {
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.
```
```typescript
import { configure, addDecorator } from '@storybook/react';
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:
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
```
```typescript
module.exports = {
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.
```
```typescript
import { configure, addDecorator } from '@storybook/react';
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
```
```bash
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:
```
```bash
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:
```
```typescript
module.exports = {
stories: [],
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:
```
```typescript
const lib_main_module = require('../../.storybook/main');
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:
```
```typescript
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:
```
```typescript
import { addDecorator } from '<%= uiFramework %>';
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:
```
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
]
}
});
```typescript
config.resolve.extensions.push('.ts', '.tsx');
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
},
});
```
#### Check final folder structure
Your folder structure should now look like this:
```
```treeview
<workspace name>/
├── .storybook/
│ ├── main.js

View File

@ -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`:
```typescript jsx
```typescript
import React, { useState } from 'react';
interface Todo {
@ -48,7 +48,7 @@ export default App;
**Add the `add-todo` button with the corresponding click handler.**
```typescript jsx
```typescript
import React, { useState } from 'react';
interface Todo {

View File

@ -8,7 +8,7 @@ Real-world applications do not live in isolationthey need APIs to talk
**Let's change our application to fetch the data from the API.**
```typescript jsx
```typescript
import React, { useEffect, useState } from 'react';
interface Todo {

View File

@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
**Next import the interface in `apps/todos/src/app/app.tsx`:**
```typescript jsx
```typescript
import React, { useEffect, useState } from 'react';
import { Todo } from '@myorg/data';

View File

@ -50,7 +50,7 @@ myorg/
The `libs/ui/src/lib/ui.tsx` file looks like this:
```typescript jsx
```typescript
import React from 'react';
import './ui.css';
@ -111,7 +111,7 @@ myorg/
**Implement the Todos component.**
```typescript jsx
```typescript
import React from 'react';
import { Todo } from '@myorg/data';

View File

@ -16,7 +16,7 @@ git checkout -b testbranch
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
```typescript jsx
```typescript
import React from 'react';
import { Todo } from '@myorg/data';

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/angular
```
```shell script
```bash
#npm
npm install -D @nrwl/angular
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/express
```
```shell script
```bash
#npm
npm install -D @nrwl/express
```
@ -22,7 +22,7 @@ npm install -D @nrwl/express
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <express-app>
```
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
```
@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <express-app>
```
@ -123,6 +123,6 @@ nx lint <express-app>
Test will execute Jest tests within the scope of the Express app.
```shell script
```bash
nx test <express-app>
```

View File

@ -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:
```shell script
```bash
yarn add -D @nrwl/gatsby
```
```shell script
```bash
npm install -D @nrwl/gatsby
```
@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
Generating new applications can be done with the following:
```shell script
```bash
nx generate @nrwl/gatsby:application <name>
```

View File

@ -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.
```
```text
last 1 Chrome version
last 1 Firefox version
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:
```
```text
last 1 Chrome version
last 1 Firefox version
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.
```sh
```bash
$ npx browserslist
and_chr 61
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:
```sh
```bash
npx browserslist '> 0.5%, not IE 11'
```

View File

@ -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:
```shell script
```bash
yarn add -D @nrwl/nest
```
```shell script
```bash
npm install -D @nrwl/nest
```
@ -27,7 +27,7 @@ npm install -D @nrwl/nest
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <nest-app>
```
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
```
@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <nest-app>
```
@ -133,7 +133,7 @@ nx lint <nest-app>
Test will execute Jest tests within the scope of the Nest app.
```shell script
```bash
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:
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
nx lint <nest-lib>
```
@ -176,7 +176,7 @@ nx lint <nest-lib>
Test will execute Jest tests within the scope of the Nest library.
```shell script
```bash
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.
```shell script
```bash
nx build <nest-lib>
```

View File

@ -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:
```shell script
```bash
yarn add -D @nrwl/next
```
```shell script
```bash
npm install -D @nrwl/next
```
@ -22,7 +22,7 @@ npm install -D @nrwl/next
Generating new applications can be done with the following:
```shell script
```bash
nx generate @nrwl/next:application <name>
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/node
```
```shell script
```bash
#npm
npm install -D @nrwl/node
```
@ -20,7 +20,7 @@ npm install -D @nrwl/node
Generating new applications can be done with the following:
```shell script
```bash
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.
```shell script
```bash
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
```shell script
```bash
nx build <node-app>
```
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
```
@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
```shell script
```bash
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.
```shell script
```bash
nx lint <node-app>
```
@ -102,7 +102,7 @@ nx lint <node-app>
Test will execute Jest tests within the scope of the Node app.
```shell script
```bash
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:
```shell script
```bash
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.
```shell script
```bash
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.
```shell script
```bash
nx lint <node-lib>
```
@ -138,7 +138,7 @@ nx lint <node-lib>
Test will execute Jest tests within the scope of the Node library.
```shell script
```bash
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.
```shell script
```bash
nx build <node-lib>
```

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/react
```
```shell script
```bash
#npm
npm install -D @nrwl/react
```

View File

@ -14,7 +14,7 @@ make hello
With this `Makefile` in the root of the project:
```shell script
```bash
hello:
echo "Hello, world!"
```

View File

@ -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`):
```sh
```bash
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:
```sh
```bash
nx run platform:echo
```
To which we'll see the console output:
```sh
```bash
> ng run platform:echo
Executing "echo"...
Hello World

View File

@ -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.
```sh
```bash
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.
```sh
```bash
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.
```sh
```bash
nx workspace-generator my-schematic mylib
```
The command is also aliased to the previous `workspace-schematic` command, so this still works:
```sh
```bash
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.
```sh
```bash
nx workspace-generator my-schematic mylib
```
The following information will be displayed.
```sh
```bash
> NX Executing your local schematic: my-schematic
CREATE libs/mylib/tslint.json (48 bytes)

View File

@ -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:
```shell script
```bash
#yarn
yarn add -D @nrwl/web
```
```shell script
```bash
#npm
npm install -D @nrwl/web
```

View File

@ -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.
```txt
```text
apps/
booking/
check-in/
@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
Lets 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/
booking/
data-access/ <---- app-specific library