The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides:


- Integration with libraries such as Jest, Cypress, and Storybook.

- Scaffolding for creating buildable libraries that can be published to npm.

- Utilities for automatic workspace refactoring.

The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides:

- Integration with libraries such as Jest, Cypress, and Storybook.
- Scaffolding for creating buildable libraries that can be published to npm.
- Utilities for automatic workspace refactoring.

## Setting Up Web

To create a new workspace with web, run `npx create-nx-workspace@latest --preset=web-components`.

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
nx g @nrwl/web:app my-new-app
```

The application uses no framework and generates with web components. You can add any framework you want on top of the default setup.

To start the application in development mode, run `nx serve my-new-app`.

{% callout type="note" title="React" %}
If you are looking to add a React application, check out the [React plugin](/packages/react).
{% /callout %}

### Creating Libraries

To create a generic TypeScript library (i.e. non-framework specific), use the [`@nrwl/js`](/packages/js) plugin.

```bash
nx g @nrwl/js:lib my-new-lib

# If you want the library to be buildable or publishable to npm
nx g @nrwl/web:lib my-new-lib --buildable
nx g @nrwl/web:lib my-new-lib \
--publishable \
--importPath=@myorg/my-new-lib
```

## 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](/packages/cypress)
- [Using Jest](/packages/jest)


Overview

webpack

The threshold for error relative to the baseline (min & max).

The maximum threshold for error relative to the baseline.

The maximum threshold for warning relative to the baseline.

The minimum threshold for error relative to the baseline.

The minimum threshold for warning relative to the baseline.

The threshold for warning relative to the baseline (min & max).

Base url for the application being built.

Budget thresholds to ensure parts of your application stay within boundaries which you set.

Read buildable libraries from source instead of building them separately.

Use a separate bundle containing code used across multiple bundles.

The `crossorigin` attribute to use for generated javascript script tags.  One of 'none' | 'anonymous' | 'use-credentials'.

URL where the application will be deployed.

Conditional polyfills loaded in browsers which do not support `ES2015`.

Extract all licenses in a separate file, in the case of production builds only.

Replace files with other files in the build.

Generates `index.html` file to the output path. This can be turned off if using a webpack plugin to generate HTML such as `html-webpack-plugin`.

HTML File which will be contain the application.

Number of workers to use for type checking.

Memory limit for type checking service process in `MB`.

Names the produced bundles according to their entry file.

Enables optimization of the build output.

Define the output filename cache-busting hashing mode.

Set a path to PostCSS config that applies to the app and all libs. Defaults to `undefined`, which auto-detects postcss.config.js files in each `app`/`lib` directory.

Log progress to the console while building.

Use a separate bundle containing the runtime.

External Scripts which will be included before the main application entry.

Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.

Generates a 'stats.json' file which can be analyzed using tools such as: 'webpack-bundle-analyzer' or `<https://webpack.github.io/analyse>`.

Paths to include. Paths will be resolved to project root.

Enables the use of subresource integrity validation.

The name of the Typescript configuration file.

Use a separate bundle containing only vendor libraries.

Path to a function which takes a webpack config, some context and returns the resulting webpack config. See https://nx.dev/guides/customize-webpack

Webpack Executor

rollup

Packages a library for different web usages (`UMD`, `ESM`, `CJS`).

When `updateBuildableProjectDepsInPackageJson` is `true`, this adds dependencies to either `peerDependencies` or `dependencies`.

The path to the entry file, relative to project.

A list of external modules that will not be bundled (`react`, `react-dom`, etc.).

CSS files will be extracted to the output folder. Alternatively custom filename can be provided (e.g. styles.css)

Only build the specified comma-separated formats (`esm,umd,cjs`)

Generate package.json with 'exports' field. This field defines entry points in the package and is used by Node and the TypeScript compiler.

A mapping of node modules to their `UMD` global names. Used by the `UMD` bundle.

Sets `javascriptEnabled` option for less loader

Path to a function which takes a rollup config and returns an updated rollup config.

Prevents 'type' field from being added to compiled package.json file. Only use this if you are having an issue with this field.

The name of your module in `UMD` format. Defaulted to your project name.

Update buildable project dependencies in `package.json`.

Web Library Rollup Target (Experimental)

dev-server

This option allows you to whitelist services that are allowed to access the dev server.

Whether to reload the page on change, using live-reload.

Public URL where the application will be served.

SSL certificate to use for serving `HTTPS`.

Watches for changes and rebuilds application.

Web Dev Server

file-server

Options for the proxy used by `http-server`.

Redirect 404 errors to index.html (useful for SPA's)

File Server

init

Init Web Plugin

application

Create a web application using `swc` or `babel` as compiler.

Test runner to use for end to end (e2e) tests

Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.

Split the project configuration into `<projectRoot>/project.json` rather than including it inside workspace.json

@nrwl/web:application

Usage

Options

bundler

compiler

directory

e2eTestRunner

linter

name

style

skipFormat

setParserOptionsProject

standaloneConfig

tags

unitTestRunner