A beginner's guide to setting up your development environment to build a very basic "Hello World" web part using the SharePoint Framework and resources on how to keep learning more about it.
2. WWW.MATTHEWJBAILEY.COM
AGENDA
1. Background
2. What we can do now & what is coming in the future
3. Setting up our development environment with open source tools &
libraries that work with with it:
• Node.js & NPM
• Yeoman
• VS Code
• Gulp
• TypeScript
• Workbench – (testing)
4. Demo – Basic web part
5. Resources for you to learn about SPFx
3. WWW.MATTHEWJBAILEY.COM
SPECIAL THANKS TO…
Paul Choquette (pronounced sho-ket), my mentor and whom I have had the
opportunity to learn much about SPFx and other SharePoint goodness
from.
• https://twitter.com/starxed
• https://github.com/star-crossed
And the SharePoint Saturday Baltimore sponsors:
• DAN Solutions
• DNA Solutions
• Xgility
• Liquid Mercury
• AIS
• KwizCom
5. WWW.MATTHEWJBAILEY.COM
ABOUT ME
• A “SharePoint All-Rounder”
• Independent consultant and Microsoft Certified Trainer for Noteworthy Technology Training in the
Washington D.C. area.
• My job tasks vary including Administration, Development, Training, Analysis, UAT and Project
Management
• I am have worked with SharePoint for 10 years, Office 365 and Azure for about 5 years.
• If I don’t know an answer to one of your questions, I will try to find it out or point you in the right
direction!
Matthew J. Bailey MCT, MCSE, MCSA
www.noteworthytt.com www.matthewjbailey.com
6. WWW.MATTHEWJBAILEY.COM
• Another method/way to build solutions for SharePoint (not a replacement)
• Different approach using open-source tools vs. Microsoft’s proprietary tools from the past
• Goal is to be a better solution than the app (add-in) model or embedding JS on a page
• Overcome issues with previous development models add-ins and script parts had
• Available online only in Office 365, but now on roadmap to come on-premises in 2017
SPFx BACKGROUND
9. WWW.MATTHEWJBAILEY.COM
MODERN VS. “LESS” MODERN
Old School New School
.Net framework Node.js
NuGet NPM
Template YEOMAN
MSBuild (xml based) GULP (JavaScript based)
VB or C# TypeScript
MVC, WebForms, WebControls React, Angular
Testing, Running locally Workbench
11. WWW.MATTHEWJBAILEY.COM
“NPM” - You will be using this a lot
• NPM install, globally locally, not using a parameter in the cmd line looks for a .json file and some file
can get very big on it
• Run as admin, but you can use Cmder or the CMD line or PowerShell
• npm –v to verify we have installed it properly
• npm install –g –production windows-build-tools
• npm install -g yo
• npm install -g @microsoft/generator-sharepoint
SETTING UP THE DEVELOPMENT ENVIRONMENT
14. WWW.MATTHEWJBAILEY.COM
npm install –g –-production windows-build-tools
-g means global
--production means we only want production ready files, not dev or not windows
related
NPM
15. WWW.MATTHEWJBAILEY.COM
Setting it Up
MD and/or CD to place files the directory you want
I made C:myFirstSPFXwebpart – we want to stay in this directory to install everything
following
• npm install -g yo (this installs Yeoman itself)
• npm install -g @microsoft/generator-sharepoint (this installs the generator)
YEOMAN
16. WWW.MATTHEWJBAILEY.COM
• Part of Node.js
• Name your solution
• Where to place your files
• Name your web part
• Describe your web part
• Select which JavaScript framework to use
YEOMAN (SHAREPOINT SOLUTION GENERATOR)
20. WWW.MATTHEWJBAILEY.COM
TYPESCRIPT
• Like you needed to learn something else, right?
• Superset of JavaScript
• Strongly typed, allows you to declare data types of variables that regular JS does not allow
• “Vanilla” JS will not require a data type on a variable, TS will
21. WWW.MATTHEWJBAILEY.COM
GULP
• To install:
• An automated build task runner (built on Node.js)
• Used to automate repetitive tasks
• You can create and add your own tasks too!
• gulp –tasks allows us to see what commands we have at our beck and
call to use
22. WWW.MATTHEWJBAILEY.COM
WORKBENCH
• A lot less of a pain than having to have your own SharePoint test server
• An HTML page
• Allows you to add client-side web parts
• Can be ran locally or within SharePoint Online
• _layouts/workbench.aspx
• Trust-dev-cert to install a local SSL cert so we can use the program
• Launches a local web server
26. WWW.MATTHEWJBAILEY.COM
DANG! Bet you won’t take for granted how much Visual Studio does for you
without having to manually hand code all of this stuff ever again – huh?!?!
Yes, all of this work is challenging at first, but down the road where you start to integrate and build
more complex solutions upon it will be the brighter part later. It is a challenge to get it up and running
however admittedly.
TAKEAWAYS
27. WWW.MATTHEWJBAILEY.COM
COMING SOON: SPFx Extensions
• Field Customizers (similar to JS Link for display templates/field overrides)
• Interconnected web parts (consumer/provider)
• Application customizers (sort of like a delegate control)
• Command Set (custom actions)
OFFICIAL ROADMAP:
• https://dev.office.com/sharepoint/docs/spfx/roadmap
ROADMAP (AS OF MAY 2017)
Special thanks to, remember I am new to this also, SPFx only became available in preview last year and has slowly started to gain momentum. Since all of the tools are very “non-Microsoft”, the learning curve is great than it has been in the past.
Review the VS Code menu on left and such
Review the VS Code menu on left and such
App (add-in) model is embedded in an iFrame which comes with restrictions on interactivity around it, it can’ access the DOM and is difficult to make responsive. Script web parts can be edited by users and accidentally become broken and can’t be added to NoScript site. Some in the community have stated “open source or die” as to not become the next Lotus Notes.
It will take awhile to get to the point where we are able to just launch a web part, so for today we are going to use the “Hello World” sample. However, although SPFx is limited at this time to web parts, you can still add a fair amount of functionality to them such as pulling in data from other parts of SharePoint, APIs, the Microsoft Graph and more.
In case you are familiar with the what is now considered “older” way of doing things (although not going away anytime soon), I wanted to give you some ground work
Microsoft’s tried and true vs. open-source– Node.js a JavaScript run time engine
.Net package manager that mainly deals with .NET assemblies integrated with V.S Node package manager, you guessed it, integrated with Node and has 350k as of 01/2017
Templates in VS vs. Yeoman template generator, a part of Node.js
The Microsoft Build Engine (MSBuild) is the new build platform for Microsoft and Visual Studio. MSBuild is completely transparent with regards to how it processes and builds software, enabling developers to orchestrate and build products in build lab environments where Visual Studio is not installed. GULP - Build system automating tasks: minification and copying of all JavaScript files, static images, capable of watching files to automatically rerun the task when a file ...
VB C# - standard VS languages existed - TypeScript, once fashionable now becoming a fashion staple just a superscript of JavaScript
MVC - Reach , Angular – I have heard it phrased that Reach is more of a library and Angular is more of a framework
The last two, aren’t exactly different but SPFx allows you test locally if you are not connecting to data online and online if you are using other data sources
All of these tools are cross platform compatible, Mac, Linux or Windows
LTS version of node as that is what version MSFT has chosen to support
LTS is the version Microsoft supports, this is the current version MSFT supports – the other version is not quite production ready with MSFT’s code. LTS is the version Microsoft supports. You could use this on Mac or Linux too, but let’s face it we’re at a MSFT event so….
Any command line tool is fine, CMDR, PowerShell, CMD – run it as an administrator
Node package manager, installs modules and dependencies, still in C:\windows\system32
You can think of the @Microsoft part as a namespace
Similar to the wizard in Visual Studio, it is a scaffolding tools for web projects. This means it builds out the project file and folders/structure. It is not language or platform specific. However, by using plugins (in this case our SharePoint files) it can install specific items we need. It relies on npm and Gulp. A generator is basically a plugin We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.
Anything with parenthesis around it is a prompt/default placed for you
Yes, this takes awhile to run…
Review the VS Code menu on left and such, Code (or any editors, i.e. Atom, Sublime, WebStorm etc.)
Inside of VS Code, we are going to use the node package manager to install typescript. IF you are using VS Code, we don’t’ really need to do this as it is already there but I am doing it as an example in case you might be using another light weight editing tool. From the console window we type:
Npm install –g typescript
We can now review the VS Code menu on left and such
Gulp is a javascript task runner. It can do things like minify your js or automate manual tasks. Gulp however prefers code over configuration. Being that your tasks are written in code, gulp feels more like a build framework, giving you the tools to create tasks that fit your specific needs. Type gulp –tasks, review each: Clean - Serve, will start a local Node.js server for us to play and test with
With Visual Studio, we had to have to have SharePoint server to test and deploy our solutions on the same machine (in most cases) to test our solutions and web parts. We also had to be a “pseudo-admin” to keep the servers up to date with all of the patches and debugging of to keep the thing up and running.
Workbench launching from typing gulp serve in our console window
Changing the text to our web part in the property pane.
Some things were announced as coming soon toward the end of May, and then there is the longer term road map. Field Customizers (aka: JSLink)
Field customizers is the new JSLink. These allow you to register a JavaScript object that will replace the rendering of a field within a SharePoint list or document library.
Using JSLink field customizers, you can change what's rendered in a cell based on the data within the cell. For instance, maybe you want to render a KPI visualization based on the number value within the cell. With field customizers, you can easily implement some field rendering override to implement this.
Application Customizer (aka: delegate controls)
These aren't really delegate controls, but they come pretty close to what we used to be able to do. Application customizers allow us to register a piece of JavaScript on every page within a SharePoint site. This also comes with a contract from Microsoft about specific named div elements on the page, such as headers and footers.
Using application customizers would allow us to create custom headers and footers or use it to do something such as add Azure App Insights or Google Analytics to all pages within a SharePoint site.
Command Set (aka: Custom Actions)
The third type of artifact they are adding to the SharePoint Framework are command sets which we knew as custom actions. Using a command set, the SPFx now allows us to add items to the ECB menu (the drop-down context menu on list and library items) as well as buttons to list and library toolbars.
Unlike the restricted custom actions we had in add-ins, these buttons can execute JavaScript so we are back to having a lot of power with these custom actions command sets again.
Web Part Connections
Similar to a capability we have had for many years in SharePoint, SPFx brings the notion of web part connections to SPFx client-side web parts. It works very much the same way we did it before. You define some sort of an object, such as an interface, and then create two different web parts: a consumer and a producer.
It is confusing and hard to find things out on GitHub and in the PNP library admittedly