Updating CDN hosting article for web parts

Author: VesaJuvonen

docs/images/cdn-public-origins.png

@@ -1,7 +1,7 @@
 ---
 title: Host your client-side web part from Office 365 CDN (Hello World part 4)
 description: An easy solution to host your assets directly from your own Office 365 tenant. Can be used for hosting any static assets that are used in SharePoint Online. 
-ms.date: 01/08/2018
+ms.date: 08/20/2018
 ms.prod: sharepoint
 ---
 
@@ -69,23 +69,23 @@ You can also follow these steps by watching this video on the SharePoint PnP You
   SharePoint Framework solutions can automatically benefit from the Office 365 Public CDN as long as it's enabled in your tenant. When CDN is enabled, the `*/CLIENTSIDEASSETS` origin is automatically added as a valid origin.
 
   > [!NOTE]
-  > If you have previously enabled Office 365 CDN, you should re-enable the public CDN so that you have the `*/CLIENTSIDEASSETS`entry added as a valid CDN origin for public CDN. If this entry is not present and the public CDN is enabled in your tenant, bundle requests will contain the token hostname `spclientsideassetlibrary` in their URL, causing the requests to fail.
+  > If you have previously enabled Office 365 CDN, you should re-enable the public CDN so that you have the `*/CLIENTSIDEASSETS`entry added as a valid CDN origin for public CDN. If this entry is not present and the public CDN is enabled in your tenant, bundle requests will contain the token hostname `spclientsideassetlibrary` in their URL, causing the requests to fail. You can add this missing entry by using `Add-SPOTenantCdnOrigin -CdnType Public -OriginUrl */CLIENTSIDEASSETS` command.
 
 6. You can double-check the current setup of your end-points. Execute the following command to get the list of CDN origins from your tenant:
 
   ```powershell
   Get-SPOTenantCdnOrigins -CdnType Public
   ```
 
-  Notice that your newly added origin is listed as a valid CDN origin. Final configuration of the origin takes a while (approximately 15 minutes), so we can continue by creating your test web part, which will be hosted from the origin when the deployment is completed. 
+  Notice that when you enable CDN first time, default configuration to enable default origins will take a while (approximately 15 minutes). Configuration is completed when there's no **(configuration pending)** messages when you execute `Get-SPOTenantCdnOrigins -CdnType Public` command.
 
   ![List of public origins in tenant](../../../images/cdn-public-origins.png)
 
   > [!NOTE]
-  > When the origin is listed without the *(configuration pending)* text, it is ready to be used in your tenant. This is the indication of an on-going configuration between SharePoint Online and the CDN system. 
+  > When the origin is listed without the *(configuration pending)* text, it is ready to be used in your tenant. This is the indication of an on-going configuration between SharePoint Online and the CDN system.
 
 
-## End task in project directory
+## Finalize solution for deployment
 
 1. Switch to the console and make sure you are still in the project directory that you used to set up your web part project.
 
@@ -105,26 +105,24 @@ You can also follow these steps by watching this video on the SharePoint PnP You
 
   ```json
   {
-    "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
+    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
-      "name": "helloworld-webpart-client-side-solution",
-      "id": "4432f33b-5845-4ca0-827e-a8ae68c7b945",
+      "name": "helloword-webpart-client-side-solution",
+      "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
       "version": "1.0.0.0",
       "includeClientSideAssets": true
     },
     "paths": {
-      "zippedPackage": "solution/helloworld-webpart.sppkg"
+      "zippedPackage": "solution/helloword-webpart.sppkg"
     }
   }
-
   ```
 
-The default value for the **includeClientSideAssets** is `true`, which means that static assets are packaged automatically inside of the *.sppkg* files, and you do not need to separately host your assets from an external system. 
+The default value for the **includeClientSideAssets** is `true`, which means that static assets are packaged automatically inside of the *.sppkg* files, and you do not need to separately host your assets from an external system.
 
-If *Office 365 CDN* is enabled, it is used automatically with default settings. If *Office 365 CDN* is not enabled, assets are served from the app catalog site collection. 
+Do **not** change this setting for this exerice, so that assets are automatically hosted when solution is deployed to your tenant.
 
-> [!NOTE]
-> Starting from the SharePoint Framework v1.4, static assets are by default packaged inside of the sppkg package. When a package is deployed in the app catalog, they are automatically hosted either from Office 365 CDN (if enabled) or from an app catalog URL. You can control this behavior with the `includeClientSideAssets` setting in the `package-solution.json` file.
+If *Office 365 CDN* is enabled, it is used automatically with default settings. If *Office 365 CDN* is not enabled, assets are served from the app catalog site collection. This means that if you leave the **includeClientSideAssets** setting `true`, your solution assets are automatically hosted in the tenant.
 
 ## Prepare web part assets to deploy
 
@@ -143,7 +141,7 @@ If *Office 365 CDN* is enabled, it is used automatically with default settings.
   > [!NOTE]
   > If you are interested in what actually got packaged inside of the sppkg file, you can look in the content of the **sharepoint/solution/debug** folder.
 
-3. Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant. 
+3. Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.
 
 4. Because you already deployed the package, you are prompted as to whether to replace the existing package. Select **Replace It**.
 
@@ -172,7 +170,7 @@ If *Office 365 CDN* is enabled, it is used automatically with default settings.
   ![HelloWorld web part bundle coming from public CDN URL in the sources tab of Chrome developer tools](../../../images/cdn-web-part-f12-source.png)
 
 > [!NOTE]
-> If you would not have CDN enabled in your tenant, and the `includeClientSideAssets` setting would be `true`in the **package-solution.json**, the loading URL for the assets would be dynamically updated and pointing directly to the ClientSideAssets folder located in the app catalog site collection. In this example case, the URL would be `https://sppnp.microsoft.com/sites/apps/ClientSideAssets/`.
+> If you would not have CDN enabled in your tenant, and the `includeClientSideAssets` setting would be `true`in the **package-solution.json**, the loading URL for the assets would be dynamically updated and pointing directly to the ClientSideAssets folder located in the app catalog site collection. In this example case, the URL would be `https://sppnp.microsoft.com/sites/apps/ClientSideAssets/`. This change is automatic depending on your tenant settings and it does not require any changes in the actual solution package.
 
 Now you have deployed your custom web part to SharePoint Online and it's being hosted automatically from the Office 365 CDN.
 
@@ -181,5 +179,4 @@ Now you have deployed your custom web part to SharePoint Online and it's being h
 You can load jQuery and jQuery UI and build a jQuery Accordion web part. To continue, see [Add jQueryUI Accordion to your client-side web part](./add-jqueryui-accordion-to-web-part.md).
 
 > [!NOTE]
-> If you find an issue in the documentation or in the SharePoint Framework, report that to SharePoint engineering by using the [issue list at the sp-dev-docs repository](https://github.com/SharePoint/sp-dev-docs/issues). Thanks for your input in advance.
-
+> If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the [issue list at the sp-dev-docs repository](https://github.com/SharePoint/sp-dev-docs/issues) or by adding a comment to this article. Thanks for your input in advance.

docs/images/upload-solution-app-catalog.png

@@ -1,11 +1,10 @@
 ---
 title: Deploy your client-side web part to a SharePoint page (Hello World part 3)
 description: Deploy your client-side web part to SharePoint and see it working on a modern SharePoint page. 
-ms.date: 01/08/2018
+ms.date: 08/20/2018
 ms.prod: sharepoint
 ---
 
-
 # Deploy your client-side web part to a SharePoint page (Hello World part 3)
 
 Ensure that you have completed the procedures in the following articles before you start:
@@ -33,26 +32,25 @@ You can also follow these steps by watching this video on the SharePoint PnP You
 
   Unlike in the Workbench, to use client-side web parts on modern SharePoint server-side pages, you need to deploy and register the web part with SharePoint. First you need to package the web part.
 
-3. Open the **HelloWorldWebPart** web part project in Visual Studio Code, or your preferred IDE.
+3. Open the **HelloWorldWebPart** web part solution in Visual Studio Code, or your preferred IDE.
 
 4. Open **package-solution.json** from the **config** folder.
 
   The **package-solution.json** file defines the package metadata as shown in the following code:
 
   ```json
   {
-    "$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
+    "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
-      "name": "helloworld-webpart-client-side-solution",
-      "id": "4432f33b-5845-4ca0-827e-a8ae68c7b945",
+      "name": "helloword-webpart-client-side-solution",
+      "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
       "version": "1.0.0.0",
       "includeClientSideAssets": true
     },
     "paths": {
-      "zippedPackage": "solution/helloworld-webpart.sppkg"
+      "zippedPackage": "solution/helloword-webpart.sppkg"
     }
   }
-
   ```
 
 5. In the console window, enter the following command to package your client-side solution that contains the web part:
@@ -73,14 +71,13 @@ The package uses SharePoint Feature to package your web part. By default, the gu
 
 You can view the raw package contents in the **sharepoint/debug** folder. 
 
-The contents are then packaged into an **.sppkg** file. The package format is very similar to a SharePoint Add-ins package and uses Microsoft Open Packaging Conventions to package your solution. 
+The contents are then packaged into an **.sppkg** file. The package format is very similar to a SharePoint add-ins package and uses Microsoft Open Packaging Conventions to package your solution.
 
-The JavaScript files, CSS, and other assets are packaged inside of the package when the `--ship` option is used. In this case, however, we will first test deployment and capabilities by hosting JavaScript files from localhost. This deployment option is explained in the next tutorial. 
+The JavaScript files, CSS, and other assets are packaged inside of the package when the `--ship` option is used. In this tutorial, however, we will first test deployment and capabilities by hosting JavaScript files from localhost. Automated packaging and hosting option is explained in the next tutorial.
 
 > [!NOTE]
 > Starting from the SharePoint Framework v1.4, static assets are by default packaged inside of the sppkg package. When a package is deployed in the app catalog, the assets are automatically hosted either from Office 365 CDN (if enabled) or from an app catalog URL. You can control this behavior with the `includeClientSideAssets` setting in the `package-solution.json` file.
 
-
 ## Deploy the HelloWorld package to app catalog
 
 Next, you need to deploy the package that was generated to the app catalog.
@@ -92,18 +89,20 @@ Next, you need to deploy the package that was generated to the app catalog.
 
 2. Upload or drag and drop the **helloworld-webpart.sppkg** to the app catalog.
 
-  ![Upload solution to app catalog](../../../images/upload-solution-app-catalog.png) 
+  ![Upload solution to app catalog](../../../images/upload-solution-app-catalog.png)
 
   This deploys the client-side solution package. Because this is a full trust client-side solution, SharePoint displays a dialog and asks you to trust the client-side solution to deploy.
 
   ![Trust client-side solution deployment](../../../images/sp-app-deploy-trust.png) 
-	
+
 3. Select **Deploy**.
 
+Notice that you can see if there's any exceptions or issues in the package by looking the *App Package Error Message* column in the app catalog.
+
 
 ## Install the client-side solution on your site
 
-1. Go to your developer site collection.
+1. Go to your developer site collection or site collection which you want to use for testing
 
 2. Select the gears icon on the top nav bar on the right, and then select **Add an app** to go to your Apps page.
 
@@ -121,7 +120,7 @@ The **Site Contents** page shows you the installation status of your client-side
 
 ## Preview the web part on a SharePoint page
 
-Now that you have deployed and installed the client-side solution, add the web part to a SharePoint page. Remember that resources such as JavaScript and CSS are available from the local computer.
+Now that you have deployed and installed the client-side solution, add the web part to a SharePoint page. Remember that resources such as JavaScript and CSS are available from the local computer, so rendering of the web parts will fail unless your localhost is running. 
 
 1. Open the `<your-webpart-guid>.manifest.json` from the `\dist` folder.
 
@@ -133,7 +132,7 @@ Now that you have deployed and installed the client-side solution, add the web p
   ]
   ```
 
-2. Before adding the web part to a SharePoint server-side page, run the local server.
+2. **Before** adding the web part to a SharePoint server-side page, run the local server.
 
 3. In the console window that has the **helloworld-webpart** project directory, run the gulp task to start serving from localhost:
 
@@ -142,20 +141,23 @@ Now that you have deployed and installed the client-side solution, add the web p
   ```
 
   > [!NOTE]
-  > `--nobrowser` will not automatically launch the SharePoint Workbench.
+  > `--nobrowser` will not automatically launch the SharePoint Workbench as that's not needed in this case as we will host the web part directly in SharePoint page.
 
 ## Add the HelloWorld web part to modern page
 
 1. In your browser, go to your site where the solution was just installed.
-	
+
 2. Select the gears icon in the top nav bar on the right, and then select **Add a page**.
-	
-3. Edit the page. 
+
+3. Edit the page.
 
 4. Open the web part picker and select your **HelloWorld** web part.
-		
+
+  > [!NOTE]
+  > Screenshots are from a site which is using modern experience.
+
 The web part assets are loaded from the local environment. To load the scripts hosted on your local computer, you need to enable the browser to load unsafe scripts. Depending on the browser you are using, make sure you enable loading unsafe scripts for this session.
-	
+
 You should see the **HelloWorld** web part you built in the previous article that retrieves lists from the current site. 
 
 ![Hello World web part in modern page](../../../images/sp-wp-modern-page.png)
@@ -167,22 +169,22 @@ You should see the **HelloWorld** web part you built in the previous article tha
   ![Edit web part](../../../images/edit-webpart-modern-page.png)
 
   This is the same property pane you built and previewed in the Workbench.
-	
+
 2. Edit the **Description** property, and enter **Client-side web parts are awesome!**
-	
+
   ![Hello World web part in modern page](../../../images/sp-wp-modern-page-pp.png)
 
 3. Notice that you still have the same behaviors such as a reactive pane where the web part is updated as you type.
 
 4. Select the **x** icon to close the client-side property pane.
-		
+
 5. On the toolbar, select **Save and close** to save the page.
 
 ## Next steps
 
-Congratulations! You have deployed a client-side web part to a modern SharePoint page. 
+**Congratulations!** You have deployed a client-side web part to a modern SharePoint page.
 
-You can continue building out your Hello World web part in the next topic [Hosting client-side web part from Office 365 CDN](./hosting-webpart-from-office-365-cdn.md), where you will learn how to deploy and load the web part assets from an Office 365 CDN instead of localhost.
+You can continue building out your Hello World web part in the next topic [Hosting client-side web part from Office 365 CDN](./hosting-webpart-from-office-365-cdn.md), where you will learn how to deploy and load the web part assets from an Office 365 CDN instead of localhost, which means that you are preparing this solution for shipping or using it in production environment.
 
 > [!NOTE]
-> If you find an issue in the documentation or in the SharePoint Framework, report that to SharePoint engineering by using the [issue list at the sp-dev-docs repository](https://github.com/SharePoint/sp-dev-docs/issues). Thanks for your input in advance.
+> If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the [issue list at the sp-dev-docs repository](https://github.com/SharePoint/sp-dev-docs/issues) or by adding a comment to this article. Thanks for your input in advance.