SharePoint Framework 101 – A Very Basic Tutorial (SPFx)

Category: SharePoint
SharePoint Framework Basic Tutorial

This is a very basic tutorial on the tools needed to get yourself up and running with the SharePoint Framework (SPFx) and concludes with a “Hello World” web part. It also includes resources on learning more about it. This blog post will cover the following in the SharePoint Framework from a beginner’s standpoint:

  1. Background
  2. How to Set Up Your Development Environment including Node.js, NPM, Yeoman, Gulp and more...
  3. Demo – Basic web part
  4. Resources for you to learn about SPFx

You can also view my tutorial slides here: https://www.slideshare.net/MatthewJBailey/sharepoint-framework-101-spfx ,or you can read this post.

SharePoint Framework 101 (SPFx)

1. Background

  • 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

2. Detailed Instructions to Setup Your SharePoint Framework Development Environment

To get your computer up and running to develop in the SharePoint Framework, you will need to install Node.js, NPM, Yeoman, Gulp and some other tools. In theory, you could switch out some of these tools for other open source ones but these are the most popular at this time so I suggest you go with them.

1. Go to https://nodejs.org/en/download/ , then select the LTS version to download whatever number it may be. Install the executable file it downloads.

2. Open the CMD line or PowerShell and run as admin (you can also use Cmder if you like that better)

3. Now we are going to globally install only the production based SPFx files. Type the following commands in the cmd window one after the other:

npm –v     (to verify we have installed it properly from the download)

npm install –g –production windows-build-tools

npm install -g yo

npm install -g @microsoft/generator-sharepoint

4. Next, we will install the Yeoman generator which is a part of Node.js, and will help you name your solution, tell it where to place your files, name your web part, describe your web part and select which JavaScript framework to use.

After Yeoman has finished installing which will take some time, using the information above, you should see this screen:

5. You will need some type of lightweight text editor, most people are using Visual Studio Code, download it if you don’t already have it.

6. Now we will install TypeScript, which is basically a superset of JavaScript and just one more thing you get to learn (the fun never ends!). In your cmd prompt or VS Code terminal window type:

npm install –g typescript

7. Now we are going to install Gulp, an automated build task runner (built on Node.js) that is used to automate repetitive tasks and allows you to create and add your own tasks too. You should be able to type the commands below and it will install everything from the internet for you. In your cmd window of choice type:

npm -g install gulp

8. We will start to use the Workbench which is a lot less of a pain than having to have your own SharePoint test server, a HTML page that allows you to add client-side web parts, can be run locally or within SharePoint Online, launches a local web server and can be accessed at:

  • _layouts/workbench.aspx

One drawback is that we will have to install a local SSL certificate so we can use the program. Going to your cmd window of choice type:

gulp trust-dev-cert

The following pop-up should appear:

9. After installing the above, you should have a browser window open similar to mine displaying the Workbench to add your first Hello World web part.

 

3. Demo – Altering the basic web part (coming soon)

Hello World SharePoint Framework

 

4. Additional Resources for you to learn about SPFx

SharePoint Framework – Getting Started – Pluralsight

Tooling up for SharePoint Framework – Pluralsight

SPFx articles and samples by Beau Cameron –  really great samples!

http://aka.ms/spfx-tutorials

SharePoint / Office 365 Dev Patterns & Practices

https://www.youtube.com/channel/UC_mKdhw-V6CeCM7gTo_Iy7w

Tools Needed:

*Update 5/25/2017: There was just a recent release of a Visual Studio extension to allow you to use the regular version of Visual Studio to build much of your project instead of having to use the command line interfaces of NPM, Gulp and other open-source tools. More information on this extension can be found at: https://dev.office.com/blogs/introduction-to-visual-studio-extension-for-sharepoint-framework

Some new features being released around SPFx are only available in a dev tenant (not first release or production as it takes time for them to be rolled out to those). To get your own free Office 365 dev tenant, go here: https://dev.office.com/devprogram

https://dev.office.com/blogs/announcing-updated-sharepoint-framework-developer-training

 

 

5/5 (6)

Please rate this blog post!

Leave a Reply

Your email address will not be published.