Added npm shrinkwrap to all tutorials (SharePoint#960)

waldekmastykarz · VesaJuvonen · commit 0a39da6014ca · 2017-10-20T09:37:40.000-04:00
diff --git a/docs/spfx/extensions/get-started/build-a-hello-world-extension.md b/docs/spfx/extensions/get-started/build-a-hello-world-extension.md
@@ -54,7 +54,13 @@ This article describes how to create your first Hello World SharePoint Framework
 
     For information about troubleshooting any errors, see [Known issues](../../known-issues-and-common-questions.md).
 
-6. When the solution scaffolding is complete, type the following into the console to start Visual Studio Code.
+6. Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+    ```sh
+    npm shrinkwrap
+    ```
+
+7. Next, type the following into the console to start Visual Studio Code.
 
     ```
     code .
@@ -66,7 +72,7 @@ This article describes how to create your first Hello World SharePoint Framework
 
     ![SharePoint Framework solution opened after initial scaffolding](../../../images/ext-app-vscode-solution-structure.png)
 
-7. Open **HelloWorldApplicationCustomizer.manifest.json** in the src\extensions\helloWorld folder.
+8. Open **HelloWorldApplicationCustomizer.manifest.json** in the src\extensions\helloWorld folder.
 
     This file defines your extension type and a unique identifier for your extension. You’ll need this ID later when you debug and deploy your extension to SharePoint.
 
diff --git a/docs/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api.md b/docs/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api.md
@@ -52,7 +52,13 @@ This article describes how to create your first ListView Command Set Extension.
 
     For information about troubleshooting any errors, see [Known issues](../../known-issues-and-common-questions.md).
 
-6. When the solution scaffolding is complete, type the following into the console to start Visual Studio Code.
+6. Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+    ```sh
+    npm shrinkwrap
+    ```
+
+7. Next, type the following into the console to start Visual Studio Code.
 
     ```
     code .
@@ -64,7 +70,7 @@ This article describes how to create your first ListView Command Set Extension.
 
     ![SharePoint Framework solution opened after initial scaffolding](../../../images/ext-com-vscode-solution-structure.png)
 
-7. Open **HelloWorldCommandSet.manifest.json** in the **src\extensions\helloWorld** folder.
+8. Open **HelloWorldCommandSet.manifest.json** in the **src\extensions\helloWorld** folder.
 
     This file defines your extension type and a unique identifier `id` for your extension. You’ll need this unique identifier later when debugging and deploying your extension to SharePoint.
 
diff --git a/docs/spfx/extensions/get-started/building-simple-field-customizer.md b/docs/spfx/extensions/get-started/building-simple-field-customizer.md
@@ -52,8 +52,14 @@ This article describes how to create your first Field Customizer Extension. You
     ![SharePoint client-side solution scaffolded successfully](../../../images/ext-field-yeoman-complete.png)
     
     For information about troubleshooting any errors, see [Known issues](../../known-issues-and-common-questions.md).
+
+6. Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+    ```sh
+    npm shrinkwrap
+    ```
     
-6. When the solution scaffolding is complete, type the following into the console to start Visual Studio Code.
+7. Next, type the following into the console to start Visual Studio Code.
     
     ```
     code .
@@ -65,7 +71,7 @@ This article describes how to create your first Field Customizer Extension. You
 
     ![SharePoint Framework solution opened after initial scaffolding](../../../images/ext-field-vscode-solution-structure.png)
 
-7. Open **HelloWorldFieldCustomizer.manifest.json** in the **src\extensions\helloWorld** folder.
+8. Open **HelloWorldFieldCustomizer.manifest.json** in the **src\extensions\helloWorld** folder.
 
     This file defines your extension type and a unique identifier `id` for your extension. You’ll need this unique identifier later when debugging and deploying your extension to SharePoint.
 
diff --git a/docs/spfx/extensions/guidance/using-custom-dialogs-with-spfx.md b/docs/spfx/extensions/guidance/using-custom-dialogs-with-spfx.md
@@ -52,15 +52,21 @@ The next set of prompts will ask for specific information about your extension:
 
 ![Yeoman SharePoint generator prompts to create an extension solution](../../../images/ext-com-dialog-yeoman-prompts.png)
 
-At this point, Yeoman will install the required dependencies and scaffold the solution files along with the *DialogDemo* extension. This might take a few minutes. 
+At this point, Yeoman will install the required dependencies and scaffold the solution files along with the *DialogDemo* extension. This might take a few minutes.
 
 When the scaffold is complete, you should see the following message indicating a successful scaffold:
 
 ![SharePoint client-side solution scaffolded successfully](../../../images/ext-com-dialog-yeoman-complete.png)
 
 >**Note:** For information about troubleshooting any errors, see [Known issues](../../known-issues-and-common-questions.md).
 
-When the scaffolding is complete, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots, but you can use any editor you prefer. To open the folder in Visual Studio Code, use the following command in the console:
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots, but you can use any editor you prefer. To open the folder in Visual Studio Code, use the following command in the console:
 
 ```sh
 code .
diff --git a/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md b/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md
@@ -67,7 +67,13 @@ The next set of prompts will ask for specific information about your web part:
 
 At this point, Yeoman will install the required dependencies and scaffold the solution files. This might take a few minutes. Yeoman will scaffold the project to include your **jQueryWebPart** web part as well.
 
-In the console, type the following to open the web part project in Visual Studio Code:
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, type the following to open the web part project in Visual Studio Code:
 
 ```
 code .
diff --git a/docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md b/docs/spfx/web-parts/get-started/build-a-hello-world-web-part.md
@@ -58,7 +58,7 @@ The next set of prompts will ask for specific information about your web part:
 
 ![Yeoman SharePoint generator prompts to create a web part client-side solution](../../../images/yeoman-sp-prompts.png)
 
-At this point, Yeoman will install the required dependencies and scaffold the solution files along with the **HelloWorld** web part. This might take a few minutes. 
+At this point, Yeoman will install the required dependencies and scaffold the solution files along with the **HelloWorld** web part. This might take a few minutes.
 
 When the scaffold is complete, you should see the following message indicating a successful scaffold:
 
@@ -73,7 +73,7 @@ Because the SharePoint client-side solution is HTML/TypeScript based, you can us
 * [Atom](https://atom.io)
 * [Webstorm](https://www.jetbrains.com/webstorm)
 
-SharePoint Framework documentation uses Visual Studio code in the steps and examples. Visual Studio Code is a lightweight but powerful source code editor from Microsoft which runs on your desktop and is available for Windows, Mac and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.. 
+SharePoint Framework documentation uses Visual Studio code in the steps and examples. Visual Studio Code is a lightweight but powerful source code editor from Microsoft which runs on your desktop and is available for Windows, Mac and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.
    
 ## Preview the web part
 To preview your web part, build and run it on a local web server. The client-side toolchain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment, your browser will report a certificate error. The SPFx toolchain comes with a developer certificate that you can install for building web parts.
diff --git a/docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md b/docs/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn.md
@@ -82,8 +82,14 @@ When prompted:
 ![Yeoman generator questions around the newly created web part](../../../images/cdn-create-webpart-yo.png)
 
 At this point, Yeoman will scaffold the solution files and install the required dependencies. This might take a few minutes. Yeoman will scaffold the project to include your custom web part as well.
-	
-When the scaffold is complete, in the console, type the following to open the web part project in Visual Studio Code:
+
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, type the following to open the web part project in Visual Studio Code:
 
 ```
 code .
diff --git a/docs/spfx/web-parts/get-started/provision-sp-assets-from-package.md b/docs/spfx/web-parts/get-started/provision-sp-assets-from-package.md
@@ -54,7 +54,13 @@ The next set of prompts will ask for specific information about your web part:
 
 At this point, Yeoman will install the required dependencies and scaffold the solution files. This might take a few minutes. Yeoman will scaffold the project to include your **AssetDeployment** web part as well.
 
-In the console, type the following to open the web part project in Visual Studio Code:
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, type the following to open the web part project in Visual Studio Code:
 
 ```
 code .
diff --git a/docs/spfx/web-parts/get-started/use-fabric-react-components.md b/docs/spfx/web-parts/get-started/use-fabric-react-components.md
@@ -59,8 +59,14 @@ The next set of prompts will ask for specific information about your web part:
 * Select **React** as the framework and choose **Enter**.
 
 At this point, Yeoman will install the required dependencies and scaffold the solution files. This might take a few minutes. Yeoman will scaffold the project to include your DocumentCardExample web part as well.
-	
-When the scaffold is complete, in the console, type the following to open the web part project in Visual Studio Code:
+
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, type the following to open the web part project in Visual Studio Code:
 
 ```
 code .
diff --git a/docs/spfx/web-parts/guidance/build-client-side-web-parts-with-angular-1-x.md b/docs/spfx/web-parts/guidance/build-client-side-web-parts-with-angular-1-x.md
@@ -44,7 +44,13 @@ When prompted, define values as follows:
 
 ![SharePoint Framework Yeoman generator with the default choices](../../../images/ng-intro-yeoman-generator.png)
 
-Once the scaffolding completes, open your project folder in your code editor. In this tutorial, you will use Visual Studio Code.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. In this tutorial, you will use Visual Studio Code.
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/ng-intro-project-visual-studio-code.png)
 
diff --git a/docs/spfx/web-parts/guidance/build-custom-property-pane-controls.md b/docs/spfx/web-parts/guidance/build-custom-property-pane-controls.md
@@ -47,7 +47,13 @@ When prompted, enter the following values:
 
 ![SharePoint Framework Yeoman generator with the default choices](../../../images/custom-property-pane-control-yeoman.png)
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/custom-property-pane-control-visual-studio-code.png)
 
diff --git a/docs/spfx/web-parts/guidance/connect-to-sharepoint-using-jsom.md b/docs/spfx/web-parts/guidance/connect-to-sharepoint-using-jsom.md
@@ -42,7 +42,13 @@ When prompted, enter the following values:
 
 ![The SharePoint Framework Yeoman generator with the default choices](../../../images/tutorial-spjsom-yo-sharepoint.png)
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
 
 ![The SharePoint Framework project open in Visual Studio Code](../../../images/tutorial-spjsom-vscode.png)
 
diff --git a/docs/spfx/web-parts/guidance/localize-web-parts.md b/docs/spfx/web-parts/guidance/localize-web-parts.md
@@ -46,7 +46,13 @@ When prompted, enter the following values:
 
 ![The SharePoint Framework Yeoman generator with the default choices](../../../images/localization-yo-sharepoint.png)
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
 
 ![The SharePoint Framework project open in Visual Studio Code](../../../images/localization-visual-studio-code.png)
 
diff --git a/docs/spfx/web-parts/guidance/migrate-angular-1-x-applications-to-sharepoint-framework.md b/docs/spfx/web-parts/guidance/migrate-angular-1-x-applications-to-sharepoint-framework.md
@@ -51,7 +51,13 @@ When prompted, define values as follows:
 
 ![SharePoint Framework Yeoman generator with the default choices](../../../images/ng-migration-yeoman-generator.png)
 
-Once the scaffolding completes, open your project folder in your code editor. In this tutorial, you will use Visual Studio Code.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. In this tutorial, you will use Visual Studio Code.
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/ng-migration-project-visual-studio-code.png)
 
diff --git a/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx.md b/docs/spfx/web-parts/guidance/migrate-jquery-datatables-script-to-spfx.md
@@ -159,7 +159,13 @@ When prompted, define values as follows:
 
 ![SharePoint Framework Yeoman generator with the default choices](../../../images/datatables-yeoman.png)
 
-Once the scaffolding completes, open your project folder in your code editor. In this tutorial, you will use Visual Studio Code.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. In this tutorial, you will use Visual Studio Code.
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/datatables-vscode.png)
 
diff --git a/docs/spfx/web-parts/guidance/migrate-jquery-fullcalendar-script-to-spfx.md b/docs/spfx/web-parts/guidance/migrate-jquery-fullcalendar-script-to-spfx.md
@@ -196,7 +196,13 @@ When prompted, define values as follows:
 
 ![SharePoint Framework Yeoman generator with the default choices](../../../images/fullcalendar-yeoman.png)
 
-Once the scaffolding completes, open your project folder in your code editor. In this tutorial, you will use Visual Studio Code.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. In this tutorial, you will use Visual Studio Code.
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/fullcalendar-vscode.png)
 
diff --git a/docs/spfx/web-parts/guidance/reference-third-party-css-styles.md b/docs/spfx/web-parts/guidance/reference-third-party-css-styles.md
@@ -45,7 +45,13 @@ When prompted, enter the following values:
 
 ![The SharePoint Framework Yeoman generator with the default choices](../../../images/thirdpartycss-yeoman.png)
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
 
 ![The SharePoint Framework project open in Visual Studio Code](../../../images/thirdpartycss-visual-studio-code.png)
 
diff --git a/docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md b/docs/spfx/web-parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md
@@ -132,7 +132,13 @@ When prompted, enter the following values:
 
 ![SharePoint Framework Yeoman generator with the default choices](../../../images/preconfiguredentries-yeoman.png)
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/preconfiguredentries-visual-studio-code.png)
 
diff --git a/docs/spfx/web-parts/guidance/tutorial-share-data-between-web-parts-global-variable.md b/docs/spfx/web-parts/guidance/tutorial-share-data-between-web-parts-global-variable.md
@@ -46,7 +46,13 @@ When prompted, use the following values:
 
 ![The SharePoint Framework Yeoman generator with the default choices](../../../images/tutorial-sharingdata-yo-sharepoint-recent-documents.png)
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots, but you can use any editor you prefer.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots, but you can use any editor you prefer.
 
 ![The SharePoint Framework project open in Visual Studio Code](../../../images/tutorial-sharingdata-vscode.png)
 
diff --git a/docs/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties.md b/docs/spfx/web-parts/guidance/use-cascading-dropdowns-in-web-part-properties.md
@@ -45,7 +45,13 @@ When prompted, enter the following values:
 
 ![SharePoint Framework Yeoman generator with the default choices](../../../images/react-cascading-dropdowns-yo-sharepoint.png)
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/react-cascading-dropdowns-visual-studio-code.png)
 
diff --git a/docs/spfx/web-parts/guidance/use-sp-pnp-js-with-spfx-web-parts.md b/docs/spfx/web-parts/guidance/use-sp-pnp-js-with-spfx-web-parts.md
@@ -48,7 +48,13 @@ Enter the following values when prompted during the setup of the new project:
 
 ![Completed Project Scaffolding](../../../images/sp-pnp-js-guide-completed-setup.png)
 
-Once the scaffolding completes, open the project in the code editor of your choosing. The screenshots shown here demonstrate [Visual Studio Code](https://code.visualstudio.com/). To open the directory within Visual Studio Code, enter the following in the console:
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open the project in the code editor of your choosing. The screenshots shown here demonstrate [Visual Studio Code](https://code.visualstudio.com/). To open the directory within Visual Studio Code, enter the following in the console:
 
 ```sh
 code .
diff --git a/docs/spfx/web-parts/guidance/validate-web-part-property-values.md b/docs/spfx/web-parts/guidance/validate-web-part-property-values.md
@@ -41,7 +41,13 @@ When prompted, enter the following values:
 
 ![SharePoint Framework Yeoman generator with the default choices](../../../images/property-validation-yeoman-generator.png)
 
-Once the scaffolding completes, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
+Once the scaffolding completes, lock down the version of the project dependencies by running the following command:
+
+```sh
+npm shrinkwrap
+```
+
+Next, open your project folder in your code editor. This article uses Visual Studio Code in the steps and screenshots but you can use any editor you prefer.
 
 ![SharePoint Framework project open in Visual Studio Code](../../../images/property-validation-visual-studio-code.png)
 
