Merge pull request SharePoint#9199 from WesleyFive/spfx-onprem-1

Update SPFx dev guidance of SP19 & SPSE to support Node 16

Author: andrewconnell

docs/spfx/sharepoint-2019-and-subscription-edition-support.md

@@ -10,7 +10,7 @@ ms.localizationpriority: high
 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.
+> SharePoint Server Subscription Edition (SE) has all the same dependencies and requirements for the SharePoint Framework (SPFx) as SharePoint Server 2019.
 
 ## Which version of the SharePoint Framework to use
 
@@ -49,16 +49,26 @@ Microsoft recommends using the most recent version of the Yeoman generator for t
 
 1. Install [Node.js v8.17.0](https://nodejs.org/download/release/v8.17.0/).
 
-    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's 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.
-
-    ```json
-    {
-      “dependencies”: {
-         “graceful-fs”: {
-            “version”: “4.2.2”
-          }
-       }
+   SPFx v1.4.1 is also supported on Node.js v12, v14 and v16 (v12.18.1, v14.17.1 and v16.15.0 to be specific), though there are incompatible issues ([gulp v3 is incompatible with Node v12+](https://github.com/gulpjs/gulp/issues/2324), and **node-sass** v4 requires Node.js v14 or below). The workaround to resolve them is to specify the version of the **graceful-fs** component as v4+, and to replace **node-sass** with **sass**. You can manually modify **package-lock.json** or **npm-shrinkwrap.json** and then re-run `npm install`. Or you can create a new **\*.js** file located in the root folder of your project, copy the following code into that file, run `node your_new_js_file` and re-run `npm install`.
+
+    ```JavaScript
+    const fs = require('fs');
+    const lockedVersionFile = 'package-lock.json';
+    // const lockedVersionFile = 'npm-shrinkwrap.json';
+    const lockedVersionJson = JSON.parse(fs.readFileSync(lockedVersionFile));
+    if (lockedVersionJson.packages) {
+        const vinylFSJson = lockedVersionJson.packages["node_modules/vinyl-fs"];
+        if (vinylFSJson && vinylFSJson["dependencies"] && vinylFSJson["dependencies"]["graceful-fs"]) {
+            vinylFSJson["dependencies"]["graceful-fs"] = "npm:[email protected]";
+        }
+ 
+        const gulpSassJson = lockedVersionJson.packages["node_modules/gulp-sass"];
+        console.log(gulpSassJson);
+        if (gulpSassJson && gulpSassJson["dependencies"] && gulpSassJson["dependencies"]["node-sass"]) {
+            gulpSassJson["dependencies"]["node-sass"] = "npm:[email protected]";
+        }
     }
+    fs.writeFileSync(lockedVersionFile, JSON.stringify(lockedVersionJson, undefined, 2));
     ```
 
 1. Install global dependencies
@@ -75,7 +85,7 @@ For more information, see  [SharePoint Framework development tools and librari
 
 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. You can contact SharePoint Server administrator if you don't have appropriate permission to check or configure.
+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. You can contact the SharePoint Server administrator if you don't have appropriate permission to check or configure.
 
 1. Ensure App Management Service and other dependent service applications are configured, see [Configure an environment for apps for SharePoint Server](/sharepoint/administration/configure-an-environment-for-apps-for-sharepoint).
 1. Create and configure App Catalog site, see [Manage the App Catalog in SharePoint Server](/sharepoint/administration/manage-the-app-catalog).
@@ -94,7 +104,7 @@ If you have existing SharePoint Framework solutions and you'd like to confirm wh
 
 ### Impact of Node.js v6, Node.js v8, HTTP1, & HTTP2
 
-Around this the time of the v1.1 release, Node.js was transitioning from Node.js v6.x to v8.x. In this update, Node.js introduced a change where the default HTTP protocol switched from HTTP1 to HTTP2. SPFx v1.1 was written for HTTP1, not HTTP2, so this change affected the local web server for SPFx v1.1 projects.
+Around the time of the v1.1 release, Node.js was transitioning from Node.js v6.x to v8.x. In this update, Node.js introduced a change where the default HTTP protocol switched from HTTP1 to HTTP2. SPFx v1.1 was written for HTTP1, not HTTP2, so this change affected the local web server for SPFx v1.1 projects.
 
 In Node.js v8.x, you can force HTTP1 by setting the following environment variable to instruct Node.js to use HTTP1 instead of the default HTTP2: `NODE_NO_HTTP2=1`. This environment variable only exists in Node.js v8.x. That's why if you're building SPFx solutions for SharePoint Server 2016, you should use Node.js v8.x.