Set up your SharePoint client-side web part environment

 

 

Suggested Topics

 

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Office 365 tenant for SharePoint Framework development

We have already performed various tasks to understand and setup environment for SharePoint framework development. Above mentioned suggested topics are providing references to those articles.

In this article, I’ll describe about setting up development environment for SharePoint Online customization using SharePoint Framework SPFx. Let’s complete it step by step.

 



 

Install development tools

 

Node.JS

Install Node.JS Long Term Support (LTS) version from https://nodejs.org/en/ and make sure that you have latest LTS Version of Node.JS. You can see it at https://nodejs.org/en/download/

You can see installed version on your machine by running following command

node -v

After installing Node, you have to update it by running following command in command prompt

npm install -g npm

setup-spfx-1

 



 

Code Editors

Following is a list of editors which supports client-side development to build your web part, we can use anyone of these.

  1. Visual Studio Code
  2. Atom
  3. Webstorm

 

I have used Visual Studio Code in my environment.

 



 

Install Yeoman and gulp

Yeoman helps to kick-start new projects and suggests best practices and tools to keep us productive. SharePoint client side development tools include Yeoman generator for creating new web parts. It provides common building tools, code and web site to host web parts for testing.

You can run following command to install Yeoman and gulp.

npm install –g yo gulp

 

setup-spfx-2

 

You can see that few packages are deprecated which can be upgraded later as well.

 



 

Install Yeoman SharePoint generator

Yeoman SharePoint web part generator is used to create SharePoint client side solution project with right toolchain and project structure.

You can install it using following command

npm install -g @microsoft/generator-sharepoint

 

setup-spfx-3

 

Yeoman generator for SharePoint is deployed globally with initial General Availability (GA) version. There are some known issue if it is installed locally to the project which will be resolved in next releases of GA.

 



 

Optional tools

Some of the optional tools are listed below:

  1. Fiddler
  2. Postman plugin for Google Chrome
  3. Cmder for Windows
  4. Oh My Zsh for Mac
  5. Git Source Code tools

However, I have not installed any optional tool as of now. I’ll install it as and when needed.

 



 

What’s next

 

You are now ready to start with first client side web part.

In next article, I’ll demonstrate, building first hello world client side web part.

 



 

 

THREE QUERIES offers easy access to information about SharePoint and associated technologies, project management, agile and scrum methodologies that helps developers, administrators, architects, technical managers, business analysts and end users. It has grown from there. We provide an important knowledge base for those involved in managing, architecture and developing software projects of all kinds. With weekly/daily exclusive updates, we keep you in touch with the latest business, management, technology thinking.

WE ARE CONNECTED ~ Follow us on social media to get regular updates and opinion on what's happening in the world of SharePoint, front-end, back end web technologies and project management. If you like this article, please share it and follow us at Facebook, Twitter, Instagram, Pinterest and LinkedIn

About Satyendra Mishra

Microsoft certified, motivated, energetic and accomplished SharePoint Consultant and Architect with 13+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. He has been fortunate to be a part of over 20+ Web/Mobile/Software SharePoint and .Net projects delivery with various companies across different industry sectors. This has provided him a valuable insight and experience especially in successful implementation of technology solutions. Having very strong System Architecture, Technological, Management & Analytical Skills, Knowledge of Office 365, SharePoint, .Net, JavaScript, React, Angular, Azure, SQL. In 2016, he decided to start sharing the knowledge back to society in the form for content writing and blogging.
View all posts by Satyendra Mishra →

Leave a Reply

Your email address will not be published. Required fields are marked *