Features of SPFx Client Side Web Parts
- Responsive – Renders on any device
- Environments – Work on both SharePoint Online and OnPremise (SharePoint 2016 onwards)
In this article, we will learn how to build a simple SPFx based Client Side WebPart. Please refer to my previous article to set up your developer environment.
Create SPFx Solution
- Create a directory for SPFx solution.md firstspfx-webpart
- Navigate to the above-created directory.cd firstspfx-webpart
- Run Yeoman SharePoint Generator to create the solution.yo @microsoft/sharepoint
- Yeoman generator will present you with the wizard by asking questions about the solution to be created.
- Solution Name
Hit enter to have a default name (firstspfx-webpart in this case) or type in any other name for your solution.Selected choice – Hit enter
- Target for component
Here we can select the target environment where we are planning to deploy the client webpart i.e. SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).Selected choice – SharePoint Online only (latest)
- Place of files
We may choose to use the same folder or create a subfolder for our solution.Selected choice – Same folder
- Deployment option
Selecting Y will allow the app to deployed instantly to all sites and will be accessible everywhere.Selected choice – N (install on each site explicitly)
- Type of client-side component to create
We can choose to create client sidewebpart or an extension. Choose the webpart option.Selected choice – WebPart
- Web part name
Hit enter to select the default name or type in any other name.Selected choice – Hit enter (default name)
- Web part description
Hit enter to select the default description or type in any other value.Selected choice – Hit enter (default description)
- Framework to use
- Solution Name
- Yeoman generator will start the scaffolding process to create the solution and will install the required dependencies. This process will take a significant amount of time.
- Once scaffolding is completed, Yeoman will show the below message.
Open Solution in Code Editor
- Visual Studio Code (https://code.visualstudio.com/)
- Atom (https://atom.io/)
- Webstorm (https://www.jetbrains.com/webstorm)
Install any of above code editor. Being in the solution folder in command prompt, type below command to open the solution in the code editor.
Run WebPart on a local server
As the client-side toolchain uses HTTPS endpoint, we need to install the developer certificate that comes with the SPFx toolchain.
To install developer certificate, run below command from the command prompt.
This command runs series of gulp tasks that perform the below.
- Compile SASS (Syntactically Awesome Style Sheets) to CSS
Upon successful compilation and running the gulp tasks, it will open up SharePoint local workbench.
- Click Add (+) icon.
- Select the web part to add it on the page.
Congratulations! The first client side web part is ready.
Click Edit icon, modify description from the properties pane and it will be reflected on client-side web part.
SharePoint Local Workbench
SharePoint Local Workbench is HTML page which helps to preview and test client-side web parts without deploying to SharePoint. It gets served locally usually on the URL – https://localhost:4321/temp/workbench.html