diff --git a/docs/spfx/release-0.0.0.md.template b/docs/spfx/release-0.0.0.md.template index 6267bcdd7d..929d63b57b 100644 --- a/docs/spfx/release-0.0.0.md.template +++ b/docs/spfx/release-0.0.0.md.template @@ -29,7 +29,18 @@ In the project's **package.json** file, identify all SPFx vTODO: {version-previo npm install @microsoft/{spfx-package-name}@TODO: {version-release}.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion TODO: {version-release} --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.0.0.md b/docs/spfx/release-1.0.0.md index 35ce53bcb8..71fec62d7b 100644 --- a/docs/spfx/release-1.0.0.md +++ b/docs/spfx/release-1.0.0.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx pre-v1 packages. For e npm install @microsoft/{spfx-package-name}@1.0.0.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.0.0 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.1.0.md b/docs/spfx/release-1.1.0.md index 017e3aa7d7..322e7d9bfd 100644 --- a/docs/spfx/release-1.1.0.md +++ b/docs/spfx/release-1.1.0.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.0 packages. For eac npm install @microsoft/{spfx-package-name}@1.1.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.10.0.md b/docs/spfx/release-1.10.0.md index d3b939845c..730096c7b0 100644 --- a/docs/spfx/release-1.10.0.md +++ b/docs/spfx/release-1.10.0.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.9.1 packages. For e npm install @microsoft/{spfx-package-name}@1.10.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.10.0 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.11.0.md b/docs/spfx/release-1.11.0.md index 974050813b..e5b9b0b8ab 100644 --- a/docs/spfx/release-1.11.0.md +++ b/docs/spfx/release-1.11.0.md @@ -33,7 +33,18 @@ In the project's **package.json** file, identify all SPFx v1.10 packages. For ea > [!IMPORTANT] > Be sure you update the **package-solution.json** with the new developers information as described in the article [Docs: SharePoint Framework toolchain - Update developer information](toolchain/sharepoint-framework-toolchain.md). Not providing such information will generate an error during gulp package-solution process. -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.11.0 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.12.1.md b/docs/spfx/release-1.12.1.md index 3f4bf14fac..e2b5451d07 100644 --- a/docs/spfx/release-1.12.1.md +++ b/docs/spfx/release-1.12.1.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.11.0 packages. For npm install @microsoft/{spfx-package-name}@1.12.1 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.12.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.13.0.md b/docs/spfx/release-1.13.0.md index a577af60ac..fe730d2c0b 100644 --- a/docs/spfx/release-1.13.0.md +++ b/docs/spfx/release-1.13.0.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.12.1 packages. For npm install @microsoft/{spfx-package-name}@1.13.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.13 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.13.1.md b/docs/spfx/release-1.13.1.md index edf26d9883..9ff04906ae 100644 --- a/docs/spfx/release-1.13.1.md +++ b/docs/spfx/release-1.13.1.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.13 packages. For ea npm install @microsoft/{spfx-package-name}@1.13.1 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.13.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Changes in this release diff --git a/docs/spfx/release-1.14.0.md b/docs/spfx/release-1.14.0.md index 293517b638..bb97e5de3b 100644 --- a/docs/spfx/release-1.14.0.md +++ b/docs/spfx/release-1.14.0.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.13.1 packages. For npm install @microsoft/{spfx-package-name}@1.14.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.14 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.15.0.md b/docs/spfx/release-1.15.0.md index 9641ee0e84..4d5cc2fcab 100644 --- a/docs/spfx/release-1.15.0.md +++ b/docs/spfx/release-1.15.0.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx v1.14 packages. For ea npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.15 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.15.2.md b/docs/spfx/release-1.15.2.md index ea755382a7..534a0bf5e7 100644 --- a/docs/spfx/release-1.15.2.md +++ b/docs/spfx/release-1.15.2.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx v1.15.0 packages. For npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.15.2 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities @@ -50,7 +61,7 @@ Now developers are able to specify **optional** attributes `appId` and `replyUrl When these attributes are present, administrators are presented standard Azure AD app registration consent as part of the API approval process. -For more information on this feature, see: [Requesting permissions to Azure AD applications in another tenant](use-aadhttpclient.md#requesting-permissions-to-azure-ad-applications-in-another-tenant). +For more information on this feature, see: [Requesting permissions to Entra ID applications in another tenant](use-aadhttpclient.md#requesting-permissions-to-entra-id-applications-in-another-tenant). ### New Action types for media - General Availability diff --git a/docs/spfx/release-1.16.0.md b/docs/spfx/release-1.16.0.md index 99eb1bb61c..a097c8b241 100644 --- a/docs/spfx/release-1.16.0.md +++ b/docs/spfx/release-1.16.0.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx v1.15.2 packages. For npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.16 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.16.1.md b/docs/spfx/release-1.16.1.md index 1d9d6f100a..dd98dfce86 100644 --- a/docs/spfx/release-1.16.1.md +++ b/docs/spfx/release-1.16.1.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx v1.16 packages. For ea npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.16.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.17.0.md b/docs/spfx/release-1.17.0.md index bc3bd02c01..4e9fdfd269 100644 --- a/docs/spfx/release-1.17.0.md +++ b/docs/spfx/release-1.17.0.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx v1.16.1 packages. For npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.17 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.17.1.md b/docs/spfx/release-1.17.1.md index b1c0adb54b..f686cdab04 100644 --- a/docs/spfx/release-1.17.1.md +++ b/docs/spfx/release-1.17.1.md @@ -39,7 +39,18 @@ In the project's **package.json** file, identify all SPFx v1.17 packages. For ea npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.17.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Fixed Issues diff --git a/docs/spfx/release-1.17.2.md b/docs/spfx/release-1.17.2.md index a556ec9b4e..5016eec1c5 100644 --- a/docs/spfx/release-1.17.2.md +++ b/docs/spfx/release-1.17.2.md @@ -40,7 +40,18 @@ npm install @microsoft/generator-sharepoint@latest --global npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.17.2 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Fixed Issues diff --git a/docs/spfx/release-1.17.3.md b/docs/spfx/release-1.17.3.md index 2f2ea1726d..4bf110061c 100644 --- a/docs/spfx/release-1.17.3.md +++ b/docs/spfx/release-1.17.3.md @@ -40,7 +40,18 @@ npm install @microsoft/generator-sharepoint@latest --global npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.17.3 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Fixed Issues diff --git a/docs/spfx/release-1.17.4.md b/docs/spfx/release-1.17.4.md index d7e89e2187..d922283a96 100644 --- a/docs/spfx/release-1.17.4.md +++ b/docs/spfx/release-1.17.4.md @@ -40,7 +40,18 @@ npm install @microsoft/generator-sharepoint@latest --global npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.17.4 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.18.0.md b/docs/spfx/release-1.18.0.md index 0dd5414583..13bac9cff9 100644 --- a/docs/spfx/release-1.18.0.md +++ b/docs/spfx/release-1.18.0.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx v1.17.x packages. For npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.18 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.18.1.md b/docs/spfx/release-1.18.1.md index ac3110852c..506a3163b3 100644 --- a/docs/spfx/release-1.18.1.md +++ b/docs/spfx/release-1.18.1.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx packages. For each SPF npm install @microsoft/{spfx-package-name}@1.18.1 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.18.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.18.2.md b/docs/spfx/release-1.18.2.md index be708a1224..8f872ea394 100644 --- a/docs/spfx/release-1.18.2.md +++ b/docs/spfx/release-1.18.2.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx packages. For each SPF npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.18.2 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.19.0.md b/docs/spfx/release-1.19.0.md index 81f207b11f..6ff69bbd4e 100644 --- a/docs/spfx/release-1.19.0.md +++ b/docs/spfx/release-1.19.0.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx v1.18.x packages. For npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.19 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.20.0.md b/docs/spfx/release-1.20.0.md index d688f4995e..b18324fa3b 100644 --- a/docs/spfx/release-1.20.0.md +++ b/docs/spfx/release-1.20.0.md @@ -36,7 +36,18 @@ In the project's **package.json** file, identify all SPFx v1.19 packages. For ea npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.20 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.21.0.md b/docs/spfx/release-1.21.0.md index d532ddc470..00a7bd2110 100644 --- a/docs/spfx/release-1.21.0.md +++ b/docs/spfx/release-1.21.0.md @@ -39,7 +39,18 @@ In the project's **package.json** file, identify all SPFx v1.20 packages. For ea npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.21 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.21.1.md b/docs/spfx/release-1.21.1.md index b84662f003..7ddd779846 100644 --- a/docs/spfx/release-1.21.1.md +++ b/docs/spfx/release-1.21.1.md @@ -39,7 +39,18 @@ In the project's **package.json** file, identify all SPFx v1.21 packages. For ea npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.21.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Fixed Issues diff --git a/docs/spfx/release-1.22.0.md b/docs/spfx/release-1.22.0.md index 507c4b4e45..e0bb247047 100644 --- a/docs/spfx/release-1.22.0.md +++ b/docs/spfx/release-1.22.0.md @@ -9,7 +9,7 @@ ms.localizationpriority: high This release focused on updating and modernizing the SharePoint Framework (SPFx) build toolchain and to address all known 'npm audit' reported vulnerabilities in the Yeoman package and in the scaffolded projects. > [!NOTE] -> [SharePoint Framework API Reference](https://learn.microsoft.com/javascript/api/overview/sharepoint?view=sp-typescript-latest) has been also updated to match the latest 1.22.0 version. +> [SharePoint Framework API Reference](/javascript/api/overview/sharepoint) has been also updated to match the latest 1.22.0 version. **Released:** December 10, 2025 @@ -25,17 +25,26 @@ npm install @microsoft/generator-sharepoint@latest --global ## Upgrading projects from the SPFx v1.21.1 to v1.22.0 version -The upgrade steps required to convert a [gulp-based toolchain](toolchain/sharepoint-framework-toolchain.md) SPFx project to the [Heft-based toolchain](toolchain/sharepoint-framework-toolchain-rushstack-heft.md) are detailed in the following article: [Migrate from the Gulp Toolchain to Heft Toolchain](toolchain/migrate-gulptoolchain-hefttoolchain.md). +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] -## New features and capabilities +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.22.0 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. -### Transitioning from Gulp-based toolchain to the Heft-based toolchain +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] -Starting with SPFx v1.22.0, new projects use Heft as the build task orchestrator instead of a [gulp-based toolchain](./toolchain/sharepoint-framework-toolchain.md) used in SPFx v1.0 - v1.21.1 releases. This change represents a fundamental shift in how SPFx projects are built, configured, and customized, though the underlying bundling technology (webpack) remains the same. +For an overview of what changes during this migration from the [Gulp-based toolchain](toolchain/sharepoint-framework-toolchain.md) to the [Heft-based toolchain](toolchain/sharepoint-framework-toolchain-rushstack-heft.md), see: [Migrate from the Gulp Toolchain to Heft Toolchain](toolchain/migrate-gulptoolchain-hefttoolchain.md). -See more details on this upcoming change from the following documentation: +## New features and capabilities + +### Transitioning from Gulp-based toolchain to the Heft-based toolchain -- [Heft-based toolchain (SPFx v1.22.0+)](./toolchain/sharepoint-framework-toolchain-rushstack-heft.md) +Starting with SPFx v1.22.0, new projects use Heft as the build task orchestrator instead of the gulp-based toolchain used in SPFx v1.0 - v1.21.1 releases. This change represents a fundamental shift in how SPFx projects are built, configured, and customized, though the underlying bundling technology (webpack) remains the same. ### Addressing npm audit issues diff --git a/docs/spfx/release-1.22.1.md b/docs/spfx/release-1.22.1.md index 1fb1465bf6..58d62d0871 100644 --- a/docs/spfx/release-1.22.1.md +++ b/docs/spfx/release-1.22.1.md @@ -39,7 +39,18 @@ In the project's **package.json** file, identify all SPFx v1.22 packages. For ea npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.22.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Fixed Issues diff --git a/docs/spfx/release-1.22.2.md b/docs/spfx/release-1.22.2.md index 55c7e7fad6..0900260ed0 100644 --- a/docs/spfx/release-1.22.2.md +++ b/docs/spfx/release-1.22.2.md @@ -39,7 +39,18 @@ In the project's **package.json** file, identify all SPFx v1.22 packages. For ea npm install @microsoft/{spfx-package-name}@latest --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.22.2 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Fixed Issues diff --git a/docs/spfx/release-1.23.0.md b/docs/spfx/release-1.23.0.md index cf6ac9d0dc..be4e0335fa 100644 --- a/docs/spfx/release-1.23.0.md +++ b/docs/spfx/release-1.23.0.md @@ -24,6 +24,19 @@ npm install @microsoft/generator-sharepoint@latest --global If you are upgrading from older than 1.22 version, please follow the upgrade steps required to convert a [gulp-based toolchain](toolchain/sharepoint-framework-toolchain.md) SPFx project to the [Heft-based toolchain](toolchain/sharepoint-framework-toolchain-rushstack-heft.md) are detailed in the following article: [Migrate from the Gulp Toolchain to Heft Toolchain](toolchain/migrate-gulptoolchain-hefttoolchain.md). +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.23.0 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] + ## New features and capabilities ### Grouping support for list view command sets diff --git a/docs/spfx/release-1.3.0.md b/docs/spfx/release-1.3.0.md index 18fa1f9f1f..b9ae6d6c78 100644 --- a/docs/spfx/release-1.3.0.md +++ b/docs/spfx/release-1.3.0.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.1 packages. For eac npm install @microsoft/{spfx-package-name}@1.3.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.3 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.4.0.md b/docs/spfx/release-1.4.0.md index ce55e6865f..cf77414e79 100644 --- a/docs/spfx/release-1.4.0.md +++ b/docs/spfx/release-1.4.0.md @@ -26,7 +26,18 @@ In the project's **package.json** file, identify all SPFx v1.3 packages. For eac npm install @microsoft/{spfx-package-name}@1.4.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.4 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.4.1.md b/docs/spfx/release-1.4.1.md index aec7c5cfc4..8da5e4fad3 100644 --- a/docs/spfx/release-1.4.1.md +++ b/docs/spfx/release-1.4.1.md @@ -26,7 +26,18 @@ In the project's **package.json** file, identify all SPFx v1.4 packages. For eac npm install @microsoft/{spfx-package-name}@1.4.1.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.4.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.5.0.md b/docs/spfx/release-1.5.0.md index 49dbeae050..adb3c00040 100644 --- a/docs/spfx/release-1.5.0.md +++ b/docs/spfx/release-1.5.0.md @@ -49,7 +49,18 @@ Key changes are around the introduction of the new *plusbeta* model and many oth } ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.5 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.5.1.md b/docs/spfx/release-1.5.1.md index c8349b11f2..cba3f5ff3f 100644 --- a/docs/spfx/release-1.5.1.md +++ b/docs/spfx/release-1.5.1.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.5 packages. For eac npm install @microsoft/{spfx-package-name}@1.5.1 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.5.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Changes in this release diff --git a/docs/spfx/release-1.6.0.md b/docs/spfx/release-1.6.0.md index ebec1c9ff5..5fb23058c6 100644 --- a/docs/spfx/release-1.6.0.md +++ b/docs/spfx/release-1.6.0.md @@ -31,7 +31,18 @@ In the project's **package.json** file, identify all SPFx v1.5.1 packages. For e npm install @microsoft/{spfx-package-name}@1.6.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.6 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.7.0.md b/docs/spfx/release-1.7.0.md index cca1d0c389..baeddd9900 100644 --- a/docs/spfx/release-1.7.0.md +++ b/docs/spfx/release-1.7.0.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.6 packages. For eac npm install @microsoft/{spfx-package-name}@1.7.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.7 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.7.1.md b/docs/spfx/release-1.7.1.md index f2670b3bfe..4ef17955c8 100644 --- a/docs/spfx/release-1.7.1.md +++ b/docs/spfx/release-1.7.1.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.7 packages. For eac npm install @microsoft/{spfx-package-name}@1.7.1.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.7.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Changes in this release diff --git a/docs/spfx/release-1.8.0.md b/docs/spfx/release-1.8.0.md index 41aecf5185..10f85d5acd 100644 --- a/docs/spfx/release-1.8.0.md +++ b/docs/spfx/release-1.8.0.md @@ -51,7 +51,18 @@ We'll release more updated documentation and guidance videos during upcoming day 1. Fix all the new and interesting tslint errors that are now getting raised with a newer compiler. For large projects, this might take a while. The default behavior of the TypeScript compilers is getting stricter, but your code will be the better for it. -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.8.0 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/release-1.8.1.md b/docs/spfx/release-1.8.1.md index 904c3f6097..1e1f01c739 100644 --- a/docs/spfx/release-1.8.1.md +++ b/docs/spfx/release-1.8.1.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.8.0 packages. For e npm install @microsoft/{spfx-package-name}@1.8.1.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.8.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Changes in this release diff --git a/docs/spfx/release-1.8.2.md b/docs/spfx/release-1.8.2.md index 44ebf114b7..5d6f67ec1e 100644 --- a/docs/spfx/release-1.8.2.md +++ b/docs/spfx/release-1.8.2.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.8.1 packages. For e npm install @microsoft/{spfx-package-name}@1.8.2.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.8.2 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## Changes in this release diff --git a/docs/spfx/release-1.9.1.md b/docs/spfx/release-1.9.1.md index d759074ec6..7d0b23cd70 100644 --- a/docs/spfx/release-1.9.1.md +++ b/docs/spfx/release-1.9.1.md @@ -28,7 +28,18 @@ In the project's **package.json** file, identify all SPFx v1.8.2 packages. For e npm install @microsoft/{spfx-package-name}@1.9.1.0 --save --save-exact ``` -[!INCLUDE [spfx-release-upgrade-tip](../../includes/snippets/spfx-release-upgrade-tip.md)] +[!INCLUDE [spfx-release-upgrade-warning](../../includes/snippets/spfx-release-upgrade-warning.md)] + +> [!TIP] +> To upgrade this project, run: +> +> ```console +> npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.9.1 --output md +> ``` +> +> This analyzes your project and outputs all required changes, including a single script to apply them in one go. + +[!INCLUDE [pnp-o365cli](../../includes/snippets/open-source/pnp-o365cli.md)] ## New features and capabilities diff --git a/docs/spfx/toolchain/migrate-gulptoolchain-hefttoolchain.md b/docs/spfx/toolchain/migrate-gulptoolchain-hefttoolchain.md index 2626035bce..006a8d9025 100644 --- a/docs/spfx/toolchain/migrate-gulptoolchain-hefttoolchain.md +++ b/docs/spfx/toolchain/migrate-gulptoolchain-hefttoolchain.md @@ -1,220 +1,68 @@ --- title: Migrate from the Gulp-based to the Heft-based Toolchain -description: In this article, you'll learn how to migrate an existing SharePoint Framework v1.21.1 project based on the legacy Gulp-based build toolchain to the Heft-based build toolchain introduced in SPFx v1.22.\*. -ms.date: 12/30/2025 +description: Learn what changes when migrating a SharePoint Framework project from the Gulp-based build toolchain to the Heft-based build toolchain introduced in SPFx v1.22, and how to perform the migration using CLI for Microsoft 365. +ms.date: 05/21/2026 ms.localizationpriority: high --- # Migrate from the Gulp-based to the Heft-based Toolchain -The migration steps in moving from a Gulp-based toolchain SharePoint Framework (SPFx) project to a Heft-based toolchain are more involved than a typical SPFx project upgrade from one version to another version. - -In this article, you'll walk through in detail all of the steps required for removing the Gulp toolchain from a SPFx version v1.21.1 project and adding the Heft-based toolchain as part of the upgrade to an SPFx v1.22.\* project. +SPFx v1.22 introduced a new Heft-based build toolchain, replacing the Gulp-based toolchain used in SPFx v1.0–v1.21.1. This article explains what changes during the migration and how to perform it. > [!IMPORTANT] -> **This article assumes that you are upgrading an existing SPFx v1.21.1 React web part project.** -> -> The steps for upgrading other types of projects, such as those not using React, using SPFx extensions, or SPFx Adaptive Card Extensions instead of web parts are similar to the steps in this article. +> This migration involves changes across more than 12 files including package removals, new package installations, configuration file replacements, new file creation, ESLint rule changes, and build script rewrites. Do not attempt to perform these changes manually — use the CLI for Microsoft 365 to generate the complete set of changes for your project. > [!TIP] -> The steps in this page involve making numerous and significant changes to to your project. Before proceeding, strongly consider making a copy of your project or, if it's in source control, to start with a clean state (ie: no unstaged files). - -## Uninstall Gulp toolchain dependencies - -Start by first uninstalling the gulp-based toolchain packages from your project. - -```console -npm uninstall @microsoft/sp-build-web ajv gulp -``` - -Next, uninstall the **@microsoft/rush-stack-compiler-\*** which maps to the current version of TypeScript that your project currently uses. - -For instance, the default SPFx v1.21.1 project uses TypeScript v5.3, so you would uninstall the **@microsoft/rush-stack-compiler-5.3** package: - -```console -npm uninstall @microsoft/rush-stack-compiler-5.3 -``` - -If you're using a different version of TypeScript, make sure that you uninstall the **@microsoft/rush-stack-compiler-\*** package with the TypeScript version in the name of the **@microsoft/rush-stack-compiler-\*** package. - -## Install Heft toolchain dependencies - -The next step is to install all of the dependencies the Heft-based toolchain requires: - -```console -npm install @microsoft/spfx-web-build-rig@1.22.1 \ - @microsoft/spfx-heft-plugins@1.22.1 \ - @microsoft/eslint-config-spfx@1.22.1 \ - @microsoft/eslint-plugin-spfx@1.22.1 \ - @microsoft/sp-module-interfaces@1.22.1 \ - @rushstack/eslint-config@4.5.2 \ - @rushstack/heft@1.1.2 \ - @types/heft-jest@1.0.2 \ - @typescript-eslint/parser@8.46.2 \ - --save-dev --save-exact --force -``` - -## Optionally upgrade TypeScript - -The Heft-based SPFx toolchain supports any version of TypeScript supported by the [Heft TypeScript Plugin](https://heft.rushstack.io/pages/plugins/typescript/) that toolchain is using. - -> [!TIP] -> The **[loadTypeScriptTool.ts](https://github.com/microsoft/rushstack/blob/main/heft-plugins/heft-typescript-plugin/src/loadTypeScriptTool.ts)** file defines the TypeScript supported versions by the plugin. Ensure you are looking at the correct version of the plugin when considering the version of TypeScript to install. - -```console -npm install typescript@~5.8.0 --save-dev -``` - -## Update the ESLint configuration +> Use the [CLI for Microsoft 365 spfx project upgrade](https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-upgrade/) command to perform this migration automatically. It handles upgrades across any version gap — not just from v1.21.1 — by detecting your current version and generating the precise changes needed for your project. The report includes a single script to apply all changes in one go. See the [release notes](../release-1.22.2.md) for your target version for the specific command to run. -Next, modify the default ESLint configuration for your project. +[!INCLUDE [pnp-o365cli](../../../includes/snippets/open-source/pnp-o365cli.md)] -Open the **./eslintrc.js** file and locate the following line: +## What changes in this migration -```javascript -'@rushstack/hoist-jest-mock': 1, -``` +The following areas of your project are affected when migrating from the Gulp-based toolchain to the Heft-based toolchain: -Add the following immediately after that line: +### Build toolchain packages -```javascript -// Require chunk names for dynamic imports in SPFx projects. https://www.npmjs.com/package/@rushstack/eslint-plugin -'@rushstack/import-requires-chunk-name': 1, -// Ensure that React components rendered with ReactDOM.render() are unmounted with ReactDOM.unmountComponentAtNode(). https://www.npmjs.com/package/@rushstack/eslint-plugin -'@rushstack/pair-react-dom-render-unmount': 1, -``` +The Gulp-based packages (`@microsoft/sp-build-web`, `ajv`, `gulp`, and `@microsoft/rush-stack-compiler-*`) are removed and replaced with Heft-based equivalents (`@microsoft/spfx-web-build-rig`, `@microsoft/spfx-heft-plugins`, `@rushstack/heft`, `@typescript-eslint/parser`, and `@types/heft-jest`). -Then locate the following two rules and delete them: +### TypeScript configuration -```javascript -'@microsoft/spfx/import-requires-chunk-name': 1, +The existing `tsconfig.json` with its full `compilerOptions` block is replaced with a minimal file that extends the SPFx build rig's base TypeScript configuration. A new `config/typescript.json` file is added to configure static asset copying for the Heft TypeScript plugin. -'@microsoft/spfx/pair-react-dom-render-unmount': 1 -``` +### Build scripts -## Update npm scripts in package.json +The `scripts` change from Gulp commands (`gulp bundle`, `gulp clean`, `gulp test`) to Heft commands (`heft build`, `heft clean`, `heft start`). -Replace the existing `build`, `test`, and `clean` scripts in the **package.json** file with the following to use Heft instead of Gulp. +### ESLint rules -```json -{ - .. - "scripts": { - "build": "heft build --clean", - "clean": "heft clean", - "test": "heft test" - } - .. -} -``` +Two ESLint rules move from the `@microsoft/spfx/` namespace to the `@rushstack/` namespace: `import-requires-chunk-name` and `pair-react-dom-render-unmount`. -### Optionally add additional scripts to package.json - -The project templates created for SPFx v1.22 include additional scripts to the **package.json** file. While these are optional, you can add them to your project's **package.json** to match the default projects: - -```json -{ - .. - "scripts": { - .. - "build": "heft test --clean --production && heft package-solution --production", - "start": "heft start --clean", - "clean": "heft clean", - "eject-webpack": "heft eject-webpack" - } - .. -} -``` +### Configuration files -> [!TIP] -> While not required, we recommend installing the Heft CLI globally: -> -> ```console -> npm install @rushstack/heft --global -> ``` -> -> Once the Heft CLI is installed globally, you can run Heft commands without using the npm scripts. +A new `config/rig.json` file is added to point the project at the `@microsoft/spfx-web-build-rig` shared configuration package. The existing `config/sass.json` is updated to use the Heft SASS plugin schema and extend the rig's default SASS configuration. -## Add the SPFx Heft rig to the project +### Removed files -With the Heft toolchain now installed after removing the Gulp toolchain, the next step is to add a reference to the SPFx build rig. This is done by adding a new file to your project's configuration folder. That will reference the rig that the project will use. +The `gulpfile.js` and `src/index.ts` files are removed as they are no longer needed by the Heft-based build system. -Add a new file, **./config/rig.json**, to your project with the following contents: +### Production dependencies -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json", - "rigPackageName": "@microsoft/spfx-web-build-rig" -} -``` +All `@microsoft/sp-*` packages in `dependencies` are updated to the target SPFx version. -## Replace the Sass configuration file +## How to perform the migration -Replace the entire contents of the existing **./config/sass.json** file with the following to use the Heft Sass configuration in the SPFx Heft rig. This is where you can modify the default settings on the [Heft Sass Plugin](https://heft.rushstack.io/pages/plugins/sass/): - -```json -{ - "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json", - "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json" -} -``` - -## Add the Heft TypeScript Plugin configuration - -Add a new file, **./config/typescript.json**, to your project with the following code. This configures the [Heft TypeScript Plugin](https://heft.rushstack.io/pages/plugins/typescript/) used in the SPFx Heft rig: - -```json -{ - "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json", - "staticAssetsToCopy": { - "fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"], - "includeGlobs": ["webparts/*/loc/*.js"] - } -} -``` - -## Replace the TypeScript compiler configuration - -Replace the contents of the existing **./tsconfig.json** file with the following code. This assumes the same TypeScript configuration as the SPFx Heft rig's TypeScript configuration. - -```json -{ - "extends": "./node_modules/@microsoft/spfx-web-build-rig/profiles/default/tsconfig-base.json" -} -``` - -## Delete gulpfile.js - -Delete the **./gulpfile.js** file from your project as it is no longer used. - -> [!TIP] -> If you've made changes to your **gulpfile.js**, you may want to keep it until you've migrated those changes to the equivalent Heft extensibility options. Learn more about customizing the Heft-based toolchain: [Customizing the Heft-based build toolchain](customize-heft-toolchain-overview.md#customizing-the-heft-based-build-toolchain). - -## Upgrade production dependencies - -Finally, upgrade the production dependencies in the project to SPFx v1.22: +Run the following command from the root of your project to generate a complete upgrade report: ```console -npm install @microsoft/sp-component-base@1.22.1 \ - @microsoft/sp-core-library@1.22.1 \ - @microsoft/sp-lodash-subset@1.22.1 \ - @microsoft/sp-office-ui-fabric-core@1.22.1 \ - @microsoft/sp-property-pane@1.22.1 \ - @microsoft/sp-webpart-base@1.22.1 \ - --save-exact +npx -p @pnp/cli-microsoft365 m365 spfx project upgrade --toVersion 1.22.2 --output md ``` -> [!TIP] -> After making so many changes to the packages, consider deleting the **node_modules** and **./package-lock.json** (*or the equivalent lock file for the package manager you use*) and then re-running `npm install`. This ensures you will have a clean dependency tree. +The report lists every required change and includes a consolidated script at the end that applies all changes in a single execution. Review the report, then run the script to complete the migration. -## Test the project migration to the Heft-based toolchain +## Verify the migration -Test your changes by running the **build** command in the console from the root of your project. +After applying the changes, verify the migration by running the build command: ```console -# if you have heft installed globally... -heft build --production - -# ... or you can run the npm helper script npm run build ``` diff --git a/includes/snippets/spfx-release-upgrade-tip.md b/includes/snippets/spfx-release-upgrade-tip.md deleted file mode 100644 index b8da86cbf1..0000000000 --- a/includes/snippets/spfx-release-upgrade-tip.md +++ /dev/null @@ -1,3 +0,0 @@ - -> [!TIP] -> The [CLI for Microsoft 365](https://aka.ms/o365cli) provides an easy step-by-step guidance to [upgrade](https://pnp.github.io/cli-microsoft365/cmd/spfx/project/project-upgrade/) your solutions to latest SharePoint Framework version. diff --git a/includes/snippets/spfx-release-upgrade-warning.md b/includes/snippets/spfx-release-upgrade-warning.md new file mode 100644 index 0000000000..40f6ea475b --- /dev/null +++ b/includes/snippets/spfx-release-upgrade-warning.md @@ -0,0 +1,3 @@ + +> [!WARNING] +> Upgrading from a previous minor version requires changes across package versions, build configuration files, and toolchain settings that vary depending on your source version. Manually updating package.json alone will result in build failures.