Updated Office UI Fabric tutorial with latest guidance

Author: VesaJuvonen

docs/spfx/web-parts/get-started/use-fabric-react-components.md

@@ -1,6 +1,6 @@
 # Use Office UI Fabric React components in your SharePoint client-side web part
 
-#### **Important:** You must upgrade existing projects to use @microsoft/sp-build-web@1.0.1 or later to use Office UI Fabric React. See instructions at the end of this article.
+> **Important:** You must upgrade existing projects to use @microsoft/sp-build-web@1.0.1 or later to use Office UI Fabric React. Easiest way to achieve this is to ensure that you have latest package by running `npm install -g @microsoft/generator-sharepoint` in your console before completing this tutorial. 
 
 This article describes how to build a simple web part that uses the DocumentCard component of [Office UI Fabric React](https://github.com/OfficeDev/office-ui-fabric-react). Office UI Fabric React is the front-end framework for building experiences for Office and Office 365. Fabric React includes a robust collection of responsive, mobile-first components that make it easy for you to create web experiences using the Office Design Language.
 
@@ -40,10 +40,10 @@ yo @microsoft/sharepoint
 When prompted:
 
 * Accept the default **documentcardexample-webpart** as your solution name and choose **Enter**.
-* Select **Use the current folder** as the ___location for the files.
-* Select **React** as the framework and choose **Enter**.
+* Select **WebPart** as the type of the client-side component and choose **Enter**
 * Use **DocumentCardExample** for your web part name and choose **Enter**.
 * Accept the default **DocumentCardExample description** and choose **Enter**.
+* 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.
 
@@ -102,7 +102,7 @@ The *new modern experiences* in SharePoint use Office UI Fabric and Office UI Fa
 
 Since we chose React as our framework when creating the solution, the generator installed the right version of Office UI Fabric React as well. You can directly import the Fabric components in your react components without any additional work. 
 
->**Note:** With the initial release of the SharePoint Framework, it is recommended to use the Office UI Fabric and Fabric React that ships with the generator. It is not recommended to update the Office UI Fabric and Fabric React packages independently as it might conflict with the already available version in SharePoint and as a result your web part may fail to function as expected. There will be updates on this area after GA.
+>**Note:** With the initial release of the SharePoint Framework, it is recommended to use the Office UI Fabric and Fabric React that ships with the generator. It is not recommended to update the Office UI Fabric and Fabric React packages independently as it might conflict with the already available version in SharePoint and as a result your web part may fail to function as expected.
 
 Open **DocumentCardExample.tsx** from the **src\webparts\documentCardExample\components** folder. 
 
@@ -121,34 +121,34 @@ import {
 Delete the current `render` method and add the following updated `render` method:
 
 ```ts
-public render(): JSX.Element {
-	const previewProps: IDocumentCardPreviewProps = {
-		previewImages: [
-		{
-			previewImageSrc: String(require('document-preview.png')),
-			iconSrc: String(require('icon-ppt.png')),
-			width: 318,
-			height: 196,
-			accentColor: '#ce4b1f'
-		}
-		],
-	};
-
-	return (
-		<DocumentCard onClickHref='http://bing.com'>
-		<DocumentCardPreview { ...previewProps } />
-		<DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx' />
-		<DocumentCardActivity
-			activity='Created Feb 23, 2016'
-			people={
-			[
-				{ name: 'Kat Larrson', profileImageSrc: String(require('avatar-kat.png')) }
-			]
-			}
-			/>
-		</DocumentCard>
-	);
-}
+  public render(): JSX.Element {
+    const previewProps: IDocumentCardPreviewProps = {
+      previewImages: [
+        {
+          previewImageSrc: String(require('./document-preview.png')),
+          iconSrc: String(require('./icon-ppt.png')),
+          width: 318,
+          height: 196,
+          accentColor: '#ce4b1f'
+        }
+      ],
+    };
+
+    return (
+      <DocumentCard onClickHref='http://bing.com'>
+        <DocumentCardPreview { ...previewProps } />
+        <DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx' />
+        <DocumentCardActivity
+          activity='Created Feb 23, 2016'
+          people={
+            [
+              { name: 'Kat Larrson', profileImageSrc: String(require('./avatar-kat.png')) }
+            ]
+          }
+        />
+      </DocumentCard>
+    );
+  }
 ```
 Save the file.
 
@@ -160,21 +160,63 @@ In this code, the DocumentCard component includes some extra sections:
 
 The `previewProps` property includes some properties of the DocumentCardPreview.
 
-Notice the use of relative path with a `require` statement to load images. Currently, you need to use the webpack public path plugin and input the file's relative path from your source file or folder to the `lib` folder. This should be the same as your current working source ___location.
+Notice the use of relative path with a `require` statement to load images. Currently, you need to perform small configuration in the gulpfile.js to enable these images to get processed properly by webpack.
 
-Open **DocumentCardExampleWebPart.ts** from the **src\webparts\documentCardExample** folder. 
+Open **gulpfile.js** from the **root** folder. 
 
-Add the following code at the top of the file to require the webpack public path plugin.
+Add the following code just above the `build.initialize(gulp);` code line.
 
-```ts
-require('set-webpack-public-path!');
+```js
+build.configureWebpack.mergeConfig({  
+    additionalConfiguration: (generatedConfiguration) => {
+        if (build.getConfig().production) {
+            var basePath = build.writeManifests.taskConfig.cdnBasePath;
+            if (!basePath.endsWith('/')) {
+                basePath += '/';
+            }
+            generatedConfiguration.output.publicPath = basePath;
+        }
+        else {
+            generatedConfiguration.output.publicPath = "/dist/";
+        }
+        return generatedConfiguration;
+    }
+});
 ```
 
 Save the file.
 
+Your full **gulpfile.js** file should look as follows.
+
+```js
+'use strict';
+
+const gulp = require('gulp');
+const build = require('@microsoft/sp-build-web');
+
+build.configureWebpack.mergeConfig({  
+    additionalConfiguration: (generatedConfiguration) => {
+        if (build.getConfig().production) {
+            var basePath = build.writeManifests.taskConfig.cdnBasePath;
+            if (!basePath.endsWith('/')) {
+                basePath += '/';
+            }
+            generatedConfiguration.output.publicPath = basePath;
+        }
+        else {
+            generatedConfiguration.output.publicPath = "/dist/";
+        }
+        return generatedConfiguration;
+    }
+});
+
+build.initialize(gulp);
+
+```
+
 ### Copy the image assets
 
-Copy the following images to your **src\webparts\documentCardExample** folder:
+Copy the following images to your **src\webparts\documentCardExample\components** folder:
 
 * [avatar-kat.png](https://github.com/SharePoint/sp-dev-docs/blob/master/assets/avatar-kat.png)
 * [icon-ppt.png](https://github.com/SharePoint/sp-dev-docs/tree/master/assets/icon-ppt.png)
@@ -191,8 +233,3 @@ gulp serve
 In the toolbox, select your `DocumentCardExample` web part to add:
 
 ![Image of a DocumentCard Fabric component in a SharePoint workbench](../../../../images/fabric-components-doc-card-view-ex.png)
-
-
-## Updating an existing project
-
-In your project's `package.json`, update the `@microsoft/sp-build-web` dependency to at least version 1.0.1, delete your project's `node_modules` directory, and run `npm install`.