Tools for SharePoint Online Development



Published: 9th December 2016

Welcome to part two 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 one, 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 for this week's post, but I'll be 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

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

While provisioning the solutions, like for example, 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. It 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 

It 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 know how to drill down further about each object within REST URI for your SharePoint objects.   

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

 


#3 Fiddler

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

It is the first tool you will use to analyze the issues you have in the solutions you have developed and deployed in SharePoint.   

You can download it using the link below.  

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

#4:SPFastDeploy

SPFastDeploy is used to deploy any changes you make within 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 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 installed on your machine.  

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

Install the recommended LTS version. Once you have installed it, you can have a test by running the command shown in the screenshot below. 

 node  --version 

To update NPM, use the command below:

npm install -g npm

#6 GULP

Stated in Gulp.js site that "gulp keeps things simple and makes complex tasks manageable." 

It is certainly one of the cool tools that you could use to create tasks and manage them efficiently with a lot of plugins available.  

To learn more about Gulp.js plug-ins, you can go this link:

http://gulpjs.com/plugins/

By the time I am writing this article, I 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 to create a package.json file. For that, you need to go to respective solution directory and run npm init command.

Once you've completed all the questions asked from the above command, it will create package.json file in your solution.

Common Gulp Plug-ins I Use in SharePoint Development

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

gulp-concat : concatenate the files

gulp-concat-css : To concatenate the CSS files 

gulp-uglify : To minify the JS

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

#7 GRUNT

"The JavaScript Task Runner"  

Between Grunt and Gulp, it's up to your preference. But for SharePoint solutions, I find Gulp simple, and for me, it makes things start 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  

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

What's Yeoman? 

According to Yeoman's 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 plug-in 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 can build your own generator. To check more details, use 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 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 the 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 and I will add your suggestion to the list of tools, so this will also help others. I would appreciate if you could also provide why do you use that specific tool for SharePoint Online Development.



Join 6,500 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


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.