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 webpart.it 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.

SharePoint New Framework - Development Machine Preparation

Here we come with next baby steps to be project ready for new SharePoint development Framework 2016.

Development Machine Preparation

As my previous blog we already have installed Node.js, Visual Studio code and Python 2.7.

Now we have to run some specific commands to make our Development machine ready. All the commands are available on github as well. One thing want to clarify my blog is specific to windows Machine not for Linux or Mac as i don't have it.

I found little difficult to run the command in Windows Command prompt so i am suggesting Windows Cmder to download and installed in your Machine. its up to you if you like any other command prompt like Windows Powershell or any other tool.

One more thing i want to specify here is You should have Administrative Access to your development Machine. so make sure you ask your Network or system Team to provide Admin Access to your machine and if you are owning the system like a personal laptop or PC then no issue at all, you are the Super Admin.:)

Below are commands to be run on your Machine with Admin Privilege.

1. Check the version of Node js.

   Type in command prompt

   Node --version

   it should be 4.5.0 since we installed the same

2. npm install -g npm@3

3. you need to installed Windows Build tool, below is the command

   npm install -g --production windows-build-tools

4. Install Yeoman and Gulp, Yeoman is a Project Generator like we had previously in Visual studio SharePoint Visual Webparts and Gulp is used for building and Packaging the SharePoint Client side webpart solution.

  npm install -g yo gulp

5. Install Yeoman SharePoint Generator  which helps to create Client side webpart SharePoint Solution

  npm install -g @microsoft/generator-sharepoint

Hope you will not get any error or issue but if you get let me know will try to figure out. Make sure you try with open Environment without any Corporate Firewall. Firewall might block some of the installation so better to do practice on Personal Laptop at home or Open Firewall.

Next blog we will try to create the Helloworld Webpart.

SharePoint New Development Framework 2016 (SPFx)

             SharePoint guys we are in 2017, but still our new SharePoint Development Framework of 2016 is in Preview mode, lot of improvement is happening everyday in framework. Recently one month before i got a chance to work with new development framework. I started looking to github tutorials and documentation. and realized new framework is going to be the future of SharePoint. I hope all the information about the framework you will be able to get from the github but still i want to consolidate my experience and shared with the you. In future whatever issues or challenges i am going to face will be writing about it.

Three Baby steps to be Project Ready

1.Software Installation by your Network or Hardware team on Your development Machine

2.Machine Preparation 

3.Hello world WebPart 

1.Software Installation by your Network or Hardware team on Your development Machine

    we need to request or Installed ourselves below software in Our Development Machine

• Node JS 4.5.0 (better to have this version,)
• Visual Studio Code
•  Python 2.7

and best part is all software are open source so no need to pay any licensing cost.

will continue about the Machine Preparation in Next blog. if you want to be quick to do everything like machine setup and helloworld webpart always have a look to github spfx.