chore(web): update overview page (#8747)
This commit is contained in:
Jack Hsu
GitHub
parent
1a93d55e1d
commit
95d11f5c16
@ -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
|
||||
myorg/
|
||||
├── apps/
|
||||
│ ├── todos/
|
||||
│ │ ├── src/
|
||||
│ │ │ ├── app/
|
||||
│ │ │ ├── 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
|
||||
### Creating Libraries
|
||||
|
||||
To create a generic TypeScript library (i.e. non-framework specific), use the [`@nrwl/js`](/js/overview) plugin.
|
||||
|
||||
```bash
|
||||
nx g @nrwl/js:lib my-new-lib
|
||||
```
|
||||
|
||||
## 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)
|
||||
|
||||
@ -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
|
||||
myorg/
|
||||
├── apps/
|
||||
│ ├── todos/
|
||||
│ │ ├── src/
|
||||
│ │ │ ├── app/
|
||||
│ │ │ ├── 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
|
||||
### Creating Libraries
|
||||
|
||||
To create a generic TypeScript library (i.e. non-framework specific), use the [`@nrwl/js`](/js/overview) plugin.
|
||||
|
||||
```bash
|
||||
nx g @nrwl/js:lib my-new-lib
|
||||
```
|
||||
|
||||
## 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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user