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

Sathish Nadarajan
Solution Architect
August 16, 2017
Rate this article
[Total: 1    Average: 5/5]

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://*******

2. Go to the Documents Library.

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


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.


7. Run the Command yo @microsoft/sharepoint





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

9. Then open the solution through Visual Studio Code.


10. The Solution will be opened in VS Code.


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


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


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.



We can see our WebPart rendered on the screen.

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



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
[Total: 1    Average: 5/5]
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 13+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business more

Leave a comment