To begin with the development, just make sure that you have the latest node,yeoman, gulp and yeoman SharePoint generator are installed in your machine. These are needed to ensure your machine’s suitability for the development of SharePoint framework offered by Microsoft.
In you don’t have it follow the steps below to install it
Configure development environment
Install NodeJS LTS version.
If you are in Windows, you can use the msi installers in this link for the easiest way to set up NodeJS.
If you have NodeJS already installed, check if you have the latest version by using node -v. It should return the current LTS version.
If you are using a Mac, we recommend that you use homebrew to install and manage NodeJS
Install Yeoman and Gulp
Yeoman helps you kick-start new projects, and prescribes best practices and tools to help you stay productive. SharePoint client-side development tools include a Yeoman generator for creating new web parts. The generator provides common build tools, common boilerplate code, and a common playground website to host web parts for testing.
Enter the following command in powershell to install Yeoman and gulp:
npm install -g yo gulp
Install Yeoman SharePoint generator
The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.
To install the SharePoint Framework Yeoman generator globally, enter the following command in powershell:
npm install -g @microsoft/generator-sharepoint
If you need to switch between the different projects created by using different versions of the SharePoint Framework Yeoman generator, you can install the generator locally as a development dependency in the project folder by executing the following command in powershell:
npm install @microsoft/generator-sharepoint –save-dev
Once you are done with the installation, you will be able to create new webparts using SharePoint framework.
Install a code editor
You can use any code editor or IDE that supports client-side development to build your web part, such as:
The steps and examples in this documentation use Visual Studio Code, but you can equally use any editor of your choice.
How to create New webpart Project
- Open windows powershell as administrator
- Create a directory to store the files using powershell by running the following command
md <folder name>
3. Navigate to the new folder
cd .\<folder name>\
4. Call yeoman SharePoint generator and create project.
5. This will request a couple of details, enter all of those, and that will create the new project for you.
a. What is the name of your project
b. What is the SharePoint version
c. Select if the admin should have the option to deploy this app to all site or not.
d. Select the type of client side component.
e. Enter the webpart name
f. Enter the webpart description
g. Select the framework of the webpart, this is just for scaffolding purpose
h. All Settings to be done in one screen
After the configuration, there is a confirmation message like the following.
6. Once you are done with that, enter the following powershell command to open the code in visual studio code.