From 03e3f60338c628d98128d30ab8bf36e7a55dc20a Mon Sep 17 00:00:00 2001 From: Benjamin Cabanes Date: Thu, 17 Jun 2021 13:55:49 -0400 Subject: [PATCH] docs(core): documentation format fix (#6058) --- docs/angular/examples/react-and-angular.md | 6 +-- docs/angular/guides/storybook-plugin.md | 48 +++++++++---------- docs/angular/migration/migration-angular.md | 18 +++---- docs/node/tutorial/01-create-application.md | 8 ++-- docs/node/tutorial/02-display-todos.md | 6 +-- docs/react/guides/adding-assets.md | 4 +- docs/react/guides/nextjs.md | 4 +- docs/react/guides/storybook-plugin.md | 46 +++++++++--------- docs/react/tutorial/03-display-todos.md | 4 +- docs/react/tutorial/04-connect-to-api.md | 2 +- docs/react/tutorial/07-share-code.md | 2 +- docs/react/tutorial/08-create-libs.md | 4 +- .../tutorial/11-test-affected-projects.md | 2 +- docs/shared/angular-plugin.md | 4 +- docs/shared/express-plugin.md | 18 +++---- docs/shared/gatsby-plugin.md | 6 +-- docs/shared/guides/browser-support.md | 8 ++-- docs/shared/nest-plugin.md | 30 ++++++------ docs/shared/next-plugin.md | 6 +-- docs/shared/node-plugin.md | 28 +++++------ docs/shared/react-plugin.md | 4 +- docs/shared/running-custom-commands.md | 2 +- docs/shared/tools-workspace-builders.md | 6 +-- docs/shared/tools-workspace-generators.md | 12 ++--- docs/shared/web-plugin.md | 4 +- docs/shared/workspace/grouping-libraries.md | 4 +- .../feature-doc-viewer/src/lib/code-block.tsx | 2 +- .../angular/examples/react-and-angular.md | 6 +-- .../angular/migration/migration-angular.md | 14 +++--- .../node/tutorial/01-create-application.md | 8 ++-- .../latest/node/tutorial/02-display-todos.md | 6 +-- .../latest/react/guides/adding-assets.md | 4 +- .../latest/react/guides/nextjs.md | 4 +- .../latest/react/tutorial/03-display-todos.md | 4 +- .../react/tutorial/04-connect-to-api.md | 2 +- .../latest/react/tutorial/07-share-code.md | 2 +- .../latest/react/tutorial/08-create-libs.md | 4 +- .../tutorial/11-test-affected-projects.md | 2 +- .../latest/shared/angular-plugin.md | 4 +- .../latest/shared/express-plugin.md | 18 +++---- .../latest/shared/gatsby-plugin.md | 6 +-- .../latest/shared/guides/browser-support.md | 4 +- .../latest/shared/nest-plugin.md | 30 ++++++------ .../latest/shared/next-plugin.md | 6 +-- .../latest/shared/node-plugin.md | 28 +++++------ .../latest/shared/react-plugin.md | 4 +- .../latest/shared/running-custom-commands.md | 2 +- .../latest/shared/tools-workspace-builders.md | 6 +-- .../shared/tools-workspace-generators.md | 12 ++--- .../documentation/latest/shared/web-plugin.md | 4 +- .../shared/workspace/grouping-libraries.md | 4 +- .../angular/examples/react-and-angular.md | 6 +-- .../angular/migration/migration-angular.md | 14 +++--- .../node/tutorial/01-create-application.md | 8 ++-- .../node/tutorial/02-display-todos.md | 6 +-- .../previous/react/guides/adding-assets.md | 4 +- .../previous/react/guides/nextjs.md | 12 ++--- .../previous/react/guides/storybook-plugin.md | 48 +++++++++---------- .../react/tutorial/03-display-todos.md | 4 +- .../react/tutorial/04-connect-to-api.md | 2 +- .../previous/react/tutorial/07-share-code.md | 2 +- .../previous/react/tutorial/08-create-libs.md | 4 +- .../tutorial/11-test-affected-projects.md | 2 +- .../previous/shared/angular-plugin.md | 4 +- .../previous/shared/express-plugin.md | 18 +++---- .../previous/shared/gatsby-plugin.md | 6 +-- .../previous/shared/guides/browser-support.md | 8 ++-- .../previous/shared/nest-plugin.md | 30 ++++++------ .../previous/shared/next-plugin.md | 6 +-- .../previous/shared/node-plugin.md | 28 +++++------ .../previous/shared/react-plugin.md | 4 +- .../shared/running-custom-commands.md | 2 +- .../shared/tools-workspace-builders.md | 6 +-- .../shared/tools-workspace-generators.md | 12 ++--- .../previous/shared/web-plugin.md | 4 +- .../shared/workspace/grouping-libraries.md | 4 +- 76 files changed, 358 insertions(+), 358 deletions(-) diff --git a/docs/angular/examples/react-and-angular.md b/docs/angular/examples/react-and-angular.md index 4cf36f54e0..faf90a707d 100644 --- a/docs/angular/examples/react-and-angular.md +++ b/docs/angular/examples/react-and-angular.md @@ -165,7 +165,7 @@ ReactDOM.render(, 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'; diff --git a/docs/angular/guides/storybook-plugin.md b/docs/angular/guides/storybook-plugin.md index 007858137a..f6ad66cd2e 100644 --- a/docs/angular/guides/storybook-plugin.md +++ b/docs/angular/guides/storybook-plugin.md @@ -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 `/.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(''); ``` @@ -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 / ├── .storybook/ │ ├── main.js diff --git a/docs/angular/migration/migration-angular.md b/docs/angular/migration/migration-angular.md index bfa581ae60..158a8a3064 100644 --- a/docs/angular/migration/migration-angular.md +++ b/docs/angular/migration/migration-angular.md @@ -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 ``` @@ -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 ``` @@ -258,7 +258,7 @@ If you are using `Karma` for unit testing: Verify your tests run correctly by running: -```sh +```bash ng test ``` @@ -266,7 +266,7 @@ ng test Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/-e2e` folder and verify your tests still run correctly by running: -```sh +```bash ng e2e -e2e ``` @@ -350,7 +350,7 @@ Update the `apps//tsconfig.json` to extend the root `tsconfig.json`: Verify your E2E tests run correctly by running: -```sh +```bash ng e2e -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 ``` diff --git a/docs/node/tutorial/01-create-application.md b/docs/node/tutorial/01-create-application.md index 19569d1a6a..a978439707 100644 --- a/docs/node/tutorial/01-create-application.md +++ b/docs/node/tutorial/01-create-application.md @@ -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 ``` diff --git a/docs/node/tutorial/02-display-todos.md b/docs/node/tutorial/02-display-todos.md index b816a4ae2f..bc300e4210 100644 --- a/docs/node/tutorial/02-display-todos.md +++ b/docs/node/tutorial/02-display-todos.md @@ -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 ``` diff --git a/docs/react/guides/adding-assets.md b/docs/react/guides/adding-assets.md index a4e9ffb837..6a646e3143 100644 --- a/docs/react/guides/adding-assets.md +++ b/docs/react/guides/adding-assets.md @@ -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'; diff --git a/docs/react/guides/nextjs.md b/docs/react/guides/nextjs.md index c45d26e6e8..7fda73c47f 100644 --- a/docs/react/guides/nextjs.md +++ b/docs/react/guides/nextjs.md @@ -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=. ``` diff --git a/docs/react/guides/storybook-plugin.md b/docs/react/guides/storybook-plugin.md index a6550f3b29..b869de93bc 100644 --- a/docs/react/guides/storybook-plugin.md +++ b/docs/react/guides/storybook-plugin.md @@ -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 `/.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(''); ``` @@ -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 / ├── .storybook/ │ ├── main.js diff --git a/docs/react/tutorial/03-display-todos.md b/docs/react/tutorial/03-display-todos.md index aa7cba7d3a..4300d57d77 100644 --- a/docs/react/tutorial/03-display-todos.md +++ b/docs/react/tutorial/03-display-todos.md @@ -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 { diff --git a/docs/react/tutorial/04-connect-to-api.md b/docs/react/tutorial/04-connect-to-api.md index afecd0031e..474c350d8d 100644 --- a/docs/react/tutorial/04-connect-to-api.md +++ b/docs/react/tutorial/04-connect-to-api.md @@ -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.** -```typescript jsx +```typescript import React, { useEffect, useState } from 'react'; interface Todo { diff --git a/docs/react/tutorial/07-share-code.md b/docs/react/tutorial/07-share-code.md index c5ae58083c..d67c531f86 100644 --- a/docs/react/tutorial/07-share-code.md +++ b/docs/react/tutorial/07-share-code.md @@ -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'; diff --git a/docs/react/tutorial/08-create-libs.md b/docs/react/tutorial/08-create-libs.md index 1220d6be93..252a0220d6 100644 --- a/docs/react/tutorial/08-create-libs.md +++ b/docs/react/tutorial/08-create-libs.md @@ -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'; diff --git a/docs/react/tutorial/11-test-affected-projects.md b/docs/react/tutorial/11-test-affected-projects.md index 672bf7257e..5b96ad66c5 100644 --- a/docs/react/tutorial/11-test-affected-projects.md +++ b/docs/react/tutorial/11-test-affected-projects.md @@ -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'; diff --git a/docs/shared/angular-plugin.md b/docs/shared/angular-plugin.md index 766d7d41ee..c701fe6a36 100644 --- a/docs/shared/angular-plugin.md +++ b/docs/shared/angular-plugin.md @@ -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 ``` diff --git a/docs/shared/express-plugin.md b/docs/shared/express-plugin.md index 088bbd85d0..e46c779e79 100644 --- a/docs/shared/express-plugin.md +++ b/docs/shared/express-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -123,6 +123,6 @@ nx lint Test will execute Jest tests within the scope of the Express app. -```shell script +```bash nx test ``` diff --git a/docs/shared/gatsby-plugin.md b/docs/shared/gatsby-plugin.md index c544763b98..73a1f58baf 100644 --- a/docs/shared/gatsby-plugin.md +++ b/docs/shared/gatsby-plugin.md @@ -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 ``` diff --git a/docs/shared/guides/browser-support.md b/docs/shared/guides/browser-support.md index 2a94350a4b..8212f635f4 100644 --- a/docs/shared/guides/browser-support.md +++ b/docs/shared/guides/browser-support.md @@ -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' ``` diff --git a/docs/shared/nest-plugin.md b/docs/shared/nest-plugin.md index 715c1675c3..68b5a002b9 100644 --- a/docs/shared/nest-plugin.md +++ b/docs/shared/nest-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -133,7 +133,7 @@ nx lint Test will execute Jest tests within the scope of the Nest app. -```shell script +```bash nx test ``` @@ -141,13 +141,13 @@ nx test 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 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 [--controller] [--service] [--global] ``` @@ -156,7 +156,7 @@ nx generate @nrwl/nest:library [--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 --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 ``` @@ -176,7 +176,7 @@ nx lint Test will execute Jest tests within the scope of the Nest library. -```shell script +```bash nx test ``` @@ -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 ``` diff --git a/docs/shared/next-plugin.md b/docs/shared/next-plugin.md index 6ca311515d..39121d9fcc 100644 --- a/docs/shared/next-plugin.md +++ b/docs/shared/next-plugin.md @@ -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 ``` diff --git a/docs/shared/node-plugin.md b/docs/shared/node-plugin.md index 216e2a0c64..814ca23eee 100644 --- a/docs/shared/node-plugin.md +++ b/docs/shared/node-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -102,7 +102,7 @@ nx lint Test will execute Jest tests within the scope of the Node app. -```shell script +```bash nx test ``` @@ -110,7 +110,7 @@ nx test 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 ``` @@ -118,7 +118,7 @@ nx generate @nrwl/node:library 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 --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 ``` @@ -138,7 +138,7 @@ nx lint Test will execute Jest tests within the scope of the Node library. -```shell script +```bash nx test ``` @@ -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 ``` diff --git a/docs/shared/react-plugin.md b/docs/shared/react-plugin.md index 406b3aed5e..729543c46d 100644 --- a/docs/shared/react-plugin.md +++ b/docs/shared/react-plugin.md @@ -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 ``` diff --git a/docs/shared/running-custom-commands.md b/docs/shared/running-custom-commands.md index 714823828e..399160ef8b 100644 --- a/docs/shared/running-custom-commands.md +++ b/docs/shared/running-custom-commands.md @@ -14,7 +14,7 @@ make hello With this `Makefile` in the root of the project: -```shell script +```bash hello: echo "Hello, world!" ``` diff --git a/docs/shared/tools-workspace-builders.md b/docs/shared/tools-workspace-builders.md index 5fb43c78a0..a73a2f2f4a 100644 --- a/docs/shared/tools-workspace-builders.md +++ b/docs/shared/tools-workspace-builders.md @@ -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): -```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: { diff --git a/docs/shared/tools-workspace-generators.md b/docs/shared/tools-workspace-generators.md index 468ed66823..c0e5ee1ecd 100644 --- a/docs/shared/tools-workspace-generators.md +++ b/docs/shared/tools-workspace-generators.md @@ -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 diff --git a/docs/shared/web-plugin.md b/docs/shared/web-plugin.md index eb156aae82..cd98b89f57 100644 --- a/docs/shared/web-plugin.md +++ b/docs/shared/web-plugin.md @@ -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 ``` diff --git a/docs/shared/workspace/grouping-libraries.md b/docs/shared/workspace/grouping-libraries.md index 6a370828a8..2ece9f294c 100644 --- a/docs/shared/workspace/grouping-libraries.md +++ b/docs/shared/workspace/grouping-libraries.md @@ -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 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/ booking/ data-access/ <---- app-specific library diff --git a/nx-dev/feature-doc-viewer/src/lib/code-block.tsx b/nx-dev/feature-doc-viewer/src/lib/code-block.tsx index e9fd0bd92b..a77e950339 100644 --- a/nx-dev/feature-doc-viewer/src/lib/code-block.tsx +++ b/nx-dev/feature-doc-viewer/src/lib/code-block.tsx @@ -53,7 +53,7 @@ export function CodeBlock({ , 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'; diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/migration/migration-angular.md b/nx-dev/nx-dev/public/documentation/latest/angular/migration/migration-angular.md index bfa581ae60..cb5d9b9ecf 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/migration/migration-angular.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/migration/migration-angular.md @@ -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 ``` @@ -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 ``` @@ -258,7 +258,7 @@ If you are using `Karma` for unit testing: Verify your tests run correctly by running: -```sh +```bash ng test ``` @@ -266,7 +266,7 @@ ng test Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/-e2e` folder and verify your tests still run correctly by running: -```sh +```bash ng e2e -e2e ``` @@ -350,7 +350,7 @@ Update the `apps//tsconfig.json` to extend the root `tsconfig.json`: Verify your E2E tests run correctly by running: -```sh +```bash ng e2e -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md index 19569d1a6a..a978439707 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md index b816a4ae2f..bc300e4210 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/react/guides/adding-assets.md b/nx-dev/nx-dev/public/documentation/latest/react/guides/adding-assets.md index a4e9ffb837..6a646e3143 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/guides/adding-assets.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/guides/adding-assets.md @@ -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'; diff --git a/nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md b/nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md index c45d26e6e8..7fda73c47f 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md @@ -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=. ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md index aa7cba7d3a..4300d57d77 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md @@ -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 { diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md index afecd0031e..474c350d8d 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md @@ -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.** -```typescript jsx +```typescript import React, { useEffect, useState } from 'react'; interface Todo { diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md index c5ae58083c..d67c531f86 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md @@ -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'; diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md index 1220d6be93..252a0220d6 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md @@ -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'; diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md index 672bf7257e..5b96ad66c5 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md @@ -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'; diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/angular-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/angular-plugin.md index 766d7d41ee..c701fe6a36 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/angular-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/angular-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/express-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/express-plugin.md index 088bbd85d0..e46c779e79 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/express-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/express-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -123,6 +123,6 @@ nx lint Test will execute Jest tests within the scope of the Express app. -```shell script +```bash nx test ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/gatsby-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/gatsby-plugin.md index c544763b98..73a1f58baf 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/gatsby-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/gatsby-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/guides/browser-support.md b/nx-dev/nx-dev/public/documentation/latest/shared/guides/browser-support.md index 2a94350a4b..dd735e4e50 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/guides/browser-support.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/guides/browser-support.md @@ -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' ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/nest-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/nest-plugin.md index 715c1675c3..68b5a002b9 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/nest-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/nest-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -133,7 +133,7 @@ nx lint Test will execute Jest tests within the scope of the Nest app. -```shell script +```bash nx test ``` @@ -141,13 +141,13 @@ nx test 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 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 [--controller] [--service] [--global] ``` @@ -156,7 +156,7 @@ nx generate @nrwl/nest:library [--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 --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 ``` @@ -176,7 +176,7 @@ nx lint Test will execute Jest tests within the scope of the Nest library. -```shell script +```bash nx test ``` @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/next-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/next-plugin.md index 6ca311515d..39121d9fcc 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/next-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/next-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/node-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/node-plugin.md index 216e2a0c64..814ca23eee 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/node-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/node-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -102,7 +102,7 @@ nx lint Test will execute Jest tests within the scope of the Node app. -```shell script +```bash nx test ``` @@ -110,7 +110,7 @@ nx test 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 ``` @@ -118,7 +118,7 @@ nx generate @nrwl/node:library 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 --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 ``` @@ -138,7 +138,7 @@ nx lint Test will execute Jest tests within the scope of the Node library. -```shell script +```bash nx test ``` @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/react-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/react-plugin.md index 406b3aed5e..729543c46d 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/react-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/react-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/running-custom-commands.md b/nx-dev/nx-dev/public/documentation/latest/shared/running-custom-commands.md index 714823828e..399160ef8b 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/running-custom-commands.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/running-custom-commands.md @@ -14,7 +14,7 @@ make hello With this `Makefile` in the root of the project: -```shell script +```bash hello: echo "Hello, world!" ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-builders.md b/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-builders.md index 5fb43c78a0..a73a2f2f4a 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-builders.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-builders.md @@ -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): -```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: { diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-generators.md b/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-generators.md index 468ed66823..c0e5ee1ecd 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-generators.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-generators.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/web-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/web-plugin.md index eb156aae82..cd98b89f57 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/web-plugin.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/web-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/workspace/grouping-libraries.md b/nx-dev/nx-dev/public/documentation/latest/shared/workspace/grouping-libraries.md index 6a370828a8..2ece9f294c 100644 --- a/nx-dev/nx-dev/public/documentation/latest/shared/workspace/grouping-libraries.md +++ b/nx-dev/nx-dev/public/documentation/latest/shared/workspace/grouping-libraries.md @@ -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 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/ booking/ data-access/ <---- app-specific library diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/examples/react-and-angular.md b/nx-dev/nx-dev/public/documentation/previous/angular/examples/react-and-angular.md index 9b3cb2d59b..e1c0c4c3d3 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/examples/react-and-angular.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/examples/react-and-angular.md @@ -164,7 +164,7 @@ ReactDOM.render(, 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'; diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/migration/migration-angular.md b/nx-dev/nx-dev/public/documentation/previous/angular/migration/migration-angular.md index 123a3a4b39..1ffa8ff6af 100644 --- a/nx-dev/nx-dev/public/documentation/previous/angular/migration/migration-angular.md +++ b/nx-dev/nx-dev/public/documentation/previous/angular/migration/migration-angular.md @@ -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 ``` @@ -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 ``` @@ -258,7 +258,7 @@ If you are using `Karma` for unit testing: Verify your tests run correctly by running: -```sh +```bash ng test ``` @@ -266,7 +266,7 @@ ng test Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/-e2e` folder and verify your tests still run correctly by running: -```sh +```bash ng e2e -e2e ``` @@ -350,7 +350,7 @@ Update the `apps//tsconfig.json` to extend the root `tsconfig.json`: Verify your E2E tests run correctly by running: -```sh +```bash ng e2e -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md index a4df61abb8..2f0ff610bb 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md index 90d51f190b..cbbe6c2228 100644 --- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/react/guides/adding-assets.md b/nx-dev/nx-dev/public/documentation/previous/react/guides/adding-assets.md index a4e9ffb837..6a646e3143 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/guides/adding-assets.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/guides/adding-assets.md @@ -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'; diff --git a/nx-dev/nx-dev/public/documentation/previous/react/guides/nextjs.md b/nx-dev/nx-dev/public/documentation/previous/react/guides/nextjs.md index b7c2192368..1665f47fe9 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/guides/nextjs.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/guides/nextjs.md @@ -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=. ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/react/guides/storybook-plugin.md b/nx-dev/nx-dev/public/documentation/previous/react/guides/storybook-plugin.md index a6550f3b29..c8962eca17 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/guides/storybook-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/guides/storybook-plugin.md @@ -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 `/.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(''); ``` @@ -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 / ├── .storybook/ │ ├── main.js diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md index 02e0c5d8c5..59f0e1248c 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md @@ -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 { diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md index f6ac37073f..b3a13e23ed 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md @@ -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.** -```typescript jsx +```typescript import React, { useEffect, useState } from 'react'; interface Todo { diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md index 5becf34e75..6530a59e57 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md @@ -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'; diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md index 3ef25b37f5..c090db4bd6 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md @@ -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'; diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md index 726463b696..b1f80a60db 100644 --- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md +++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md @@ -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'; diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/angular-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/angular-plugin.md index e7f704b8e4..b0b9ed2720 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/angular-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/angular-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/express-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/express-plugin.md index 088bbd85d0..e46c779e79 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/express-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/express-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -123,6 +123,6 @@ nx lint Test will execute Jest tests within the scope of the Express app. -```shell script +```bash nx test ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/gatsby-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/gatsby-plugin.md index 02627f0d3f..211fc7a642 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/gatsby-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/gatsby-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/guides/browser-support.md b/nx-dev/nx-dev/public/documentation/previous/shared/guides/browser-support.md index 2a94350a4b..8212f635f4 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/guides/browser-support.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/guides/browser-support.md @@ -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' ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/nest-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/nest-plugin.md index 715c1675c3..68b5a002b9 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/nest-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/nest-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -133,7 +133,7 @@ nx lint Test will execute Jest tests within the scope of the Nest app. -```shell script +```bash nx test ``` @@ -141,13 +141,13 @@ nx test 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 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 [--controller] [--service] [--global] ``` @@ -156,7 +156,7 @@ nx generate @nrwl/nest:library [--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 --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 ``` @@ -176,7 +176,7 @@ nx lint Test will execute Jest tests within the scope of the Nest library. -```shell script +```bash nx test ``` @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/next-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/next-plugin.md index 0285b3e49b..ad4a102bca 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/next-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/next-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/node-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/node-plugin.md index 216e2a0c64..814ca23eee 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/node-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/node-plugin.md @@ -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 ``` @@ -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 --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 ``` 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 --configuration=production ``` @@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co #### serve -```shell script +```bash nx serve ``` @@ -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 ``` @@ -102,7 +102,7 @@ nx lint Test will execute Jest tests within the scope of the Node app. -```shell script +```bash nx test ``` @@ -110,7 +110,7 @@ nx test 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 ``` @@ -118,7 +118,7 @@ nx generate @nrwl/node:library 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 --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 ``` @@ -138,7 +138,7 @@ nx lint Test will execute Jest tests within the scope of the Node library. -```shell script +```bash nx test ``` @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/react-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/react-plugin.md index eddc941e53..bfaa1dccfc 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/react-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/react-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/running-custom-commands.md b/nx-dev/nx-dev/public/documentation/previous/shared/running-custom-commands.md index 714823828e..399160ef8b 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/running-custom-commands.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/running-custom-commands.md @@ -14,7 +14,7 @@ make hello With this `Makefile` in the root of the project: -```shell script +```bash hello: echo "Hello, world!" ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-builders.md b/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-builders.md index 440f76e1a0..6940d99461 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-builders.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-builders.md @@ -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 diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-generators.md b/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-generators.md index 86a50da058..b536610f7c 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-generators.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-generators.md @@ -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) diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/web-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/web-plugin.md index 4d512f80dd..71c2403265 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/web-plugin.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/web-plugin.md @@ -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 ``` diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/workspace/grouping-libraries.md b/nx-dev/nx-dev/public/documentation/previous/shared/workspace/grouping-libraries.md index 6a370828a8..2ece9f294c 100644 --- a/nx-dev/nx-dev/public/documentation/previous/shared/workspace/grouping-libraries.md +++ b/nx-dev/nx-dev/public/documentation/previous/shared/workspace/grouping-libraries.md @@ -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 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/ booking/ data-access/ <---- app-specific library