Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

How to setup the live examples of Office UI Fabric ReactJs Components in local machine


As promised, Office DEV team has released the preview version of Office UI Fabric React Components. Before install the components in our local machine, let us see that how it will useful in our SharePoint development.

SharePoint Framework

Microsoft has introduced a new SharePoint development strategies called SharePoint Framework to adopt a modern web development. The SharePoint Framework is a combination of,

  • Office UI Fabric – This is a UX framework  similar to Bootstrap.
  • Office UI Fabric React Components – This is similar to Angular Bootstrap UI. They are building a similar components using ReactJs for Office UI Fabric. If you are from Angular JS background, you can use
  • Data Access  – Office DEV team has released PnP.JS.Core to simplify the SharePoint operations.
  • Client WebPart Development and Deployment – Not yet released.

Here I have listed of our all the links related to SharePoint Framework from SharePoint community.

Installing Office UI Fabric React Components

To view the samples, first we need to clone to source code to our local machine.


then, we need to install the dependencies,

c:\sivarajan\Samples\office-ui-fabric-react> npm install

Here is the solution structure of the preview,


Now we can run the application from command prompt and see the live examples.

c:\sivarajan\Samples\office-ui-fabric-react> gulp serve





In the next post, we will see that how to use the components in our application.

Add comment