Wednesday, 4 January 2017

Hello World Webpart

In previous blog we are ready with  Development machine to start working on Hello World Webpart for New SharePoint Framework

We are going to develop our first Client Side webpart using new SharePoint Framework 2016. As i said in my previous blog please try to do this activity of creating the new Client side webpart solution in Open Network without any specific firewall. if firewall exists use Network proxy assigned by your organisation to have access to external sites.

Steps to follow:

 1.  Create a Project directory.  use Cmder for Windows for Command line activity or use            whatever you used to and best you think
      md helloworld     

 2. Go to the project directory
      cd helloworld     

 3. Next we have to create the SharePoint Client side project with all Config and files like Visual studio used to do for us for Visual Webpart. We will use Yeoman SharePoint Generator.
      yo @microsoft/sharepoint

After running for some time this command will prompt you to answer some of the question related to new Project getting created.

When prompted:
- Accept the default helloworld as your solution name and choose Enter.Select Use the current folder for where to place the files.
- The next set of prompts will ask for specific information about your web part:Accept the default HelloWorld as your web part name and choose Enter.
- Accept the default HelloWorld description as your web part description and choose Enter.
-  Accept the default No javascript web framework as the framework you would like to use and choose Enter.

You can choose other framework like React or Knockout as well.

   Yeoman Generator will install the required dependencies and scaffold the solution files along with the HelloWorld web part. This might take a few minutes.
When the scaffold is complete, you will get Message like "Congratulations your Webpart has been created".

4. Now we want to see the preview of the webpart, to do so run below command, it will prompt to accept the dev certificate to install on Machine. 
 gulp trust-dev-cert5.

5.Now run the command to see the Webpart in Run mode

gulp serve

it will compile the project and display a localhost workbench.html page with Hello will compile the project and display a localhost workbench.html page with Hello webpart.

For details you can watch you tube Video provided by Microsoft. You can ask me for any clarification. will be back once i encountered any issues and get solution for SP new Framework.

No comments:

Post a Comment