chore(web): update overview page (#8747)

docs/shared/web-plugin.md

@@ -6,65 +6,86 @@ The Nx Plugin for Web Components contains generators for managing Web Component
 - Scaffolding for creating buildable libraries that can be published to npm.
 - Utilities for automatic workspace refactoring.
 
-## Adding the Web plugin
+## Setting Up Web
 
-Adding the Web plugin to a workspace can be done with the following:
+To create a new workspace with web, run `npx create-nx-workspace@latest --preset=web`.
+
+To add the web plugin to an existing workspace, run one of the following:
 
 ```bash
+# For npm users
+npm install -D @nrwl/web
+
+# For yarn users
 yarn add -D @nrwl/web
 ```
 
+### Creating Applications
+
+You can add a new application with the following:
+
 ```bash
-npm install -D @nrwl/web
+nx g @nrwl/web:app my-new-app
 ```
 
-> Note: You can create a new workspace that has Web Components set up by doing `npx create-nx-workspace@latest --preset=web-components`
+The application uses no framework and generates with web components. You can add any framework you want on top of the default setup.
 
-The file structure for a Web Components application looks like:
+**Note:** If you are looking to start a React application, check out the [React plugin](/react/overview).
 
-```treeview
+### Creating Libraries
-myorg/
+
-├── apps/
+To create a generic TypeScript library (i.e. non-framework specific), use the [`@nrwl/js`](/js/overview) plugin.
-│   ├── todos/
+
-│   │   ├── src/
+```bash
-│   │   │   ├── app/
+nx g @nrwl/js:lib my-new-lib
-│   │   │   ├── assets/
-│   │   │   ├── environments/
-│   │   │   ├── favicon.ico
-│   │   │   ├── index.html
-│   │   │   ├── main.ts
-│   │   │   ├── polyfills.ts
-│   │   │   └── styles.css
-│   │   ├── browserslist
-│   │   ├── jest.config.js
-│   │   ├── tsconfig.app.json
-│   │   ├── tsconfig.json
-│   │   └── tsconfig.spec.json
-│   └── todos-e2e/
-│       ├── src/
-│       │   ├── fixtures/
-│       │   │   └── example.json
-│       │   ├── integration/
-│       │   │   └── app.spec.ts
-│       │   ├── plugins/
-│       │   │   └── index.ts
-│       │   └── support/
-│       │       ├── app.po.ts
-│       │       ├── commands.ts
-│       │       └── index.ts
-│       ├── cypress.json
-│       ├── tsconfig.e2e.json
-│       └── tsconfig.json
-├── libs/
-├── tools/
-├── README.md
-├── workspace.json
-├── nx.json
-├── package.json
-└── tsconfig.base.json
 ```
 
-## See Also
+## Using Web
+
+### Testing Projects
+
+You can run unit tests with:
+
+```bash
+nx test my-new-app
+nx test my-new-lib
+```
+
+Replace `my-new-app` with the name or your project. This command works for both applications and libraries.
+
+You can also run E2E tests for applications:
+
+```bash
+nx e2e my-new-app-e2e
+```
+
+Replace `my-new-app-e2e` with the name or your project with `-e2e` appended.
+
+### Building Projects
+
+React applications can be build with:
+
+```bash
+nx build my-new-app
+```
+
+And if you generated a library with `--buildable`, then you can build a library as well:
+
+```bash
+nx build my-new-lib
+```
+
+The output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the project's `project.json` file.
+
+The application in `dist` is deployable, and you can try it out locally with:
+
+```bash
+npx http-server dist/apps/my-new-app
+```
+
+The library in `dist` is publishable to npm or a private registry.
+
+## More Documentation
 
 - [Using Cypress](/cypress/overview)
 - [Using Jest](/cypress/overview)

nx-dev/nx-dev/public/documentation/shared/web-plugin.md

@@ -6,65 +6,86 @@ The Nx Plugin for Web Components contains generators for managing Web Component
 - Scaffolding for creating buildable libraries that can be published to npm.
 - Utilities for automatic workspace refactoring.
 
-## Adding the Web plugin
+## Setting Up Web
 
-Adding the Web plugin to a workspace can be done with the following:
+To create a new workspace with web, run `npx create-nx-workspace@latest --preset=web`.
+
+To add the web plugin to an existing workspace, run one of the following:
 
 ```bash
+# For npm users
+npm install -D @nrwl/web
+
+# For yarn users
 yarn add -D @nrwl/web
 ```
 
+### Creating Applications
+
+You can add a new application with the following:
+
 ```bash
-npm install -D @nrwl/web
+nx g @nrwl/web:app my-new-app
 ```
 
-> Note: You can create a new workspace that has Web Components set up by doing `npx create-nx-workspace@latest --preset=web-components`
+The application uses no framework and generates with web components. You can add any framework you want on top of the default setup.
 
-The file structure for a Web Components application looks like:
+**Note:** If you are looking to start a React application, check out the [React plugin](/react/overview).
 
-```treeview
+### Creating Libraries
-myorg/
+
-├── apps/
+To create a generic TypeScript library (i.e. non-framework specific), use the [`@nrwl/js`](/js/overview) plugin.
-│   ├── todos/
+
-│   │   ├── src/
+```bash
-│   │   │   ├── app/
+nx g @nrwl/js:lib my-new-lib
-│   │   │   ├── assets/
-│   │   │   ├── environments/
-│   │   │   ├── favicon.ico
-│   │   │   ├── index.html
-│   │   │   ├── main.ts
-│   │   │   ├── polyfills.ts
-│   │   │   └── styles.css
-│   │   ├── browserslist
-│   │   ├── jest.config.js
-│   │   ├── tsconfig.app.json
-│   │   ├── tsconfig.json
-│   │   └── tsconfig.spec.json
-│   └── todos-e2e/
-│       ├── src/
-│       │   ├── fixtures/
-│       │   │   └── example.json
-│       │   ├── integration/
-│       │   │   └── app.spec.ts
-│       │   ├── plugins/
-│       │   │   └── index.ts
-│       │   └── support/
-│       │       ├── app.po.ts
-│       │       ├── commands.ts
-│       │       └── index.ts
-│       ├── cypress.json
-│       ├── tsconfig.e2e.json
-│       └── tsconfig.json
-├── libs/
-├── tools/
-├── README.md
-├── workspace.json
-├── nx.json
-├── package.json
-└── tsconfig.base.json
 ```
 
-## See Also
+## Using Web
+
+### Testing Projects
+
+You can run unit tests with:
+
+```bash
+nx test my-new-app
+nx test my-new-lib
+```
+
+Replace `my-new-app` with the name or your project. This command works for both applications and libraries.
+
+You can also run E2E tests for applications:
+
+```bash
+nx e2e my-new-app-e2e
+```
+
+Replace `my-new-app-e2e` with the name or your project with `-e2e` appended.
+
+### Building Projects
+
+React applications can be build with:
+
+```bash
+nx build my-new-app
+```
+
+And if you generated a library with `--buildable`, then you can build a library as well:
+
+```bash
+nx build my-new-lib
+```
+
+The output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the project's `project.json` file.
+
+The application in `dist` is deployable, and you can try it out locally with:
+
+```bash
+npx http-server dist/apps/my-new-app
+```
+
+The library in `dist` is publishable to npm or a private registry.
+
+## More Documentation
 
 - [Using Cypress](/cypress/overview)
 - [Using Jest](/cypress/overview)