SharePoint Framework (SPFx) (Part 1) Create a simple Client Side Web Part

Blog written by:
Dhaval Shah
SharePoint & .Net Consultant

Intro

In our previous article we have configured your development environment to get started with the SharePoint Framework. If you have not configured it yet, you can find the detailed steps to configure your development environment from here. In this article we will start creating the new your first client side web part. We will fetch the announcements from the SharePoint list and display in our web part.

Create your SharePoint Framework Client Side project using Yeoman

Open the command prompt as an administrator and execute the below command

mkdir spfx-announcement

cd spfx-announcement

Create SharePoint Framework SPFX Project

Now we will create our project structure using yeoman SharePoint framework template

Execute the below command to create a SharePoint framework client side web part project,

yo @microsoft/sharepoint

It will launch a series of question used to configure the project template

  • What is your solution name? spfx-announcement
  • Where do you want to place the files? Use the current folder
  • What framework do you like to start with? No javaScript web framework
  • What is your webpart name? Announcement
  • What is your webpart description? Description for your webpart

Create SPFramework Configuration SPFX

 

Once you press enter, it will create the folder structure and download all the dependencies for the SharePoint Framework. It will take a while to create the project structure.

In the end you will see the below success message,

CreateSPFrameworkSuccess SPFX

 

Execute the below command to open the folder in the visual studio code.

Launch in Visual Studio Code

In Visual studio code, you will see all the files created for your project.

VS Code Project Structure

 

Test your web part in Local Workbench

Install Developer Certificate

The client-side tool chain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment, your browser will report a certificate error. The SPFx tool chain comes with a developer certificate that you can install for building web parts.

Execute the below command in your project directory.

gulp trust-dev-cert

install dev certificate

It will launch a dialog, to trust the certificate click on ‘yes’

Certificate Warning

Now once the certificate is deployed successfully as shown above, we will build the web part using the gulp task which will run series of tasks to compile and bundle the web part files and launch in the local workbench.

After successful launch it will launch the web part in a browser. You can see the new web part on the page by clicking on + button

Add SharePoint Framework SPFX webpart 1

Once you have added the web part it will look like below,

Add SharePoint Framework SPFX webpart 2

With the gulp command running in background, you can make live changes to the web part and see it in the browser automatically. So you do not have to compile it every time you make changes to the web part.

We have successfully created the simple web part in this article. In our next article we will continue creating announcement web part. Stay tuned !

Do you use SharePoint? Try our toolkit
Download SharePoint Essentials Toolkit Now
Download the SharePoint Essentials Toolkit
Follow me

Dhaval Shah - MCD, MCSD

SharePoint and Dot Net Consultant at QiPoint
Dhaval Shah (Houston, TX USA) has more than 9 Years of professional experience working as a SharePoint and Dot Net Consultant. He has worked on 30+ projects dealing with more than 15+ clients. He has a special focus on developing and implementing enterprise-level business solutions, built on SharePoint, Dot net and the Microsoft technology stack involving MVC apps, Web API and REST services.

View his professional profile on linked in
https://www.linkedin.com/in/dhavalshah27/
Follow me

Latest posts by Dhaval Shah - MCD, MCSD (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.