#Run Command window as Administrator------------------------------------------------
#Right click shortcut -> properties -> Shortcut -> Advanced -> Run as Administrator


#Check the version of NodeJS (re-run installer if it doesn't match current LTS)-----
node -v


#Check global top-level packages (if desired)---------------------------------------
npm ls -g --depth=0


#Ensure you have the latest version of NPM------------------------------------------
npm install -g npm


#Ensure you have the latest version of yo and gulp----------------------------------
npm install -g yo gulp


#Ensure you have the latest version of SPFx Generator-------------------------------
npm install -g @microsoft/generator-sharepoint


#Create Directory-------------------------------------------------------------------
md hello-chicago


#Change Directory-------------------------------------------------------------------
cd hello-chicago



#Scaffold---------------------------------------------------------------------------
yo @microsoft/sharepoint


#Run Solution-----------------------------------------------------------------------
gulp serve


#Dev Certificate (won't work on new versions of Chrome)-----------------------------
gulp trust-dev-cert

#Open Solution----------------------------------------------------------------------
code .

#Adding a Property to IHelloWorldWebPartProps--------------------------------------
color: string

#Adding a Property to getPropertyPaneConfiguration----------------------------------
PropertyPaneDropdown('color', {
                  label: "Color",
                  options: [
                    {text:'Theme', key:'themePrimary'},
                    {text:'Neutral', key:'neutralPrimary'},
                    {text:'Yellow', key:'yellow'},
                    {text:'Dark Red', key:'redDark'},
                    {text:'Dark Purple', key:'purpleDark'},
                    {text:'Teal', key:'teal'}
                  ]
                })

#Using color in section-------------------------------------------------------------
<div class="ms-Grid-row ms-bgColor-${this.properties.color}

#Default Property Value-------------------------------------------------------------
manifest.json
"officeFabricIconFontName": "Permissions",
"color": "teal"

#Debugging's launch.json file-------------------------------------------------------
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Local workbench",
            "type": "chrome",
            "request": "launch",
            "url": "https://localhost:4321/temp/workbench.html",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../src/*": "${webRoot}/src/*",
                "webpack:///../../../../../src/*": "${webRoot}/src/*"
            },
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ]
        }
    ]
}

#Debugging---------------------------------------------------------------------------
gulp serve --nobrowser
F5

#Debugging with Chrome---------------------------------------------------------------
gulpe serve --nobrowser


#Debugging with O365-----------------------------------------------------------------
{
    "name": "Hosted workbench",
    "type": "chrome",
    "request": "launch",
    "url": "https://jimisondev.sharepoint.com/_layouts/workbench.aspx",
    "webRoot": "${workspaceRoot}",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "webpack:///../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../src/*": "${webRoot}/src/*",
        "webpack:///../../../../../src/*": "${webRoot}/src/*"
    },
    "runtimeArgs": [
        "--remote-debugging-port=9222"
    ]
}


#JSON Schemas------------------------------------------------------------------------
// Place your settings in this file to overwrite default and user settings.
{
    "json.schemas": [
        {
            "fileMatch": [
                "/config/config.json"
            ],
            "url": "./node_modules/@microsoft/sp-build-web/lib/schemas/config.schema.json"
        },
        {
            "fileMatch": [
                "/config/copy-assets.json"
            ],
            "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyAssets/copy-assets.schema.json"
        },
        {
            "fileMatch": [
                "/config/deploy-azure-storage.json"
            ],
            "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/deployAzureStorage/deploy-azure-storage.schema.json"
        },
        {
            "fileMatch": [
                "/config/package-solution.json"
            ],
            "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/packageSolution/package-solution.schema.json"
        },
        {
            "fileMatch": [
                "/config/serve.json"
            ],
            "url": "./node_modules/@microsoft/gulp-core-build-serve/lib/serve.schema.json"
        },
        {
            "fileMatch": [
                "/config/tslint.json"
            ],
            "url": "./node_modules/@microsoft/gulp-core-build-typescript/lib/schemas/tslint.schema.json"
        },
        {
            "fileMatch": [
                "/config/write-manifests.json"
            ],
            "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/writeManifests/write-manifests.schema.json"
        },
        {
            "fileMatch": [
                "/config/configure-webpack.json"
            ],
            "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack.schema.json"
        },
        {
            "fileMatch": [
                "/config/configure-external-bundling-webpack.json"
            ],
            "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/configure-webpack-external-bundling.schema.json"
        },
        {
            "fileMatch": [
                "/copy-static-assets.json"
            ],
            "url": "./node_modules/@microsoft/sp-build-core-tasks/lib/copyStaticAssets/copy-static-assets.schema.json"
        }
    ]
}


#Referencing Images--------------------------------------------------------------------------------------------
require('set-webpack-public-path!');

#Adding Assets-------------------------------------------------------------------------------------------------
SharePoint/assets folder

#Elements.xml
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

    <Field ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}"
            Name="SPFxAmount"
            DisplayName="Amount"
            Type="Currency"
            Decimals="2"
            Min="0"
            Required="FALSE"
            Group="SPFx Columns" />

    <Field ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}"
            Name="SPFxCostCenter"
            DisplayName="Cost Center"
            Type="Choice"
            Required="FALSE"
            Group="SPFx Columns">
        <CHOICES>
        <CHOICE>Administration</CHOICE>
        <CHOICE>Information</CHOICE>
        <CHOICE>Facilities</CHOICE>
        <CHOICE>Operations</CHOICE>
        <CHOICE>Sales</CHOICE>
        <CHOICE>Marketing</CHOICE>
        </CHOICES>
    </Field>

    <ContentType ID="0x010042D0C1C200A14B6887742B6344675C8B" 
            Name="Cost Center" 
            Group="SPFx Content Types" 
            Description="Sample content types from web part solution">
        <FieldRefs>
            <FieldRef ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}" /> 
            <FieldRef ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}" />
        </FieldRefs>
    </ContentType> 

    <ListInstance 
            CustomSchema="schema.xml"
            FeatureId="00bfea71-de22-43b2-a848-c05709900100"
            Title="SPFx List" 
            Description="SPFx List"
            TemplateType="100"
            Url="Lists/SPFxList">
    </ListInstance>

</Elements>

#schema.xml
<List xmlns:ows="Microsoft SharePoint" Title="Basic List" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Basic List" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">
  <MetaData>
    <ContentTypes>
      <ContentTypeRef ID="0x010042D0C1C200A14B6887742B6344675C8B" />
    </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>
          <FieldRef Name="LinkTitle"></FieldRef>
          <FieldRef Name="SPFxAmount"></FieldRef>
          <FieldRef Name="SPFxCostCenter"></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>


#package-solution.json
"features": [{
      "title": "asset-deployment-webpart-client-side-solution",
      "description": "asset-deployment-webpart-client-side-solution",
      "id": "523fe887-ced5-4036-b564-8dad5c6c6e24",
      "version": "1.0.0.0",
      "assets": {        
        "elementManifests": [
          "elements.xml"
        ],
        "elementFiles":[
          "schema.xml"
        ]
      }
    }]