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.
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.
Leave a comment