This blog describes the step by step procedure to create a simple client-side web part using SharePoint Framework. The blog also contains gulp commands to bundle, package, and deploy the web part.
What is SharePoint Framework (SPFx)?
The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling.
Building your first SharePoint Framework.
Create a new web part project
Step 1
Open the command prompt as shown below.
Step 2
Create a new project directory in your favorite location.
- C:\Users\XXXX\Documents\SPFxSolutions> md HelloWorld
Step 3
Go to the project directory.
- C:\Users\XXXX\Documents\SPFxSolutions> cd HelloWorld
Step 4
Install Yeoman Templates using the below commands.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm install -g yo gulp
Step 5
Install Yeoman SharePoint Generator.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm install -g @microsoft/generator-sharepoint
Step 6
Create a new Hello World web part by running the Yeoman SharePoint Generator.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> yo @microsoft/sharepoint
Step 7 - When prompted
Accept the default helloworld-webpart as your solution name, and then select Enter.
Select SharePoint Online only (latest), and select Enter.
Select Use the current folder for where to place the files.
Select N to allow the solution to be deployed to all sites immediately.
Select N on the question if solution contains unique permissions.
Select WebPart as the client-side component type to be created.
Accept the default HelloWorld as your web part name, and then select Enter.
Accept the default React web framework as the framework you would like to use, and then select Enter.
Step 8
Type the following command to open the solution structure in Visual Studio Code.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> code .
Other Settings
Configure proxy settings of your company.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm config set http-proxy http:
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm config set https-proxy http:
To install Node Package Manager to your solution.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm install
To accept your development server certificate.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp trust-dev-cert
Run your solution in your local host you can run the below command.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp serve
To Clean the solution.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp clean
To Build the solution.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp build
To Bundle the solution.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp bundle --ship
To Package the solution.
- C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp package-solution --ship