Step by Step Procedure to Create the First Hello World WebPart in SharePoint Framework

Sathish Nadarajan
 
Solution Architect
August 16, 2017
 
Rate this article
 
Views
5788

Till the time, we were using the C# as our primary development language. Now, as I explained in the earlier articles, we are going to change our development methodology.

I recommend the readers to go through the Earlier Article, in which, we discussed about the steps to set up the Development Environment. Now, as usual, we can go through the step by step procedure to create the web Part.

1. Go to our Developer Site. https://*******.sharepoint.com/sites/developersite

2. Go to the Documents Library.

3. Download the Workbench.aspx page from the following URL.

a. https://github.com/sharepoint/sp-dev-docs/blob/master/workbench.aspx

4. Create a Folder called “HelloWorldWebPart”

5. Open the CMD Prompt. In my Case, I will be using the CMDER.

6. Go the Folder which we have created.

clip_image002

7. Run the Command yo @microsoft/sharepoint

clip_image004

clip_image006

clip_image008

clip_image010

8. Once, you execute the command, the solution got created.

9. Then open the solution through Visual Studio Code.

clip_image012

10. The Solution will be opened in VS Code.

clip_image014

11. Once, it opens, we can see a lot of TS, JS, JSON Files.

12. Now, let us try adding this WebPart to the Site. Now, we are not going to modify anything on this web Part created by Yeomon.

13. To Add that, let us use the scaffolding framework GULP.

14. Type the command, as below. Gulp serve

clip_image016

15. It will open a Localhost site with a page called workbench.html.

clip_image018

16. This is nothing but, a local IIS Express kind of stuff. The requests were not going to Actual SharePoint. The page is being served by GULP. Not by SharePoint.

17. On that page, let us click on the Plus sign.

18. Add the WebPart to the page.

clip_image020

clip_image022

We can see our WebPart rendered on the screen.

19. We can make sure that it renders properly on the Mobile, Tablets etc.,

clip_image024

clip_image026

So, our WebPart is ready for deployment. Let us see, how it interacts with the SharePoint in the upcoming articles.

 

 

Happy Coding,

Sathish Nadarajan.

Category : Office 365, SharePoint, SPFx

Author Info

Sathish Nadarajan
 
Solution Architect
 
Rate this article
 
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 15+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business ...read more
 

Leave a comment