Getting set up with SPFx
Updated: Mar 13, 2019
In this first blog post I am going to summarise the areas I focused on and the resources I found useful to get set up and started. The links below contain all the details you need so I won't repeat it here. However, I have added what I learnt from my experience going through it.
The tools we need to create an SPFx web part are:
Yeoman and Gulp. Yeoman is the SharePoint web part generator used to create a new empty project. Gulp is used to automate the build process and start serving the web part locally.
Visual Studio Code. You will need an editor to work on your project code and you could you anything you are comfortable with. However, Visual Studio Code has been widely adopted because it does everything you need and more. Plus it works on Mac and Linux too.
A command line tool - Windows CommandLine, Powershell or any third party program would be fine.
So let's get started, install and configure the above tools as per Microsoft's guide:
Several things to note:
Remember to trust the local developer certificate as you need to complete this step in order to test your web part: gulp trust-dev-cert
I needed to install the node msi file through the command line due to a policy on my machine: msiexec -i node-v8.15.0-x86.msi
You will need a SharePoint Online site to be able to test the web part with lists, libraries and other resources.
I'm using Azure Dev Ops to manage my project and source control (GIT) as this is what I have been using for development already. Best not go anywhere without source control!
Creating a hello world web part
The Microsoft Docs site has a series of tutorials that walk you through the creation of a web part and a number of other topics such as deployment to the site. There is also an introduction to an Office UI Fabric React component. So they are worth following along with:
Being a C# developer there is a lot in common that I recognise in TypeScript. There are no shortage of tutorials on the Internet to fill in the gaps in my knowledge but I found a no-nonsense book that suited me nicely by Thomas Claudius Huber.
I can recommend this if you have some prior experience of programming because it just focuses on describing the language and not retread endless beginner details such as "what is a variable". Something very much appreciated as I have enough to read up on as it is.
React and Office UI Fabric
If you followed through the Building your first web part tutorial or have tried the Yeoman generator already, you would have seen the option to to use React. Much of what you see on Office 365 is using React components and Office UI Fabric so it makes sense that this is something I should use.
React immediately reminds me of my days programming classic ASP and more recently with MVC and Razor pages in that it sort-of mixes code and presentation together. Developers may baulk at this concept but it does provide some advantages if you keep your code in check and I am understanding the rationale after a couple of weeks using React.
What is important to know about React:
HTML elements are written as part of the code, not as a string. For example: const element = <h1>Hello, world!</h1>;
HTML elements must be XHTML compliant, written in lower case and must have a closing element.
You can create your own React components which can be described like a user control in ASP.NET. These must begin with an uppercase character, but otherwise look like HTML. For example: const element = <ContactDetails />
Patterns & Practices JS
One last part of the puzzle for now is Patterns & Practices JS, or PnPJS, which hides much of the verbose REST code you would otherwise have to write when talking to SharePoint.
It's important to be aware that PnPJS initially started life as PnP JS Core and as late as July of last year it transformed into PnPJS. Fortunately, much of the example code found on the Internet for Core appears to only need minor modification to use under PnPJS.
I'll post more about using PnPJS in the future.
That's quite a lot of information for one blog post but I wanted to summarise the relevant parts I am using in my SPFx journey. I have one further link from last years Collab365 that I found most useful for bringing understanding or React, Office UI Fabric and PnPJS together.
Not Sure React by Ryan Schouten