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.

Keep Nx Package Versions In Sync

Make sure to install the @nx/web version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe.

To add the web plugin to an existing workspace, run one of the following:

❯

# For npm users

❯

npm install -D @nx/web

❯

# For yarn users

❯

yarn add -D @nx/web

Nx 15 and lower use @nrwl/ instead of @nx/

Creating Applications

You can add a new application with the following:

❯

nx g @nx/web:app my-new-app

Nx 15 and lower use @nrwl/ instead of @nx/

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.

React

If you are looking to add a React application, check out the React plugin.

Creating Libraries

To create a generic TypeScript library (i.e. non-framework specific), use the @nx/js plugin.

❯

nx g @nx/js:lib my-new-lib

❯

# If you want the library to be publishable to npm

❯

nx g @nx/js:lib my-new-lib \

❯

--publishable \

❯

--importPath=@myorg/my-new-lib

Nx 15 and lower use @nrwl/ instead of @nx/

Using Web

Testing Projects

You can run unit tests with:

❯

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:

❯

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:

❯

nx build my-new-app

And if you generated a library with --buildable, then you can build a library as well:

❯

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:

❯

npx http-server dist/apps/my-new-app

The library in dist is publishable to npm or a private registry.

More Documentation