66eaf2fc74
This PR removes the `/nx-api` pages from `nx-dev`. They are already redirected from `/nx-api` to either `/technologies` or `/reference/core-api` URLs. e.g. `/nx-api/nx` goes to `/reference/core-api/nx` and `/nx-api/react` goes to `/technologies/react/api` **Changes**: - Remove old `nx-api.json` from being generated in `scripts/documentation/generators/generate-manifests.ts` -- this was used to generate the sitemap - Remove `pages/nx-api` from Next.js app since we don't need them - Remove workaround from link checker `scripts/documentation/internal-link-checker.ts` -- the angular rspack/rsbuild and other workarounds are gone now that they are proper docs in `map.json` - Update Powerpack/Remote Cache reference docs to exclude API documents (since they are duplicated in the Intro page) -- `nx-dev/models-document/src/lib/mappings.ts` - All content in `docs` have been updated with new URL structure **Note:** Redirects are already handled, and Claude Code was used to verify the updated `docs/` URLs (see report below). The twelve 404s links were updated by hand. ## Verification Report https://gist.github.com/jaysoo/c7863fe7e091cb77929d1976165c357a
3.1 KiB
| title | description |
|---|---|
| Web Plugin for Nx | Learn how to use the @nx/web plugin to create and manage Web Component applications and libraries in your Nx workspace, including testing and building. |
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 @nx/web
Generating a new Workspace
To create a new workspace with React, run npx create-nx-workspace@latest --preset=web-components.
Installation
{% callout type="note" title="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.
{% /callout %}
In any Nx workspace, you can install @nx/web by running the following command:
nx add @nx/web
This will install the correct version of @nx/web.
Using the @nx/web Plugin
Creating Applications
You can add a new application with the following:
nx g @nx/web:app apps/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. {% /callout %}
Creating Libraries
To create a generic TypeScript library (i.e. non-framework specific), use the @nx/js plugin.
nx g @nx/js:lib libs/my-new-lib
# If you want the library to be publishable to npm
nx g @nx/js:lib libs/my-new-lib \
--publishable \
--importPath=@myorg/my-new-lib
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.