New SPFx assets advanced sample and minor readme fix (#243)

* react-provision-assets sample added. provides advanced techniques for provisioning lists, libraries, fields and more.

* README drop icon changed to GA

I updated the drop icon from drop4 to GA so not to cause confusion when someone is looking at the README.

* README file updated

samples/react-multipage/README.md

@@ -11,7 +11,7 @@ Sample poll web part allowing users to vote and view the results.
 ![Poll web part built on the SharePoint Framework using React](./assets/poll-preview.gif)
 
 ## Used SharePoint Framework Version
-![drop](https://img.shields.io/badge/drop-drop4-red.svg)
+![drop](https://img.shields.io/badge/drop-GA-green.svg)
 
 ## Applies to
 
@@ -83,4 +83,4 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
 - reading and updating SharePoint list items using the SharePoint Framework HttpClient
 - showing charts using [Chart.js](http://www.chartjs.org) and [React wrapper for Chart.js](https://github.com/gor181/react-chartjs-2)
 
-<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-multipage" />
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-multipage" />

samples/react-provision-assets/.editorconfig

@@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2

samples/react-provision-assets/.gitattributes

@@ -0,0 +1 @@
+* text=auto

samples/react-provision-assets/.gitignore

@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+solution
+temp
+*.sppkg
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts

samples/react-provision-assets/.npmignore

@@ -0,0 +1,14 @@
+# Folders
+.vscode
+coverage
+node_modules
+sharepoint
+src
+temp
+
+# Files
+*.csproj
+.git*
+.yo-rc.json
+gulpfile.js
+tsconfig.json

samples/react-provision-assets/.yo-rc.json

@@ -0,0 +1,8 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.1.1",
+    "libraryName": "react-provision-assets-webpart",
+    "libraryId": "e64d001b-d6c7-4326-8d5f-965a7a086266",
+    "environment": "spo"
+  }
+}

samples/react-provision-assets/README.md

@@ -0,0 +1,69 @@
+# Provision SharePoint Assets with the SPFx solution package #
+
+## Summary
+
+This sample shows how we can provision Document Library, Custom List, Web and List PropertyBag properties, Site Columns, Content Types, Images, Site Page with the SFPx Client side webpart and even prepopulated list and library items along with the SPFx solution package. All of the components can be deployed at once with the SPFx webpart when the app is added to a SharePoint site. It also contains custom list and document library xml schemas.
+
+![The yammer search web part displayed in SharePoint online](./assets/spfx-provision-assets.gif)
+
+
+## Used SharePoint Framework Version 
+![drop](https://img.shields.io/badge/drop-GA-green.svg)
+
+## Applies to
+
+* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
+* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
+ 
+  ** The SPFx webpart will work in local workbench, but not the assets. They can be provisioned only when the app is deployed since they are SharePoint specific.
+
+## Prerequisites
+
+- Office 365 subscription with SharePoint Online.
+- SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.
+- Tenant admin access to the Office 365 subscription and [App Catalog](https://support.office.com/en-ie/article/Use-the-App-Catalog-to-make-custom-business-apps-available-for-your-SharePoint-Online-environment-0b6ab336-8b83-423f-a06b-bcc52861cba0) already setup.
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+react-provision-assets | Velin Georgiev ([@VelinGeorgiev](https://twitter.com/velingeorgiev))
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+0.0.1|June 17, 2017 | Initial commit
+
+## Disclaimer
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository.
+- Open the command line, navigate to the web part folder and execute:
+    - `npm i`
+    - `gulp serve --nobrowser`
+    - `gulp package-solution`
+    - [Deploy the package](https://dev.office.com/sharepoint/docs/spfx/enterprise-guidance#management-capabilities-of--sharepoint-framework-solutions) to the app catalog
+    - [Add the app](https://support.office.com/en-ie/article/Add-an-app-to-a-site-ef9c0dbd-7fe1-4715-a1b0-fe3bc81317cb?ui=en-US&rs=en-IE&ad=IE) to a site
+
+## Features
+
+This Web Part illustrates the following concepts on top of the SharePoint Framework:
+
+- SPFx provisioning based on the following Elements.xml nodes:
+    - Custom List Instance with custom list schema.
+    - Document Library Instance with custom list schema.
+    - Content Types.
+    - Fields.
+    - Module with Images.
+    - Module with Site Page.
+    - PropertyBag properties.
+    - Pre-populated List Data Rows in the Elements.xml.
+    - Onet.xml specific tokens.
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-provision-assets" />
+

samples/react-provision-assets/config/config.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    {
+      "entry": "./lib/webparts/reactProvisionAssets/ReactProvisionAssetsWebPart.js",
+      "manifest": "./src/webparts/reactProvisionAssets/ReactProvisionAssetsWebPart.manifest.json",
+      "outputPath": "./dist/react-provision-assets.bundle.js"
+    }
+  ],
+  "externals": {},
+  "localizedResources": {
+    "reactProvisionAssetsStrings": "webparts/reactProvisionAssets/loc/{locale}.js"
+  }
+}

samples/react-provision-assets/config/copy-assets.json

@@ -0,0 +1,3 @@
+{
+  "deployCdnPath": "temp/deploy"
+}

samples/react-provision-assets/config/deploy-azure-storage.json

@@ -0,0 +1,6 @@
+{
+  "workingDir": "./temp/deploy/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "react-provision-assets",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-provision-assets/config/package-solution.json

@@ -0,0 +1,28 @@
+{
+  "solution": {
+    "name": "react-provision-assets-client-side-solution",
+    "id": "e64d001b-d6c7-4326-8d5f-965a7a086267",
+    "version": "1.0.0.0",
+    "features": [{
+      "title": "react-provision-assets-client-side-solution",
+      "description": "react-provision-assets-client-side-solution",
+      "id": "523fe887-ced5-4036-b564-8dad5c6c6e22",
+      "version": "1.0.0.0",
+      "assets": {        
+        "elementManifests": [
+          "elements.xml"
+        ],
+        "elementFiles":[
+          "listSchema.xml",
+          "librarySchema.xml",
+          "Image1.jpg",
+          "Image2.png",
+          "WebPartSitePage.aspx"
+        ]
+      }
+    }]
+  },
+  "paths": {
+    "zippedPackage": "solution/react-provision-assets.sppkg"
+  }
+}

samples/react-provision-assets/config/serve.json

@@ -0,0 +1,9 @@
+{
+  "port": 4321,
+  "initialPage": "https://localhost:5432/workbench",
+  "https": true,
+  "api": {
+    "port": 5432,
+    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  }
+}

samples/react-provision-assets/config/tslint.json

@@ -0,0 +1,45 @@
+{
+  // Display errors as warnings
+  "displayAsWarning": true,
+  // The TSLint task may have been configured with several custom lint rules
+  // before this config file is read (for example lint rules from the tslint-microsoft-contrib
+  // project). If true, this flag will deactivate any of these rules.
+  "removeExistingRules": true,
+  // When true, the TSLint task is configured with some default TSLint "rules.":
+  "useDefaultConfigAsBase": false,
+  // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
+  // which are active, other than the list of rules below.
+  "lintConfig": {
+    // Opt-in to Lint rules which help to eliminate bugs in JavaScript
+    "rules": {
+      "class-name": false,
+      "export-name": false,
+      "forin": false,
+      "label-position": false,
+      "member-access": true,
+      "no-arg": false,
+      "no-console": false,
+      "no-construct": false,
+      "no-duplicate-case": true,
+      "no-duplicate-variable": true,
+      "no-eval": false,
+      "no-function-expression": true,
+      "no-internal-module": true,
+      "no-shadowed-variable": true,
+      "no-switch-case-fall-through": true,
+      "no-unnecessary-semicolons": true,
+      "no-unused-expression": true,
+      "no-unused-imports": true,
+      "no-use-before-declare": true,
+      "no-with-statement": true,
+      "semicolon": true,
+      "trailing-comma": false,
+      "typedef": false,
+      "typedef-whitespace": false,
+      "use-named-parameter": true,
+      "valid-typeof": true,
+      "variable-name": false,
+      "whitespace": false
+    }
+  }
+}

samples/react-provision-assets/config/write-manifests.json

@@ -0,0 +1,3 @@
+{
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}

samples/react-provision-assets/gulpfile.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const gulp = require('gulp');
+const build = require('@microsoft/sp-build-web');
+
+build.initialize(gulp);

samples/react-provision-assets/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-provision-assets",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "dependencies": {
+    "@microsoft/sp-core-library": "~1.1.0",
+    "@microsoft/sp-webpart-base": "~1.1.1",
+    "@types/webpack-env": ">=1.12.1 <1.14.0",
+    "react": "15.4.2",
+    "react-dom": "15.4.2",
+    "@types/react": "0.14.46",
+    "@types/react-dom": "0.14.18",
+    "@types/react-addons-shallow-compare": "0.14.17",
+    "@types/react-addons-update": "0.14.14",
+    "@types/react-addons-test-utils": "0.14.15"
+  },
+  "devDependencies": {
+    "@microsoft/sp-build-web": "~1.1.0",
+    "@microsoft/sp-module-interfaces": "~1.1.0",
+    "@microsoft/sp-webpart-workbench": "~1.1.0",
+    "gulp": "~3.9.1",
+    "@types/chai": ">=3.4.34 <3.6.0",
+    "@types/mocha": ">=2.2.33 <2.6.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  }
+}

samples/react-provision-assets/sharepoint/assets/WebPartSitePage.aspx

@@ -0,0 +1,13 @@
+<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebControls.ClientSidePage, Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %><%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
+<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head>
+<!--[if gte mso 9]><SharePoint:CTFieldRefs runat=server Prefix="mso:" FieldList="FileLeafRef,ClientSideApplicationId,PageLayoutType,CanvasContent1,BannerImageUrl,BannerImageOffset,PromotedState,FirstPublishedDate,LayoutWebpartsContent"><xml>
+<mso:CustomDocumentProperties>
+<mso:PageLayoutType msdt:dt="string">Article</mso:PageLayoutType>
+<mso:CanvasContent1 msdt:dt="string">&lt;div&gt;&lt;div data-sp-canvascontrol=&quot;&quot; data-sp-canvasdataversion=&quot;1.0&quot; data-sp-controldata=&quot;&amp;#123;&amp;quot;controlType&amp;quot;&amp;#58;3,&amp;quot;webPartId&amp;quot;&amp;#58;&amp;quot;e89b5ad5-9ab5-4730-a66b-e1f68994598c&amp;quot;,&amp;quot;id&amp;quot;&amp;#58;&amp;quot;8bba86eb-3174-4917-b2b8-417af1102351&amp;quot;&amp;#125;&quot;&gt;&lt;div data-sp-webpart=&quot;&quot; data-sp-webpartdataversion=&quot;1.0&quot; data-sp-webpartdata=&quot;&amp;#123;&amp;quot;id&amp;quot;&amp;#58;&amp;quot;e89b5ad5-9ab5-4730-a66b-e1f68994598c&amp;quot;,&amp;quot;instanceId&amp;quot;&amp;#58;&amp;quot;8bba86eb-3174-4917-b2b8-417af1102351&amp;quot;,&amp;quot;title&amp;quot;&amp;#58;&amp;quot;ReactProvisionAssets&amp;quot;,&amp;quot;description&amp;quot;&amp;#58;&amp;quot;ReactProvisionAssets description&amp;quot;,&amp;quot;dataVersion&amp;quot;&amp;#58;&amp;quot;1.0&amp;quot;,&amp;quot;properties&amp;quot;&amp;#58;&amp;#123;&amp;quot;description&amp;quot;&amp;#58;&amp;quot;ReactProvisionAssets&amp;quot;&amp;#125;&amp;#125;&quot;&gt;&lt;div data-sp-componentid=&quot;&quot;&gt;e89b5ad5-9ab5-4730-a66b-e1f68994598c&lt;/div&gt;&lt;div data-sp-htmlproperties=&quot;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</mso:CanvasContent1>
+<mso:ContentTypeId msdt:dt="string">0x0101009D1CB255DA76424F860D91F20E6C4118</mso:ContentTypeId>
+<mso:ClientSideApplicationId msdt:dt="string">b6917cb1-93a0-4b97-a84d-7cf49975d4ec</mso:ClientSideApplicationId>
+<mso:PromotedState msdt:dt="string">0</mso:PromotedState>
+<mso:BannerImageUrl msdt:dt="string">/_layouts/15/images/sitepagethumbnail.png, /_layouts/15/images/sitepagethumbnail.png</mso:BannerImageUrl>
+</mso:CustomDocumentProperties>
+</xml></SharePoint:CTFieldRefs><![endif]-->
+<title>WebPartSitePage</title></head>

samples/react-provision-assets/sharepoint/assets/elements.xml

@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
+    <!-- List of possible elements expected: 
+        'CustomAction, ClientWebPart, ClientSideComponent, 
+        Field, ContentType, ListInstance, Module, PropertyBag' 
+    -->
+
+    <!-- Upload Site Page with SPFx webpart -->
+    <Module Name="WebPartSitePage" Url="SitePages">
+        <File Path="WebPartSitePage.aspx" Url="WebPartSitePage.aspx" Type="GhostableInLibrary" >
+        </File>
+    </Module>
+
+    <!-- SPFxDescription Site Column -->
+    <Field ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}" 
+           Name="SPFxDescription" 
+           DisplayName="Description" 
+           StaticName="SPFxDescription" 
+           Group="SPFx Site Columns" 
+           Type="Note" 
+           Required="FALSE" 
+           EnforceUniqueValues="FALSE" 
+           Indexed="FALSE" 
+           NumLines="8" 
+           RichText="TRUE" 
+           RichTextMode="FullHtml" 
+           IsolateStyles="TRUE" 
+           Sortable="FALSE" 
+           />
+    
+    <!-- SPFxImage Site Column -->
+    <Field ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}" 
+           Name="SPFxImage" 
+           DisplayName="Image" 
+           StaticName="SPFxImage" 
+           Group="SPFx Site Columns" 
+           Type="URL" 
+           Required="FALSE" 
+           EnforceUniqueValues="FALSE" 
+           Indexed="FALSE" 
+           Format="Hyperlink" 
+        />
+
+    <!-- Parent ContentType: Item (0x0100) -->
+    <ContentType ID="0x0100CEADAD40C6630B489BDF172555628DA0"
+                 Name="SPFxItem" 
+                 Group="SPFx Content Types"
+                 Description=""
+                 Inherits="FALSE"
+                 Version="0"
+                 Hidden="FALSE"
+                 Sealed="FALSE"
+                 >
+        <FieldRefs>
+            <!-- SPFxDescription Site Column -->
+            <FieldRef ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+            <!-- SPFxImage Site Column -->
+            <FieldRef ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+        </FieldRefs>
+    </ContentType> 
+
+    <!-- Parent ContentType: Document (0x0101) -->
+    <ContentType ID="0x0101A33D9AD9805788419BDAAC2CCB37500F"
+                Name="SPFxDocument" 
+                Group="SPFx Content Types" 
+                Description=""
+                Inherits="FALSE"
+                Version="0"
+                Hidden="FALSE"
+                Sealed="FALSE"
+                >
+        <FieldRefs>
+            <!-- SPFxDescription Site Column -->
+            <FieldRef ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+            <!-- SPFxImage Site Column -->
+            <FieldRef ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+        </FieldRefs>
+        <DocumentTemplate TargetName="/_layouts/15/upload.aspx"/>
+    </ContentType> 
+
+    <!-- List (TemplateType 100) -->
+    <ListInstance 
+            CustomSchema="listSchema.xml"
+            FeatureId="00bfea71-de22-43b2-a848-c05709900100"
+            Title="SPFx List" 
+            Description=""
+            TemplateType="100"
+            Url="Lists/SPFxList"
+            Hidden="FALSE">
+            <!-- Add default data with the list -->
+            <!-- Note: Deactivating and activating the feature will 
+            duplicate the data, so remove or comment if no initial data needed
+            -->
+            <Data>
+                <Rows>
+                    <Row>
+                        <Field Name="Title">Title 1</Field>
+                        <Field Name="SPFxDescription">Description 1</Field>
+                        <!-- Usage of Special Tokens (~site and ~sitecollection)
+                        Source: https://dev.office.com/sharepoint/docs/general-development/urls-and-tokens-in-sharepoint -->
+                        <Field Name="SPFxImage">~site/SitePages/Forms/ByAuthor.aspx, URL Title1</Field>
+                    </Row>
+                    <Row>
+                        <Field Name="Title">Title 2</Field>
+                        <Field Name="SPFxDescription">Description 2</Field>
+                        <!-- Usage of Special Tokens (~site and ~sitecollection)
+                        Source: https://dev.office.com/sharepoint/docs/general-development/urls-and-tokens-in-sharepoint -->
+                        <Field Name="SPFxImage">~site/SitePages/Forms/ByAuthor.aspx, URL Title2</Field>
+                    </Row>
+                </Rows>
+            </Data>
+    </ListInstance>
+
+    <!-- Document Library (TemplateType 101) -->
+    <ListInstance 
+            CustomSchema="librarySchema.xml"
+            FeatureId="00bfea71-e717-4e80-aa17-d0c71b360101"
+            Title="SPFx Document Library" 
+            Description=""
+            TemplateType="101"
+            Url="SPFxDocumentLibrary"
+            Hidden="FALSE">
+    </ListInstance>
+    
+    <!-- Upload files to the SPFxDocumentLibrary -->
+    <Module Name="Files" Url="SPFxDocumentLibrary">
+        <!-- ISSUE: For some reason `gulp package-solution` breaks the .jpg, .png images. 
+         Workaround is to open the .sppkg with winrar and add the images manually. -->
+        <File Path="Image1.jpg" Url="Image1.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >
+        </File>
+        <File Path="Image2.png" Url="CustomFolder/Image2.png" Type="GhostableInLibrary" ReplaceContent="TRUE">
+        </File>
+    </Module>
+
+    <!-- Web PropertyBag Properties -->
+    <!-- PropertyBag: https://msdn.microsoft.com/en-us/library/office/gg491706.aspx -->
+    <PropertyBag ParentType="Web" RootWebOnly="FALSE">
+        
+        <!-- Property: https://msdn.microsoft.com/en-us/library/office/gg491703.aspx -->
+        <Property Name="SPFxName1" Value="SPFxValue1" Type="string"/>
+        <Property Name="SPFxName2" Value="1" Type="int"/>
+
+    </PropertyBag>
+
+    <!-- List PropertyBag Properties -->
+    <!-- PropertyBag: https://msdn.microsoft.com/en-us/library/office/gg491706.aspx -->
+    <PropertyBag ParentType="Folder" RootWebOnly="FALSE" Url="Lists/SPFxList">
+        
+        <!-- Property: https://msdn.microsoft.com/en-us/library/office/gg491703.aspx -->
+        <Property Name="SPFxListName1" Value="SPFxListValue1" Type="string"/>
+        <Property Name="SPFxListName2" Value="1" Type="int"/>
+
+    </PropertyBag>
+</Elements>

samples/react-provision-assets/sharepoint/assets/librarySchema.xml

@@ -0,0 +1,86 @@
+<List xmlns:ows="Microsoft SharePoint" 
+      Title="Library Schema" 
+      Name="LibrarySchema" 
+      Direction="$Resources:Direction;" 
+      Url="LibrarySchema" 
+      BaseType="1"
+      EnableContentTypes="TRUE"
+      VersioningEnabled="TRUE"
+      MajorVersionLimit="100" 
+      EnableMinorVersions="FALSE"
+      MajorWithMinorVersionsLimit="0"
+      DisableAttachments="FALSE"
+      FolderCreation="TRUE"
+      RootWebOnly="FALSE">
+  <MetaData>
+    <Fields></Fields>
+    <ContentTypes>
+        <!-- Folder Content Type (0x0120) -->
+        <ContentTypeRef ID="0x0120" />
+        <!-- Document Content Type (0x0101) -->
+        <!--<ContentTypeRef ID="0x0101" />-->
+        <!-- 
+            I could not make the required fields work 
+            by just specifying <ContentTypeRef ID="0x0101A33D9AD9805788419BDAAC2CCB37500F" />.
+            If ContentTypeRef used, it creates new 'Document' ContentType that inherits from SPFxDocument (0x0101A33D9AD9805788419BDAAC2CCB37500F)
+            but this removes the Required="TRUE" rule from the fields this is why I came with bellow solution.
+            See: https://msdn.microsoft.com/en-us/library/office/aa543822(v=office.14).aspx.
+        -->
+        <ContentType ID="0x0101A33D9AD9805788419BDAAC2CCB37500F"
+              Name="SPFxDocument" 
+              Group="SPFx Content Types" 
+              Description=""
+              Version="0"
+              Hidden="FALSE"
+              Sealed="FALSE"
+              >
+          <FieldRefs>
+            <!--Title Site Column -->
+            <FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Required="TRUE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+            <!-- SPFxDescription Site Column -->
+            <FieldRef ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}"  Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+            <!-- SPFxImage Site Column -->
+            <FieldRef ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}"  Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+          </FieldRefs>
+          <DocumentTemplate TargetName="/_layouts/15/upload.aspx"/>
+      </ContentType>
+    </ContentTypes>
+    <Views>
+      <View BaseViewID="1" 
+            Type="HTML"
+            WebPartZoneID="Main"
+            DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;"
+            DefaultView="TRUE"
+            MobileView="TRUE"
+            MobileDefaultView="TRUE"
+            SetupPath="pages\viewpage.aspx"
+            ImageUrl="/_layouts/images/generic.png"
+            Url="Forms/AllItems.aspx"
+            ContentTypeID="0x">
+        <XslLink Default="TRUE">main.xsl</XslLink>
+        <JSLink>clienttemplates.js</JSLink>
+        <RowLimit Paged="TRUE">30</RowLimit>
+        <Toolbar Type="Standard" />    
+        <Aggregations Value="Off" />
+        <ViewFields>
+          <!-- Name is the InternalName -->
+          <FieldRef Name="DocIcon" />
+          <FieldRef Name="LinkFilename"></FieldRef>
+          <FieldRef Name="Title"></FieldRef>
+          <FieldRef Name="SPFxDescription"></FieldRef>
+          <FieldRef Name="SPFxImage"></FieldRef>
+        </ViewFields>
+        <Query>
+          <OrderBy>
+            <FieldRef Name="FileLeafRef" />
+          </OrderBy>
+        </Query>
+      </View>
+    </Views>
+    <Forms>
+      <Form Type="DisplayForm" Url="Forms/DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+      <Form Type="EditForm" Url="Forms/EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+      <Form Type="NewForm" Url="Forms/Upload.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+    </Forms>
+  </MetaData>
+</List>

samples/react-provision-assets/sharepoint/assets/listSchema.xml

@@ -0,0 +1,75 @@
+<List xmlns:ows="Microsoft SharePoint" 
+      Title="List Schema"
+      Name="ListSchema"
+      Direction="$Resources:Direction;"
+      Url="Lists/ListSchema"
+      BaseType="0"
+      EnableContentTypes="TRUE"
+      FolderCreation="FALSE"
+      VersioningEnabled="TRUE"
+      MajorVersionLimit="100" 
+      EnableMinorVersions="FALSE"
+      MajorWithMinorVersionsLimit="0"
+      DisableAttachments="FALSE"
+      xmlns="http://schemas.microsoft.com/sharepoint/"
+      RootWebOnly="FALSE">
+  <MetaData>
+    <ContentTypes>
+        <!-- ContentType: SPFxItem -->
+        <!-- 
+            I could not make the required fields work 
+            by just specifying <ContentTypeRef ID="0x0100CEADAD40C6630B489BDF172555628DA0" />.
+            If ContentTypeRef used, it creates new 'Item' ContentType that inherits from SPFxItem (0x0100CEADAD40C6630B489BDF172555628DA0)
+            but this removes the Required="TRUE" rule from the fields this is why I came with bellow solution.
+            See: https://msdn.microsoft.com/en-us/library/office/aa543822(v=office.14).aspx.
+        -->
+        <ContentType ID="0x0100CEADAD40C6630B489BDF172555628DA0"
+                 Name="SPFxItem" 
+                 Group="SPFx Content Types"
+                 Description="">
+        <FieldRefs>
+            <!--Title Site Column -->
+            <FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Required="TRUE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+            <!-- SPFxDescription Site Column -->
+            <FieldRef ID="{f4e5dd71-448f-40e2-b991-35874a0d7fd6}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+            <!-- SPFxImage Site Column -->
+            <FieldRef ID="{0ad9d45c-b110-4635-b149-2890aa3a2513}" Required="FALSE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
+        </FieldRefs>
+      </ContentType> 
+    </ContentTypes>
+    <Fields></Fields>
+    <Views>
+      <View BaseViewID="1" 
+            Type="HTML"
+            WebPartZoneID="Main"
+            DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;"
+            DefaultView="TRUE"
+            MobileView="TRUE"
+            MobileDefaultView="TRUE"
+            SetupPath="pages\viewpage.aspx"
+            ImageUrl="/_layouts/images/generic.png"
+            Url="AllItems.aspx">
+        <XslLink Default="TRUE">main.xsl</XslLink>
+        <JSLink>clienttemplates.js</JSLink>
+        <RowLimit Paged="TRUE">30</RowLimit>
+        <Toolbar Type="Standard" />
+        <ViewFields>
+          <!-- Name is the InternalName -->
+          <FieldRef Name="LinkTitle"></FieldRef>
+          <FieldRef Name="SPFxDescription"></FieldRef>
+          <FieldRef Name="SPFxImage"></FieldRef>
+        </ViewFields>
+        <Query>
+          <OrderBy>
+            <FieldRef Name="ID" />
+          </OrderBy>
+        </Query>
+      </View>
+    </Views>
+    <Forms>
+      <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+      <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+      <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
+    </Forms>
+  </MetaData>
+</List>

samples/react-provision-assets/src/webparts/reactProvisionAssets/IReactProvisionAssetsWebPartProps.ts

@@ -0,0 +1,3 @@
+export interface IReactProvisionAssetsWebPartProps {
+  description: string;
+}

samples/react-provision-assets/src/webparts/reactProvisionAssets/ReactProvisionAssetsWebPart.manifest.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
+
+  "id": "e89b5ad5-9ab5-4730-a66b-e1f68994598c",
+  "alias": "ReactProvisionAssetsWebPart",
+  "componentType": "WebPart",
+  "version": "*", // The "*" signifies that the version should be taken from the package.json
+  "manifestVersion": 2,
+
+  /**
+   * This property should only be set to true if it is certain that the webpart does not
+   *  allow arbitrary scripts to be called
+   */
+  "safeWithCustomScriptDisabled": false,
+
+  "preconfiguredEntries": [{
+    "groupId": "e89b5ad5-9ab5-4730-a66b-e1f68994598c",
+    "group": { "default": "Under Development" },
+    "title": { "default": "ReactProvisionAssets" },
+    "description": { "default": "ReactProvisionAssets description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "ReactProvisionAssets"
+    }
+  }]
+}

samples/react-provision-assets/src/webparts/reactProvisionAssets/ReactProvisionAssetsWebPart.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { Version } from '@microsoft/sp-core-library';
+import {
+  BaseClientSideWebPart,
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField
+} from '@microsoft/sp-webpart-base';
+
+import * as strings from 'reactProvisionAssetsStrings';
+import ReactProvisionAssets from './components/ReactProvisionAssets';
+import { IReactProvisionAssetsProps } from './components/IReactProvisionAssetsProps';
+import { IReactProvisionAssetsWebPartProps } from './IReactProvisionAssetsWebPartProps';
+
+export default class ReactProvisionAssetsWebPart extends BaseClientSideWebPart<IReactProvisionAssetsWebPartProps> {
+
+  public render(): void {
+    const element: React.ReactElement<IReactProvisionAssetsProps > = React.createElement(
+      ReactProvisionAssets,
+      {
+        description: this.properties.description
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField('description', {
+                  label: strings.DescriptionFieldLabel
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}

samples/react-provision-assets/src/webparts/reactProvisionAssets/components/IReactProvisionAssetsProps.ts

@@ -0,0 +1,3 @@
+export interface IReactProvisionAssetsProps {
+  description: string;
+}

samples/react-provision-assets/src/webparts/reactProvisionAssets/components/ReactProvisionAssets.module.scss

@@ -0,0 +1,52 @@
+.reactProvisionAssets {
+  .container {
+    max-width: 700px;
+    margin: 0px auto;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .row {
+    padding: 20px;
+  }
+
+  .listItem {
+    max-width: 715px;
+    margin: 5px auto 5px auto;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .button {
+    // Our button
+    text-decoration: none;
+    height: 32px;
+
+    // Primary Button
+    min-width: 80px;
+    background-color: #0078d7;
+    border-color: #0078d7;
+    color: #ffffff;
+
+    // Basic Button
+    outline: transparent;
+    position: relative;
+    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    -webkit-font-smoothing: antialiased;
+    font-size: 14px;
+    font-weight: 400;
+    border-width: 0;
+    text-align: center;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0 16px;
+
+    .label {
+      font-weight: 600;
+      font-size: 14px;
+      height: 32px;
+      line-height: 32px;
+      margin: 0 4px;
+      vertical-align: top;
+      display: inline-block;
+    }
+  }
+}

samples/react-provision-assets/src/webparts/reactProvisionAssets/components/ReactProvisionAssets.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styles from './ReactProvisionAssets.module.scss';
+import { IReactProvisionAssetsProps } from './IReactProvisionAssetsProps';
+import { escape } from '@microsoft/sp-lodash-subset';
+
+export default class ReactProvisionAssets extends React.Component<IReactProvisionAssetsProps, void> {
+  public render(): React.ReactElement<IReactProvisionAssetsProps> {
+    return (
+      <div className={styles.reactProvisionAssets}>
+        <div className={styles.container}>
+          <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
+            <div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
+              <span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
+              <p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
+              <p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
+              <a href="https://aka.ms/spfx" className={styles.button}>
+                <span className={styles.label}>Learn more</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

samples/react-provision-assets/src/webparts/reactProvisionAssets/loc/en-us.js

@@ -0,0 +1,7 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Group Name",
+    "DescriptionFieldLabel": "Description Field"
+  }
+});

samples/react-provision-assets/src/webparts/reactProvisionAssets/loc/mystrings.d.ts

@@ -0,0 +1,10 @@
+declare interface IReactProvisionAssetsStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  DescriptionFieldLabel: string;
+}
+
+declare module 'reactProvisionAssetsStrings' {
+  const strings: IReactProvisionAssetsStrings;
+  export = strings;
+}

samples/react-provision-assets/src/webparts/reactProvisionAssets/tests/ReactProvisionAssets.test.ts

@@ -0,0 +1,9 @@
+/// <reference types="mocha" />
+
+import { assert } from 'chai';
+
+describe('ReactProvisionAssetsWebPart', () => {
+  it('should do something', () => {
+    assert.ok(true);
+  });
+});

samples/react-provision-assets/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "types": [
+      "es6-promise",
+      "es6-collections",
+      "webpack-env"
+    ]
+  }
+}

samples/react-provision-assets/typings/@ms/odsp.d.ts

@@ -0,0 +1,11 @@
+// Type definitions for Microsoft ODSP projects
+// Project: ODSP
+
+/* Global definition for UNIT_TEST builds
+   Code that is wrapped inside an if(UNIT_TEST) {...}
+   block will not be included in the final bundle when the
+   --ship flag is specified */
+declare const UNIT_TEST: boolean;
+
+/* Global defintion for SPO builds */
+declare const DATACENTER: boolean;

samples/react-provision-assets/typings/tsd.d.ts

@@ -0,0 +1 @@
+/// <reference path="@ms/odsp.d.ts" />