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:
- How to Set Up Your Development Environment including Node.js, NPM, Yeoman, Gulp and more…
- What you’re building – A basic “Hello World” web part
- 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)
- 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. Do not install the most recent version as it is not supported by SPFx. 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
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.
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:
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:
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. Your finished web part – A Simple “Hello World”
4. Additional Resources for you to learn about SPFx
SPFx articles and samples by Beau Cameron – really great samples!
*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