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


Sathish Nadarajan
SharePoint MVP
Published On :   16 Aug 2017
Visit Count
Today :  3    Total :   1035
Plan, Migrate, Secure, Report
SharePoint & Office 365 Tool. Simple & Easy to Use. 15-Day Trial!

Sharegate: Kick-Ass Tool
Think Your SharePoint & Office 365 Are Secure ? Find Out Now!


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.

SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Categories

Protect Your SharePoint