Post
Ask Question

Building Your First SharePoint Framework

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.
  1. C:\Users\XXXX\Documents\SPFxSolutions> md HelloWorld  
Step 3
 
Go to the project directory. 
  1. C:\Users\XXXX\Documents\SPFxSolutions> cd HelloWorld  
Step 4
 
Install Yeoman Templates using the below commands. 
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm install -g yo gulp  
Step 5 
 
Install Yeoman SharePoint Generator.
  1. 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.
  1. 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.
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> code .  
Other Settings
 
Configure proxy settings of your company.  
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm config set http-proxy http://<comp domain>/xxx.dat  
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm config set https-proxy http://<comp domain>/xxx.dat  
To install Node Package Manager to your solution.      
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> npm install  
To accept your development server certificate. 
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp trust-dev-cert  
Run your solution in your local host you can run the below command.  
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp serve  
To Clean the solution.
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp clean  
To Build the solution. 
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp build  
To Bundle the solution.
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp bundle --ship  
To Package the solution.            
  1. C:\Users\XXXX\Documents\SPFxSolutions\HelloWorld> gulp package-solution --ship