The Beginner’s Guide to SharePoint Development

You are reading this blog to get started with SharePoint development because today, it is one of the leading electronic document management resource.

In today’s dynamic and ever-evolving times, various influencing organizations are leveraging the SharePoint technology to better collaborate, manage, store, track, and organize their records in a way like never before.

This blog addresses all the requirements that you need to start SharePoint Development as a beginner.

Tools for SharePoint Development

Some efficient external tools are available for SharePoint development, among which Visual Studio is the most significant tool.

However, beginners are allowed to use various other tools for making development process easier.

These Are The Most Feasible Tools that You May Use for the Process:

SharePoint Manager 2013

It helps to control and manage settings, properties. The tool supports various features that you use in SharePoint. Therefore, if you don’t have it yet, download it now.

SharePoint ULS Log Viewer

SharePoint ULS Log Viewer supports easy viewing of data and all the ULS log view. It runs on both versions, including SharePoint 2010 and SharePoint 2013.

SharePoint Solution Deployer

It is a fantastic tool for all the right reasons particularly for those who are looking to deploy SharePoint solution packages (WPS) to multiple SharePoint environments

SharePoint Color Palette tool

The color palette tool runs color palette functionality for use with SharePoint designs 2013.

SharePoint 2013 client Browser

SharePoint 2013 client Browser helps to speed up development and also helps to easily and remotely connect to any SharePoint environment. It also discovers the hidden items, documents while checking the artifacts through a client API.

CAML Designer

CAML Designer is a smart tool that plays a crucial role to build CAML queries. CAML Designer utilizes the auto-generated code samples for the queries. You just have to copy and paste queries into your code. The latest version of CAML Designer can also build the REST query for SharePoint 2013 online.

SharePoint 2013 Search Query Tool

It is another essential tool that helps the developer to understand how queries are formatted and also helps developers to configure a search REST query easily.  By using this tool, developers can create more queries that eventually helps to let them learn more and allows developers to work in different dimensions with different output.

SharePoint Code Analysis Framework (SPCAF)

The tool is responsible for flawless quality. It measures and improves the quality of your chosen SharePoint solutions and apps. It lets you check all the problems related to the solutions and code before they go for production. Moreover, the tool can be incorporated with Visual Studio.

Fiddler

Experienced developers can use this tool effectively. It’s an ideal tool that assists developers to analyze SharePoint requests that come from the clients’ side.

SharePoint Software Factory

SharePoint Software Factory provides a set of standard factory methods that lets you build a uniform SharePoint project in Visual Studio. However, many developers have a SharePoint development structure.

LinQPad

The tool is free and enables you to build queries in CAML or JSON and get results just in a blink.

PowerShell Tools for Visual Studio

It is a Visual Studio add-in that enables users to get syntax highlighting on files from PowerShell in Visual Studio.

Steps to Create a SharePoint Framework

Since you have understood all the essential tools that you can utilize for SharePoint Development, now it’s time to take a look at the Framework process.

We will explain you about how you can create your SharePoint Framework with simple commands that will enable you to go live instantly.

Keep in mind that for this Framework, you will need a development environment powered by official Microsoft SPFx documentation.

Required Commands

We will be using the following commands to build the first SPFx web part.

• yo @microsoft/sharepoint
• gulp bundle –ship
• gulp package-solution –ship.

Yo @ Microsoft/SharePoint (Command 1)

This command will let you build the SPFx project with the default settings and dependencies. When you apply this command, then you will be required to answer the following questions below:

What is your solution? 

Enter the name of your solution.

Select baseline packages which you want to target for your component(s)?

Select from the given options as per your requirements.

Current folder or create a new subfolder?

You can select the option as per the context.

Do you want to deploy the solution to all sites immediately by allowing tenant admin? 

You can insert y because it will allow the app to be accessible to all sites instantly.

Which type of client-side component do you want to create? 

You will select Web Part.

What is your web part description? 

Again, you will insert the name related to the context.

Which Framework would you like to select? 

You are required to choose NO JavaScript Framework because after choosing this, there will be no dependencies and you can freely integrate any client side framework according to your requirements.

Once you finish all the answers, press Enter to install all the required node dependencies. The whole process will take up to 3-10 minutes.

Gulp Bundle – Ship (Command 2)

The second command will put together all the typescript files and its dependencies from node modules into a single JavaScript file.

During the initial phase, the compiled typescript files will be converted into the JavaScript files and save into lib folder, later on, the final compiled will be saved in a folder called temp/deploy.

Gulp Package-Solution – Ship (Command 3)

The third command will pave the path for building installation file (sppkg) file. Don’t forget to tick mark the includeClientSideAssets as true in package-solution.json; this will enable you to use Office 365 CDN.

After running the command, sppkg file will be built in the SharePoint folder under the project directory. In addition, the bundle file, created with command two, will be placed in the .sppkg file.

Note: you will need to run both commands two and three to make changes to get your app live.

Let’s Go Live

Push the package file (.sppkg file) in appcatalog for deploying the SPFx webparts. In case, if you don’t have appcatalog you may ask your administrator to create it.

As soon as you push the sppkg file into the appcatalog, you will see the popup below,

Select the checkbox in the highlighted section. It will make your webpart available to the world plus, you will no longer be required to install your app particularly to the sites.

How to Host SPFx App Assets?

Now you must be thinking that how you can host the bundled JavaScript file that you have received from command 2 and other CSS/images.

If this is the problem, then relax because Microsoft provides options for that. You can convert the office 365 tenant into public CDN.

The step will enable you to host the files without spending money. You can easily host files in your tenant.

Now, develop a modern page through Site Contents and you will get a screen popup like this:

Click the plus icon displaying in the center. It will show all the available apps that you can add to the page. You can also find your web part here.

Moreover, if you don’t like the small app listing pane, then you can use another update in Office 365.

See the yellow color highlighted expansion icon in the above image and click to maximize the screen. This will help you to easily find your app that you can.

Wrapping Up

SharePoint is a cloud-based platform and it is an essential collaboration tool nowadays. We can bet that it has a broader scope in the future. We believe that by reading this blog, you have understood some essential tools that you may need for the SharePoint Development plus, we also discussed some important SPFx commands and other related details as well. Let’s try it and get your SharePoint Framework done with our guide.