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.
What is SharePoint Framework (SPFx)
Future prospects of SharePoint Framework (SPFx)
Required tools and libraries for SharePoint Framework (SPFx) development
Setup Microsoft 365 tenant for SharePoint Framework development
Setup SharePoint Framework client side web part development environment
Build SharePoint client side web part using SharePoint Framework (SPFx) – I
Build SharePoint client side web part using SharePoint Framework (SPFx) – II
Build SharePoint client side web part using SharePoint Framework (SPFx) – III
How to Debug SharePoint Framework Solutions in Visual Studio Code
What is the Developers Point of View on SharePoint Framework
What is Required Toolchain for SharePoint Framework
How to Integrate gulp tasks with SharePoint Framework Toolchain
How to Provision SharePoint assets with solution packages
How to Upgrade SharePoint Framework client side solutions in SharePoint Online
Install development tools
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
After installing Node, you have to update it by running following command in command prompt
npm install -g npm
Following is a list of editors which supports client-side development to build your web part, we can use anyone of these.
- Visual Studio Code
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
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
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.
Some of the optional tools are listed below:
- Postman plugin for Google Chrome
- Cmder for Windows
- Oh My Zsh for Mac
- Git Source Code tools
However, I have not installed any optional tool as of now. I’ll install it as and when needed.
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.
Hope you enjoyed reading it.
Please don't forget to Share, Follow and Like to get updated with latest posts.
It gives me motivation to share more knowledge with you.
Project Management Professional (PMP) and Microsoft certified, motivated, energetic and accomplished Project Manager / Architect with 15+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 25+ .Net / SharePoint projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of SharePoint based solutions.
My experience in Web application implementation includes technology strategy and road-map definition, business and technical requirements identification, governance, platform architecture, solution design, configuration, development, quality assurance, training, post-production support, team lead and overall project delivery along with project management.
Satyendra Mishra holds a B.Tech. in Computer Science & Engineering and PG Diploma in Advance Computing from Center for Development and Advance Computing, Pune, India. He is also a certified Project Management Professional (PMP).
I love to share Project Management Tips and Tricks by writing Blogs in the Project Management India Community. I have written around 300+ articles in the Project Management, .Net, SharePoint and related client side technologies.
7 thoughts on “How to Set up your SharePoint client-side web part environment”