diff --git a/docs/blog/2024-09-25-introducing-nx-powerpack.md b/docs/blog/2024-09-25-introducing-nx-powerpack.md index 72c91a279c..73293b0124 100644 --- a/docs/blog/2024-09-25-introducing-nx-powerpack.md +++ b/docs/blog/2024-09-25-introducing-nx-powerpack.md @@ -125,7 +125,7 @@ As part of this new approach we're also going to [deprecate custom task runners] To fill in on the custom task runner API we're providing a new Powerpack plugin that allows you to use S3 or a network drive as your storing mechanism for your Nx cache. -Here's an example of how to get started with AWS S3 based remote caching. First add the Powerpack plugin: +Here's an example of how to get started with [Amazon S3](https://aws.amazon.com/s3) based remote caching. First add the Powerpack plugin: ```shell npx nx add @nx/powerpack-s3-cache diff --git a/docs/external-generated/packages/powerpack-shared-fs-cache/documents/overview.md b/docs/external-generated/packages/powerpack-shared-fs-cache/documents/overview.md index b975a42f87..45e6eb384d 100644 --- a/docs/external-generated/packages/powerpack-shared-fs-cache/documents/overview.md +++ b/docs/external-generated/packages/powerpack-shared-fs-cache/documents/overview.md @@ -8,7 +8,7 @@ The `@nx/powerpack-shared-fs-cache` plugin enables you to use a shared file syst This plugin will enable the remote cache for your Nx workspace, but does not provide any of the other features of Nx Cloud. If you want to leverage [distributed task execution](/ci/features/distribute-task-execution), [re-running flaky tasks](/ci/features/flaky-tasks) or [automatically splitting tasks](/ci/features/split-e2e-tasks), you'll need to [connect to Nx Cloud](/ci/intro/connect-to-nx-cloud) and use [Nx Replay](/ci/features/remote-cache) instead. {% callout type="warning" title="Potential Cache Poisoning" %} -Using a shared file system folder for the remote cache opens you up to the possibility of [cache poisoning](/troubleshooting/unknown-local-cache). To avoid this, use [Nx Replay](/ci/features/remote-cache) or share your cache with an AWS S3 bucket using [`@nx/powerpack-s3-cache`](/nx-api/powerpack-s3-cache). +Using a shared file system folder for the remote cache opens you up to the possibility of [cache poisoning](/troubleshooting/unknown-local-cache). To avoid this, use [Nx Replay](/ci/features/remote-cache) or share your cache with an Amazon S3 bucket using [`@nx/powerpack-s3-cache`](/nx-api/powerpack-s3-cache). {% /callout %} {% callout title="This plugin requires an active Nx Powerpack license" %} diff --git a/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md b/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md index dfc84a2998..da0f2b0e88 100644 --- a/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md +++ b/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md @@ -8,7 +8,7 @@ When you serve your host application via `nx serve host`, the Nx `module-federat {% callout type="note" title="Using Module Federation with SSR?" %} The same technique outlined below also applies to the `module-federation-ssr-dev-server`. -This is important to know when it comes to deploying your SSR Module Federation application as it indicates that you can place the build artifacts from the `remotes` onto something like an AWS S3 Bucket and your `host` will be able to find these files correctly. +This is important to know when it comes to deploying your SSR Module Federation application as it indicates that you can place the build artifacts from the `remotes` onto something like an Amazon S3 Bucket and your `host` will be able to find these files correctly. {% /callout %} The executor does the following: diff --git a/docs/shared/deprecated/custom-task-runners.md b/docs/shared/deprecated/custom-task-runners.md index fdf7e12047..fd4565cab3 100644 --- a/docs/shared/deprecated/custom-task-runners.md +++ b/docs/shared/deprecated/custom-task-runners.md @@ -8,5 +8,5 @@ As of Nx 20, the `tasksRunnerOptions` property in `nx.json` is deprecated. This For most organizations, this feature is a net positive. If you are currently using a custom task runner, you are most likely using it to define your own custom [remote cache](/ci/features/remote-cache) storage location. You have several options moving forward: 1. Use [Nx Cloud](/nx-cloud) for your remote cache -2. Use an [Nx Powerpack](/powerpack) plugin to store your remote cache on an [AWS S3 bucket](/nx-api/powerpack-s3-cache) or a [network drive](/nx-api/powerpack-shared-fs-cache) +2. Use an [Nx Powerpack](/powerpack) plugin to store your remote cache on an [Amazon S3 bucket](/nx-api/powerpack-s3-cache) or a [network drive](/nx-api/powerpack-shared-fs-cache) 3. Use the deprecated custom task runner feature until Nx 21 diff --git a/docs/shared/features/powerpack/custom-caching.md b/docs/shared/features/powerpack/custom-caching.md index 1c0c995426..c37f9e14ed 100644 --- a/docs/shared/features/powerpack/custom-caching.md +++ b/docs/shared/features/powerpack/custom-caching.md @@ -5,8 +5,8 @@ The recommended way to enable the [remote cache](/ci/features/remote-cache) is to use Nx Replay and have Nx Cloud share the task cache across your organization. For those organizations that are unable to use Nx Cloud, Nx offers official plugins that are enabled by [Nx Powerpack](/powerpack) to self-host the remote cache in a fast and secure manner. The recommended ways to host the remote cache are, in order of preference: 1. [Nx Replay](/ci/features/remote-cache): Cache is hosted on Nx Cloud servers or on-premise with an [Nx Enterprise](/enterprise) contract -2. [@nx/powerpack-s3-cache](/nx-api/powerpack-s3-cache): Cache is on a self-hosted, fully secure AWS S3 bucket -3. [@nx/powerpack-shared-fs-cache](/nx-api/powerpack-shared-fs-cache): Cache is self-hosted and self-secured on a shared file system location +2. [@nx/powerpack-s3-cache](/nx-api/powerpack-s3-cache): Cache is on a self-hosted Amazon S3 bucket +3. [@nx/powerpack-shared-fs-cache](/nx-api/powerpack-shared-fs-cache): Cache is self-hosted on a shared file system location The options range from fully opting in to Nx's management of the remote cache to fully managing the configuration and security of your own remote cache. @@ -20,7 +20,7 @@ Then, choose the appropriate cache plugin for your situation. {% cards cols="2" lgCols="2" mdCols="2" smCols="2" %} -{% link-card title="AWS S3 Bucket Remote Cache" type="Nx Plugin" url="/nx-api/powerpack-s3-cache" icon="AwsIcon" /%} +{% link-card title="Amazon S3 Bucket Remote Cache" type="Nx Plugin" url="/nx-api/powerpack-s3-cache" icon="AwsIcon" /%} {% link-card title="Shared Network Drive Remote Cache" type="Nx Plugin" url="/nx-api/powerpack-shared-fs-cache" icon="ServerIcon" /%} diff --git a/docs/shared/guides/unknown-local-cache.md b/docs/shared/guides/unknown-local-cache.md index 50b726b2f0..3bbc05b693 100644 --- a/docs/shared/guides/unknown-local-cache.md +++ b/docs/shared/guides/unknown-local-cache.md @@ -79,7 +79,7 @@ Nx Replay is not the only remote cache you can use. You can also use one of the If you can't use Nx Replay, Nx provides plugins that enable you to [self-host the remote cache](/features/powerpack/custom-caching). These plugins are available as part of the [Nx Powerpack](/powerpack), which you can unlock by [activating your license](/recipes/installation/activate-powerpack). There are plugins to self-host your remote cache in the following locations: -- [AWS S3 Bucket](/nx-api/powerpack-s3-cache) +- [Amazon S3 Bucket](/nx-api/powerpack-s3-cache) - [Shared File System](/nx-api/powerpack-shared-fs-cache) These plugins will ensure that the task metadata and project graph information are correctly associated with the file artifacts in your cache. diff --git a/nx-dev/feature-package-schema-viewer/src/lib/content.tsx b/nx-dev/feature-package-schema-viewer/src/lib/content.tsx index 1101c0e561..7ebf7d7e63 100644 --- a/nx-dev/feature-package-schema-viewer/src/lib/content.tsx +++ b/nx-dev/feature-package-schema-viewer/src/lib/content.tsx @@ -11,6 +11,7 @@ import { SchemaViewModel } from './get-schema-view-model'; import { SchemaEditor } from './schema-editor'; import { SchemaViewer } from './schema-viewer'; import { Heading2, Heading3 } from './ui/headings'; +import { cx } from '@nx/nx-dev/ui-primitives'; function pathCleaner(path: string): string { return path.split('?')[0]; @@ -156,29 +157,38 @@ export function Content({ {schemaViewModel.packageName} - - - - - See schema - + + + + See schema + + )} diff --git a/nx-dev/feature-package-schema-viewer/src/lib/ui/top.layout.tsx b/nx-dev/feature-package-schema-viewer/src/lib/ui/top.layout.tsx index f990fd88f5..4b351e8e86 100644 --- a/nx-dev/feature-package-schema-viewer/src/lib/ui/top.layout.tsx +++ b/nx-dev/feature-package-schema-viewer/src/lib/ui/top.layout.tsx @@ -25,24 +25,30 @@ export function TopSchemaLayout({ Rescope @nrwl to @nx -
- -
+ {name.startsWith('@nx/powerpack') ? undefined : ( +
+ +
+ )} ); } diff --git a/nx-dev/nx-dev/pages/plugin-registry.tsx b/nx-dev/nx-dev/pages/plugin-registry.tsx index 25de2788b2..8ff1b27ca7 100644 --- a/nx-dev/nx-dev/pages/plugin-registry.tsx +++ b/nx-dev/nx-dev/pages/plugin-registry.tsx @@ -4,6 +4,7 @@ import { Breadcrumbs, DocumentationHeader, Footer, + PluginType, SidebarContainer, } from '@nx/nx-dev/ui-common'; import { PluginDirectory } from '@nx/nx-dev/ui-community'; @@ -21,7 +22,7 @@ interface PluginInfo { description: string; name: string; url: string; - isOfficial: boolean; + pluginType: PluginType; } interface BrowseProps { pluginList: PluginInfo[]; @@ -53,12 +54,14 @@ export async function getStaticProps(): Promise<{ props: BrowseProps }> { url: plugin.path, ...qualityIndicators[plugin.packageName], nxVersion: 'official', - isOfficial: true, + pluginType: plugin.name?.startsWith('powerpack-') + ? 'nxPowerpack' + : 'nxOpenSource', })), ...pluginList.map((plugin) => ({ ...plugin, ...qualityIndicators[plugin.name], - isOfficial: false, + pluginType: 'community', })), ], menu: menusApi.getMenu('nx', ''), diff --git a/nx-dev/ui-common/src/lib/plugin-card.tsx b/nx-dev/ui-common/src/lib/plugin-card.tsx index 68d2d39ee5..9be1fbe7dd 100644 --- a/nx-dev/ui-common/src/lib/plugin-card.tsx +++ b/nx-dev/ui-common/src/lib/plugin-card.tsx @@ -5,11 +5,12 @@ import { } from '@heroicons/react/24/outline'; import Link from 'next/link'; +export type PluginType = 'nxOpenSource' | 'nxPowerpack' | 'community'; export interface PluginCardProps { name: string; description: string; url: string; - isOfficial: boolean; + pluginType: PluginType; lastPublishedDate?: string; npmDownloads?: string; githubStars?: string; @@ -20,7 +21,7 @@ export function PluginCard({ name, description, url, - isOfficial, + pluginType, lastPublishedDate, npmDownloads, githubStars, @@ -44,8 +45,8 @@ export function PluginCard({ @@ -67,19 +68,27 @@ export function PluginCard({
- {isOfficial ? ( + {pluginType === 'community' ? ( +
+ +
+ ) : pluginType === 'nxOpenSource' ? (
- Nx Team + Nx Open Source
- ) : ( -
- + ) : pluginType === 'nxPowerpack' ? ( +
+ Nx Powerpack
- )} + ) : undefined}
diff --git a/nx-dev/ui-community/src/lib/plugin-directory.tsx b/nx-dev/ui-community/src/lib/plugin-directory.tsx index c88b958730..c36a1b4476 100644 --- a/nx-dev/ui-community/src/lib/plugin-directory.tsx +++ b/nx-dev/ui-community/src/lib/plugin-directory.tsx @@ -6,7 +6,7 @@ import { StarIcon, } from '@heroicons/react/24/outline'; import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'; -import { PluginCard, SectionHeading } from '@nx/nx-dev/ui-common'; +import { PluginCard, PluginType, SectionHeading } from '@nx/nx-dev/ui-common'; import { useParams } from 'next/navigation'; import { useEffect, useState, useRef, ElementRef } from 'react'; @@ -14,7 +14,7 @@ interface Plugin { description: string; name: string; url: string; - isOfficial: boolean; + pluginType: PluginType; lastPublishedDate?: string; npmDownloads?: string; githubStars?: string; @@ -260,7 +260,7 @@ export function PluginDirectory({ key={plugin.name} name={plugin.name} description={plugin.description} - isOfficial={plugin.isOfficial} + pluginType={plugin.pluginType} lastPublishedDate={plugin.lastPublishedDate} npmDownloads={plugin.npmDownloads} githubStars={plugin.githubStars} diff --git a/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx b/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx index dca6e864e8..9d4b3dec30 100644 --- a/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx +++ b/nx-dev/ui-powerpack/src/lib/powerpack-features.tsx @@ -26,7 +26,7 @@ export function PowerpackFeatures(): ReactElement { Self-hosted cache storage

- Nx Powerpack enables you to use AWS S3 or a{' '} + Nx Powerpack enables you to use Amazon S3 or a{' '} shared network drive as your remote cache storage, offering a flexible, self-managed solution for faster builds. @@ -194,7 +194,7 @@ export function CustomRemoteCacheAnimation(): ReactElement {