Updated-SharePoint Framework development with SharePoint Server 2019 & SharePoint Server SE

Category
[X] Content fix

Related issues
fixes #issuenumber
partially #issuenumber
mentioned in #issuenumber

What's in this Pull Request?
The main purpose of this PR is to address the difference in SPFx dev between for SharePoint online and for on-premises.

Author: nimishasatapathy

docs/spfx/sharepoint-2019-support.md

@@ -1,12 +1,13 @@
 ---
 title: SharePoint Framework development with SharePoint Server 2019 & SharePoint Server SE
-description: SharePoint Server 2019 supports SharePoint Framework client-side web parts in classic and modern pages, and extensions in modern pages.
-ms.date: 06/10/2022
+description: SharePoint Server 2019 & Subscription Edition (SE) supports SharePoint Framework client-side web parts in classic and modern pages, and extensions in modern pages.
+ms.date: 03/14/2023
 ms.localizationpriority: high
 ---
+
 # SharePoint Framework development with SharePoint Server 2019 & SharePoint Server SE
 
-SharePoint Server 2019 supports SharePoint Framework client-side web parts in classic and modern pages, and extensions in modern pages.
+SharePoint Server 2019 and Subscription Edition support SharePoint Framework client-side web parts in classic and modern pages, and extensions in modern pages.
 
 > [!IMPORTANT]
 > SharePoint Server Subscription Edition (SE) has all the same dependencies and requirements for the SharePoint Framework as SharePoint Server 2019.
@@ -15,42 +16,122 @@ SharePoint Server 2019 supports SharePoint Framework client-side web parts in cl
 
 Because SharePoint Online and SharePoint Server 2019 have different release cycles for new capabilities, they also have different capabilities when it comes to the SharePoint Framework. SharePoint Online always uses the latest version of the SharePoint Framework, but SharePoint Server 2019 only supports the version that matches the server-side dependencies of the deployed packages.
 
-**SharePoint Server 2019 supports SharePoint Framework client-side web parts hosted on classic or modern SharePoint pages built by using the SharePoint Framework v1.4.1.** SharePoint Server 2019 also supports SharePoint Framework extensions hosted on modern SharePoint pages built using SharePoint Framework v1.4.1. This means that when you're targeting the SharePoint Server 2019 platform, you need to use the SharePoint Framework v1.4.1 because of the server-side version dependencies.
+> [!IMPORTANT]
+>SharePoint Server 2019 supports SharePoint Framework client-side web parts hosted on classic or modern SharePoint pages built by using the SharePoint Framework v1.4.1. 
+
+SharePoint Server 2019 also supports SharePoint Framework extensions hosted on modern SharePoint pages built using SharePoint Framework v1.4.1. This means that when you're targeting the SharePoint Server 2019 platform, you need to use the SharePoint Framework v1.4.1 because of the server-side version dependencies. 
 
-Starting from v1.3, the SharePoint Framework Yeoman generator supports scaffolding solutions that use both the latest version of the SharePoint Framework meant for use with SharePoint Online, and solutions that can be used with SharePoint on-premises based on the v1.1.0 or v1.4.1 of the SharePoint Framework. You don't need to install a separate version of the SharePoint Framework Yeoman generator to scaffold solutions meant for use with SharePoint on-premises.
+Starting from v1.3, the SharePoint Framework Yeoman generator supports scaffolding solutions that use both the latest version of the SharePoint Framework meant for use with SharePoint Online, and solutions that can be used with SharePoint on-premises based on the v1.1.0 or v1.4.1 of the SharePoint Framework. You don't need to install a separate version of the SharePoint Framework Yeoman generator to scaffold solutions meant for use with SharePoint on-premises. 
 
 ## Development environment considerations
 
 When you're developing SharePoint Framework client-side web parts, you need Internet connectivity to access npm packages. This is required when solutions are being scaffolded by using the SharePoint Framework Yeoman templates.
 
-If Internet access isn't available for the development machines, you can set up a local on-premises registry for the required npm packages. However, this requires additional software and a significant amount of work to set up and maintain local package versions with packages in the actual npm gallery.
+If Internet access isn't available for the development machines, you can set up a local on-premises registry for the required npm packages. However, this requires more software and a significant amount of work to set up and maintain local package versions with packages in the actual npm gallery.
 
 The [Team-based development on the SharePoint Framework](team-based-development-on-sharepoint-framework.md) guidance document includes different options for development environment setup including when you might need to support multiple SharePoint Framework versions.
 
-### Node.js, Gulp CLI, and Yeoman versions
+### Node.js, gulp-cli, and Yeoman versions
 
-The dependencies for SPFx v1.4.1 frameworks, tools, and the associated versions don't match the same dependency matrix for the latest versions of SPFx. In these cases, you may need to install specific versions of the tools. Because SPFx v1.4.1 is only supported on Node.js v6 and Node.js v8, you need to ensure you have a supported version of Node.js installed as well as an older version of Gulp CLI and Yeoman.
+The dependencies for SPFx v1.4.1 frameworks, tools, and the associated versions don't match the same dependency matrix for the latest versions of SharePoint Framework. In these cases, you may need to install specific versions of the tools. Because SPFx v1.4.1 is supported on Node.js v6 and Node.js v8 by default, you need to ensure you have a supported version of Node.js installed as well as an older version of Gulp CLI and Yeoman.
 
 > [!NOTE]
-> The Gulp team introduced a separate package, [gulp-cli](https://www.npmjs.com/package/gulp-cli), that should be installed globally. It can be used by projects that use either Gulp v3 & Gulp v4.
->
-> Learn more about the gulp-cli here: [gulpjs/gulp/#2324](https://github.com/gulpjs/gulp/issues/2324).
+   >- The Gulp team introduced a separate package, [gulp-cli](https://www.npmjs.com/package/gulp-cli), that should be installed globally. It can be used by projects that use either Gulp v3 & Gulp v4.
+   >- Learn more about the gulp-cli here: [gulpjs/gulp/#2324](https://github.com/gulpjs/gulp/issues/2324).
 
-Microsoft recommends using the most recent version of the Yeoman generator for the SharePoint Framework ([@microsoft/generator-sharepoint](https://www.npmjs.com/package/@microsoft/generator-sharepoint)) that supports creating on-premises projects: SPFx v1.10.0.
+Microsoft recommends using the most recent version of the Yeoman generator for the SharePoint Framework [@microsoft/generator-sharepoint](https://www.npmjs.com/package/@microsoft/generator-sharepoint) that supports creating on-premises projects: SPFx v1.10.0.  
 
 > [!IMPORTANT]
-> The Yeoman generator for the SharePoint Framework, starting with v1.13.0, only supports projects for SharePoint Online. Learn more about this change in the [SharePoint Framework v1.13 release notes](release-1.13.md). However, SPFx 1.4.1 is only supported on Node.js v6 and Node.js v8. Therefore, you need to get the latest version of the Yeoman generator for the SharePoint Framework (v1.10.0) that works on the same version of Node.js (v6 or v8) that SPFx v1.4.1 is supported on. Solution structure is created then with the v1.4.1 version packages as long as you select the environmen target properly in the Yeoman generator flow.
+> The Yeoman generator for the SharePoint Framework, starting with v1.13.0, only supports projects for SharePoint Online. Learn more about this change in the [SharePoint Framework v1.13 release notes](release-1.13.md). However, SPFx 1.4.1 is  supported on Node.js v6 and Node.js v8 by default. Therefore, you need to get the latest version of the Yeoman generator for the SharePoint Framework (v1.10.0) that works on the same version of Node.js (v6 or v8) that SPFx v1.4.1 is supported on. Solution structure is created then with the v1.4.1 version packages as long as you select the environmen target properly in the Yeoman generator flow.
+
+### Prepare the environment for SharePoint Framework development
+
+1. Install [Node.js v8.17.0](https://nodejs.org/download/release/v8.17.0/).<br>
+   SPFx v1.4.1 is also supported on Node.js v12 and v14 (v12.18.1 and v14.17.1 to be specific), although there is an incompatible issue [gulp 3 wasn't compatible with Node 12+](https://github.com/gulpjs/gulp/issues/2324). The workaround to resolve this issue is to specify the version of graceful-fs component as 4+. You can create npm-shrinkwrap.json in the root folder of the project and input the following content, and then run “npm install”. Also, you can use package-lock.json to resolve this issue too.
+
+```powershell
+    { 
+
+      “dependencies”:{ 
+         “graceful-fs”: { 
+                “version”: “4.2.2” 
+          } 
+       } 
+    }
+```   
+
+2. Install global dependencies.<br> 
+   `npm install [email protected] --global`<br>
+   `npm install [email protected] --global`<br>
+   `npm install @microsoft/[email protected] --global`<br> 
+
+For more information, see [SharePoint Framework development tools and libraries compatibility](tools-and-libraries.md). 
+
+## Build and deploy your first web part with SharePoint Framework 
+
+To create a new web part with SharePoint Framework , see [Build your first SharePoint client-side web part](web-parts/get-started/build-a-hello-world-web-part.md).
+
+To deploy your web part to SharePoint on-premises, unlike deploying to SharePoint Online, some dependent service applications and specific configurations on the SharePoint Server are required, seeing below tutorials. You can contact SharePoint Server administrator if you do not have appropriate permission to check or configure. 
+
+### Create service applications
+
+Ensure the following service applications are enabled on the SharePoint Server: 
+
+- App Management Service
+- Microsoft SharePoint Foundation Subscription Settings Service
+- Managed Metadata Web Service
+
+In Central Admin site, you can create App Management Service application and Managed Metadata Web Service application by selecting **Application Management --> Manage service applications**.
+
+:::image type="content" source="../images/manage-service-application.png" alt-text="This is manage service application image.":::
+
+To create SharePoint Foundation Subscription Settings Service, use the following PowerShell command:
+
+```powershell
+$sa = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $applicationPoolName -Name $serviceApplicationName -DatabaseName $dataBaseName 
+
+New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $sa
+```
+
+#### Prepare .sppkg package
+
+1. Bundle the solution.<br>
+   `gulp bundle --ship`
+          
+1. Package the solution.<br>
+   `gulp package-solution --ship`
+
+   Verify SharePoint Framework web part on local SharePoint workbench. 
+
+#### Create and configure App Catalog site
+
+To create and configure App Catalog site, follow these steps:
+
+1. From the **Central Administration** site, go to **Apps** and then select **Manage App Catalog**.
+
+   Create a local admin for subsequence use of as the site collection administrator.
+   
+   :::image type="content" source="../images/manage-app-catalogue.png" alt-text="This is manage app catalog image.":::
+
+2. Create the app catalog site by selecting **Web Application**. 
+3. Select **Create a new app catalog site**, and then select **OK**.
+4. On the **Create App Catalog** page, enter site information.
+
+   > [!NOTE]
+   > You need to use the above created local admin account as site collection administrator.
+   > Ensure using no system account as site admin.
+
+To configure App URLs, follow these steps:
+
+1. From the **Central Administration** site, go to **Apps** and then select **Configure App URLs**.
+
+   :::image type="content" source="../images/configure-app-urls.png" alt-text="This is configure app urls image.":::
 
-1. Install [Node.js v8.17.0](https://nodejs.org/download/release/v8.17.0/)
-1. Install global dependencies
+2. Configure the App ___domain and App prefix.
 
-    ```console
-    npm install [email protected] --global
-    npm install [email protected] --global
-    npm install @microsoft/[email protected] --global
-    ```
+#### Upload, install and add to app catalog
 
-For more information, see [SharePoint Framework development tools and libraries compatibility](compatibility.md).
+For more tutorials about uploading the package to App Catalog and adding the web part to modern page, see [Deploy your client-side web part to a SharePoint page](web-parts/get-started/serve-your-web-part-in-a-sharepoint-page.md). 
 
 ## Determine which version was used for a solution
 
@@ -75,7 +156,7 @@ For more information, see [issue #1002](https://github.com/SharePoint/sp-dev-doc
 
 ## See also
 
-- [SharePoint Framework Overview](sharepoint-framework-overview.md)
-- [SharePoint Server 2019 development platform](../general-development/sharepoint-2019-development-platform.md)
-- [Definitive guide for developers: SharePoint Framework for SharePoint Server 2019](https://www.voitanos.io/blog/definitive-guide-sharepoint-framework-sharepoint-server-2019/)
-- [Definitive guide for developers: SharePoint Framework for SharePoint Server SE](https://www.voitanos.io/blog/definitive-guide-sharepoint-framework-sharepoint-server-subscription-edition/)
+- [SharePoint Framework Overview](sharepoint-framework-overview.md).
+- [SharePoint Server 2019 development platform](../general-development/sharepoint-2019-development-platform.md).
+- [Definitive guide for developers: SharePoint Framework for SharePoint Server 2019](https://www.voitanos.io/blog/definitive-guide-sharepoint-framework-sharepoint-server-2019/).
+- [Definitive guide for developers: SharePoint Framework for SharePoint Server SE](https://www.voitanos.io/blog/definitive-guide-sharepoint-framework-sharepoint-server-subscription-edition/).