Tools for SharePoint Online Development


Published: 9th December 2016

Welcome to part 2 of Jump Start to SharePoint Online Development.   

In this post, you will learn about tools for SharePoint Online Development. If we find new tools that will be useful, then I will be adding new tools as we go along with this series.

In Part 1 you have learned on how to prepare development environment for SharePoint Online (Office 365).

If you are already working on SharePoint 2013, Tobias wrote an excellent article with a list of tools. You can check the blog post here.

Note: I am adding only one video in this week post but will adding videos every week on how to use these tools.  

Do you want to learn more about SharePoint Online Development? Click the image below and enroll in the FREE course.

#1 SharePoint Client Browser tool

This is one of my favorite tools for the development of solutions for SharePoint.  

While provisioning the solutions, examples: creating site columns in SharePoint Hosted Add-ins or using PNP PowerShell to create the site columns you can use this tool to help or speed up the development. 

You can create the columns manually In the site then use those columns schema to create a new set of columns with the support of Client Browser Tool. This is just one example, but there are many more advantages while using this tool.  

To download the tool, go to https://spcb.codeplex.com/  

Then click on downloads, and look for SharePoint Online Client Browser 

Then click on the link to download it. 

After you download the tool, you can connect to particular SharePoint site you will be working with.

Once it is connected you can explore different objects within SharePoint site collection.

#2 PostMan Tool to build the REST Queries 

This is one of the primary tools I use whenever I work on REST API in SharePoint solutions.  

You do not have to remember the REST URI that you would like to use within this solution. Using this tool can help you how to drill down further about each object within REST URI for your SharePoint objects.   

I have created a video for this on you could use this tool. Please check the video below to learn more about this video.  

 


#3 Fiddler

Fiddler helps to analyze the queries or Chrome Network Tab to analyze how the API are performing, and a lot of other things can be analyzed.  

This is the first tool you will be using to analyze the issues you have in the solutions you have developed and deployed in SharePoint.   

You can download using this link below.  

https://www.telerik.com/download/fiddler   

#4:SPFastDeploy

SPFastDeploy to deploy any changes you make with In the Pages/Lists. It saved me a lot of hours while developing Add-ins, because some of the changes we make will not reflect in SharePoint until unless you deploy the Add-in in Developer site collection but this tool can push the specific change to the site without re-deploying the Add-in.  

http://visualstudiogallery.msdn.microsoft.com/9e03d0f5-f931-4125-a5d1-7c1529554fbd  

#5: Node JS and NPM 

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. 

Node.js allows you to write server-side JavaScript code and is used these days to build client applications, web applications, and more.  

You can go to https://nodejs.org/en to download the Node JS . Once you Install Node Js you will also get NPM install on your Machine.  

Start learning about these tools as early as possible if you haven't used before because Microsoft using all these tools in SharePoint Framework development.  

Install the recommended LTS version.  Once you have installed, then you can test by running the command in the screen below. 

 node  --version 

To update NPM use below command

npm install -g npm

#6 GULP

From Gulp.js site it states Gulp is  "gulp keeps things simple and makes complex tasks manageable". 

It certainly one of the cool tool that you could create Tasks and manage them efficiently with a lot of plugins available.  

You can go to plug-ins here http://gulpjs.com/plugins/ to learn more about these. 

At this time of writing this article you have 2778 plug-ins available. 

 

Installation

To Install Gulp: Run the command below 

 npm install gulp –g  

This command installs gulp globally  

While working with solutions you need create a package.json file for that you need to go to respective solution directory and run npm init command

Once you complete all the questions asked from above command, it will create Package.json file in your solution.

Common Gulp plug-ins I sue in SharePoint Development

Below are the common plug-ins I use in SharePoint development are  

gulp-concat : concatenate the files

gulp-concat-css : For concatenate the CSS files 

gulp-uglify : To minify the JS

Once you install above plug-ins, you can see the same will get reflected in package.json file under devDependencies section.

#7 GRUNT

"The JavaScript Task Runner "  

Between Grunt and Gulp it's your preference, but for SharePoint solutions, I find Gulp simple and make me things to get started immediately.   

It is up to you whatever tool you would like to use. 

Go to this website to learn more about Grunt http://gruntjs.com/  

#8 Yeoman 

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS  

This is one of the important tools in SharePoint Development, especially in SharePoint Framework.  

What's Yeoman? 

From Yeoman website  "Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.  

To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts. "  

You can install Yeoman using the command below.

npm install -g yo   

You could build your own generator , check more details using the link below. 

https://github.com/yeoman/generator-generator  


Help

To get help about Yeoman, use the command below

 yo  --help 

Conclusion:

I hope you find these tools useful for developing SharePoint solutions in Office 365. I will be adding the videos for each and every tool so it may be easier for you on how to use them if you are working for the first time. Thanks for reading till end. 

Your Turn

What tools do you use for SharePoint Development?

#1: What tools do you use while developing SharePoint solution in Office 365 ?. Leave a comment below, I will add to the list of tools, so this helps others. I appreciate if you could provide why do you use a specific tool for SharePoint Online Development.

About Author

Devendra Velegandla is a four-time recipient of Microsoft's Most Valuable Professional (MVP) award (2014-2017) for Office Servers and Services MVP and  SharePoint Server.He received the MCC award for his contributions in Microsoft MSDN/TechNet forums.He loves sharing articles, videos and tutorial on SharePoint and Office 365.


If you found this post helpful, please share with your friends!!


Join 5,500 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers