By SharePoint Framework is the latest technology from Microsoft to develop on top of SharePoint online and SharePoint 2019.
I would like to show you how I usually setup a SharePoint Framework development environment. I actually installed quite a few of them in the past 2 years, 2 laptops and one desktop (SharePoint 2019) at home and around 6 Virtual Machines at work.
I do recommend first to check out one of my previous post on how to setup Visual Studio Code for SharePoint Framework development.
The major part of this post is from this page from Microsoft’s site, but I do have some tips that I think will help you on your day by day SharePoint Framework development work.
In order to test your SharePoint Framework work you need an Office 365 tenant. For that you can join the Office 365 Developer Program and you will get and Office 365 developer subscription or you can pay for an Office 365 Enterprise Plan. I personally own since a few years now the Office 365 E1 Plan. In order to setup your Office 365 tenant you can follow this link.
SharePoint Framework (SPFx) Toolchain
NodeJS
Install NodeJS LTS version 10 by following this link. The NodeJS LTS version 8 was the version supported for quite a long time but sometime in the first part of this year (2019, up SharePoint Framework 1.8.2) Microsoft announced that they are supporting version 10 too. I recommend to install version 10, because the support for version 8 will stop any time soon.
Once you installed NodeJS you can check the installed versions of node and npm by running the following commands in your command prompt:
- node -v
- npm -v
Then you should install a code editor that supports client-side development. I recommend to use Visual Studio Code from Microsoft, to set it up you can follow one of my previous post.
Yeoman and gulp
Install Yeoman and Gulp by running the following command (-g stands for global, that means Yeoman and Gulp will be installed globally and not in the current folder):
npm install -g yo gulp
Yeoman SharePoint generator
This will help you to generate the code for your SharePoint client-side solutions. You install it (globally) by running the following command:
npm install -g @microsoft/generator-sharepoint
If we would like to compare the old toolchain of developing web parts for SharePoint on premise (so called farm solutions) and the new toolchain for SharePoint Framework, this is how it would look like:
| Old Toolchain | New Toolchain |
|---|---|
| .net Framework | nodeJS |
| NuGet | npm |
| Visual Studio Templates | Yeoman |
| C# | TypeScript |
| MS Build | Gulp |
More tools
- Git source control: if you are working on a team or not, Git is extremely important this days.
- Cmder: very nice console to execute your commands
- Fiddler: to help you with the HTTP/HTTPS debugging
- Postman: to be able to customize the Requests that you want to test
- React Developer Tools: allows you to inspect your React components in Chrome.
Besides the tools that I just mentioned above, I recommend you to create an account on codepen.io, this will help you to test very quickly your React components and to share your code with other people.
If you are a beginner with React I recommend you to take this course, I found it very good.
Now you are all set, in a future post we’ll see how to create a SharePoint Framework project.
octavian sfetcu 