SharePoint Framework Notes

As the SPFx is progressing and changing rapidly, I shall try to update this page as time goes by.  I have been dabbling with the SharePoint Framework (SPFx) for a few months and went to a day workshop with Andrew Connell (AC) on SPFX as the SharePoint Conference 2018 North America on 20 May 2018.  I would definitely recommend attending Andrew Connell training (I have gone to a lot of workshops and presentations over the years and he is excellent) I am not an expert but these notes are my summary of items to be aware of.

Last Updated:15 June 2018

• To use the SPFx on-prem. with SP2016, you need to have feature pack 2.  SP2016 only for SPFx web parts does not do    SP2019 will be behind SP365 but it shall have all the updates circ May 2018 when it is released circa Sept-Oct 2018. 
• Safer to user SPFx on modern pages rather than classic SP pages.
• Development can be done on any laptop with any editor.
• Either build Web Parts in the local or O365 (/_layouts/15/workbench.aspx) Workbench.

• What you need is 1. Node.js, 2. npm, 3. Yeoman, 4. GULP, 5. Webpack (used to check and load dependency JS modules).  AC suggests for simplicity install and forget about: Node.js, Yeoman, Gulp and webpack.  You'll use them but you don't really need to understand them.
• Language-wise, use JavaScript or you can use TypeScript which obviously converts down into normal JS but makes it easier to program (e.g. type ahead/intelisense).
• Use NVM (allows for multiple versions of Node.js; you may have clients of different versions and NVM allows you to have multiple Node.js versions on a machine) and use the LTS (Long-term support) versions: v8.11.2 or v8.9.4
• Install the following pre-reqs using npm:  yomen, gulp and the MSfx template for yeomen scaffolding namely @microsoft/sharepoint…
• VS code makes a good editor, I think Mark Rackly has built a VS template that will do all the scaffolding instead of using yeoman.

SPFx Eqivalancy Comparison:

SPFx Tool	C# WSP Tool	Desc
Node.js	.NET	Used to run npm and compile the SP package (*.sppkg) using gulp and webpack.  Runs a local server to use the tooling
npm	Nuget	Download 3rd party packages/frameworks e.g. jQuery or Angular
yeoman	Visual Studio	Generates basic SPFx web part files, same as a template built using VSIX in VS.  Ensure you have all the basic parts to build a SPFx web part
gulp	MSBuild or F5	Builds the package
webpack	NA	checks dependant files are included in the package.  AC explained it as shaking the tree (removes unnecessary js libraries and ensure libraries are included)

SP2016 on-prem. Dev vs No FTC Sp2016 on-prem. vs SPO SPFx

• WSP
• Timer
• Custom Service Apps
• Event Handlers

References:
https://www.voitanos.io/

Background:
Node.js - Allows you to create a web server and compile JS on the server-side.  It's 2 main functions to use in SP are: 1) Need it for local development workbench and 2) Node.js has npm (package manager) built in, you need node.js that uses npm and webpack to uses gulp to build packages (like we did with MSBuild for WSP's).
webpack - build tool that manages code.  Manages styles and JS files.

SharePoint Tooling 2018

On a development/local machine, I have complied this list of tools that I'm likely to use but it completely depends on the development project, approach, and technologies used.  This post lists tools I commonly use as of March 2018:

SharePoint Tools:

1. SharePoint Inspect
2. SharePoint Designer
3. Visual Studio 2017
4. SharePoint Search Query Tool (CodePlex now PnP)
5. SharePoint Manager
6. CAML Builder

Developer Tools:

1. NodeJS
2. NPM
3. Yeoman, 
4. GULP
5. Webpack

Design Tools:

1. Balsamiq (My favourite) - Screens and interaction flow
2. Updated 2019/12/01 - visual-paradigm.com online drawing tool
3. Axure - Prototyping
4. Figma
5. Microsoft Blend - Screens and interaction flow
6. Visio - Architecture
7. MS Access to ERD design

Other Tools:

1. Visual Studio or Visual Studio Code
2. SnagIT - Basic video recording with audio and annotate screenshots.
3. Office & OneNote
4. NotePad++, add the compare dll plugin
5. Grammarly
6. Slack or Teams
7. Yopmail or mailinator - useful for creating accounts for testing (beware these can be a security risk as anyone can guess you temporary emails) they are deleted after a few days.
8. BrowserStack

Networking:

1. Wireshark
2. Fiddler
3. DeveloperTool IE & Chrome
4. Burp
5. Telnet
6. Postman

Source Control:

1. TFS
2. TFS online
3. GIT

VMWare workstation setup

Problem:  Occasionally I need to setup VM's on VMware workstation for development environments and I always forget the steps so this post aims to record a basic set of steps to get multiple VM's on VMware workstation 7 on a corporate network.  It works the same way for VMware 8.  This is not my area of expertise but it will hopefully help me in future and any other SharePoint dev.  This post expinas the networking when using VMware workstation 7.

Architecture Overview:  I have Windows 7 x64 on my host physical workstation with 16 GB of RAM.  I have 3 VM's in my dev environment to host VS, SP2010 & FAST.
VM1: Windows 2008 R2 that is my domain controller (1 CPU & 1GB RAM)
VM2:  Windows 2008 R2 with SQL Server 2012 Developer edition, VS 2010 SP1 Ultimate with VS SP SDK, Azure tools version 1.7, SP2010 SP1 with CU's (4 CPU's & 10 GB RAM)
VM3: Windows 2008 R2 with FAST (2 CPU's & 3GB RAM).
This architecture is good as all dev can use the clones and merely need the PC/laptop making them agnostic of the clients architecture.

Networking Summary:
(The internal networked VM's work together in a private network, the VM's can reach out to the Internet & the last step is to add access to the SharePoint websites via the network editor.

Steps:
1.> Install VMware 8 I am using version 7 as that is what my licence is (about £150) on the host.  I then built the machines explained in my "Architecture Overview" section. 
2.> Edit the network setting on VM1 (My DC).  Set the networking to NAT.

3.> Open the "Virtual Network Editor" (Hint: this is in you program files under the VMware folder).
Select the NAT networking type and click the "NAT Settings.." button.

4.> In the "NAT Settings" dialog popup window record the Gateway IP (you will use this on the VM network card IP4 network settings to give you Internet access).

5.> Power up the VM (in my scenario this is VM1 - DC) from the VMware Workstation client console.
6.> Remote into VM1.  Edit the network adaptor settings as shown below (note: that the Default gateway is the ip adr stored from the look at the "VMware network editor" in step 4.  (Hint: I use the 192.168.1.* for my IP numbers but use as you see appropriate).

7.> Open IE on VM1 and check networking is working.
8.> Optional hint:  You may need to enter proxy details on the VM.  To do this get you proxy setting from IE on the host machine.  Check you can ping the proxy (if you can't you'll need to add a hosts entry on VM1).  Open IE > Internet options > Connections tab >Lan Setting > add the proxy details.  At this powering also bypass the local urls for the proxy server (Advanced button), this allows you to access the local web sites.
9.> Repeat the same steps on the other VM's.

Setup http & rdp access fromt he corprate network.
1.> Open the "Virtual Network Editor" on the host machine.
2.> Select the NAT networking type and click the "NAT Settings.." Button.
3.> Add "Port Forwarding" setting.  The entry highlighted does http passthru to VM2 (my SharePoint VM).  You will need to also add port forward for rdp access (also ensure the VM allows remote access).



4.> Open the RDP client tool and enter the IP of the host machine and the port number you will be going to the host on (editor with translate the port)

Note: Only 1 port can be used on the host, so if you have multiple IIS instances on different VM's you can't access them simultaneously.

Turning on the Windows 2008 R2 Desktop Experience

Problem: A standalone developer VM generally means that the developer needs to use the browser on the Windows 2008 Server to check features are working in SharePoint.  On such problem with working on the Windows 2008 desktop you can't open a document library in Windows Explorer.
Error Message: "Your client does not support opening this list with Windows Explorer.".

Initial Hypothesis:
Turn on the Windows Desktop Experience feature.

Windows feature - turn on 'Desktop Experience'

Resolution:

Run the following 2 PS cmds as administrator:
PS> Import-Module Servermanager

PS> Add-WindowsFeature Desktop-Experience -restart

Note: I only apply this to me development machines.

The Desktop Experience also fixes using Office on the Dev VM.
Useful PS cmds in this area:
# Import-Module Servermanager

# Get-WindowsFeature
# See what Windows features is installed
# Add-WindowsFeature Desktop-Experience -restart
# Remove-WindowsFeature Desktop-Experience -restart

Building Development Machines

There are 3 schools of thought regardsing development build approaches:

• Physical (Windows 7 or Windows 2008);
• VM server hosts i.e. ESXi where the server has multiple VM's and the dev use remote desktop; and
• VMWare workstation.

VMWare/HyperV are interchangable.

Base physical machine OS will be Windows 7 and run VMWare Workstation

VM needs:

1. Windows 2008 R2 Std edition x64 – fully patched/updated and include SP1
2. Add the Active Directory role (ensure ADFS2.0 is installed)
3. Install Microsoft SQL Server 2008 R2 developer edition x64, install SP1 check using SELECT SERVERPROPERTY('productversion'), SERVERPROPERTY ('productlevel'), SERVERPROPERTY ('edition') should be at least 10.50.2500.0
4. Install SharePoint 2010 enterprise edition, I’d suggest using AutoSPInstaller (with 1 service account as provided by the AD such as demo\administrator), the pre-requistes will enable the appropriate IIS and application server roles for you.
5. Patch SP2010 to SP1 and also ensure you have the June 2011 CU.
6. Check SP2010 that a site works using IE.
7. Install Visual Studio 2010 (appropriate edition – pref ultimate).
8. Add developer tools such as Office 2010, Fiddler, SPD2010, InfoPath2010, Firefox, CKSDev(VSIX extension)2.1, SharePoint Power tool(vsix extension), U2U, ULSViewer, Beyond Compare, resharper. A comprehensive list is here.
9. Check source control (TFS2010) works.
10. Check deployment of code works.

Tip:
Useful to run http://blog.sharepointsite.co.uk/2012/03/turning-on-windows-2008-r2-desktop.html

Developer SharePoint Machine Prep

BgInfo - Automatically display local computer information on the desktop's background, such as the computer name, IP address, ect
Disable ShutDown Event Tracker - Stop the comment box on Shut down of your developer machine.
CKS - Community Kit for SharePoint: Development Tools Edition by Matt Smith and others. Invaluable if not just for deployment of code.
.NET reflector - Explore compiled .NET assemblies
SharePoint Dispose Checker Tool
SharePoint Manger
U2U - CAML builder tool - Still a great tool and works with SP2010
WireShark
SharePoint Designer (SPD) 2010
Visual Studio 2010 (Professional version is the lowest edition but any version will work)
FireFox with Firebug (like the IE developer toolbar, good developer tools e.g. css), collazilla (colour picker for firefox), Firequery (jQuery addin), FiddlerHook (integrate Fiddler) & YSlow (Page performance and optimisation)
Fiddler
IE Developer Toolbar part of IE 8
Update 29/08/2010 - Visual Studio 2010 SharePoint Power Tools - Useful if you are using Sandboxes, adds 2 functions: Sandbox visual web parts & Sandboxed compilation.  Also note CKS has remove there sandboxed template in version CKSDev 1.1 release 1 August 2010.  Update 23/06/2012 - CKSDev is at version 2.4
Accessibility: http://www.cynthiasays.com/ &
Update 20/09/2010 - Also add Visual Studio 2010 Sharepoint Power Tools, it has sandboxed solutions and sandboxed visual web parts has been removed from the CKSDev project, so also get the latest CKSdev code.
Update 20/09/2010 - SPTraceView on codeplex is worth installing.
Update 26/11/2010 - Enable wifi on Windows 2008 R2
Update 24/06/2011 - Smtp4Dev is a useful codeplex project for collecting email sent from the dev machine.
Update 24/06/2011 - Office 2010 Plus has all the office applications and includes InfoPath.
Update 24/06/2011 - Visual Studio 2010 SP1 was realease in May 2011 and should be installed.
Update 24/06/2011 - Unit Testing nUnit, TestDrive.NET & TypeMoch or Rhino Mochs.
Add VS cmd prompt to VS using External Tools:  %comspec% /k ""C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\vcvarsall.bat"" x86

Update 08/01/2013 - Create Shortcuts on the desktop using Powershell (14 hive folder and  hosts.exe) download. 
Update 09/01/2013 - Ps to add hosts entries.
Update 13/02/2014 - Process Explorer (Usefule if a machine has high memory, CPU or IO issues)
SoapUI if you are working with web Services.