Set up an on-premises development environment for sharepoint add-ins

This SharePoint 2016 tutorial explains how to set up an on-premises development environment for sharepoint add-ins. And also we will discuss how to create a hello world SharePoint hosted add-in in SharePoint 2016 on-premise environment.

set up an on-premises development environment for sharepoint add-ins

Let us first discuss what are the things required for setting up SharePoint add-in development environment.

• Create a Forward Lookup Zone
• Create a CName alias
• Configure App management service
• Configure Microsoft Subscription Setting Service
• Configure App URLs

If you are new to SharePoint 2016, then you can read SharePoint 2016 installation steps (FREE PDF Guide) and SharePoint 2016 new features.

Create Forward Lookup Zone

First, we will see how we can create forward lookup zone, Open DNS to create a forward lookup zone in your Domain Click Start -> DNS

On the window click on the SharePoint domain -> Click Forward lookup zone -> Create New

In the New zone wizard -> Click Next -> use the primary zone as default

Click Next -> Pick All DNS Server running on the domain controller in this domain by default -> Click Next

Provide the Zone name in my case I am created “SharepointApps.com” then click next

In the dynamic update, page accept as default -> Click next to complete the FLZ setup

Create a CName alias

To configure apps or add-in environment, Next step is to create wildcard alias name CNAME in your new domain.

Right click on the forward look zone created -> click New Alias CNAME

In the wizard Provide Alias name as “*”

Now your FQDN looks like this “*.apps.com”

Then click on the browse button to pick the target host of your domain

Click Ok to complete the process

Configure Subscription settings and App management service application

There service application used to provide the app permissions and create the subdomains for the app.

Before we proceed to check the app management service and subscription settings service are in running state

Open SharePoint 2013/2016 central administration -> Click Application management ->under service application ->Manage services in server

PowerShell to create Microsoft Subscription Settings Service Application

Use the below PowerShell cmdlet to create the Microsoft subscription settings service application

//Get the managed service account
$account = Get-SPManagedAccount "sharepoint20160\appservice"
//Create the new application pool for subscription settings service
$appPoolSubSvc = New-SPServiceApplicationPool -Name SettingsServiceAppPoolA -Account $account
//Create subscription settings service application
$appSubSvc = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $appPoolSubSvc -Name SettingsServiceApp -DatabaseName MynewSubscriptionservice
//create proxy for the subscription settings service
$proxySubSvc = New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $appSubSvc

PowerShell cmdlet to create App management service application

Use the below PowerShell cmdlet to create the App management service application
//Get the managed service account
$account = Get-SPManagedAccount "sharepoint20160\appservice"
//Create the new application pool for app
$appPoolAppSvc = New-SPServiceApplicationPool -Name AppServiceAppPool -Account $account management service
//Create app management service application
$appAppSvc = New-SPAppManagementServiceApplication -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName MyappDb
//create proxy for the app management
$proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc service

You can also do the same from sharepoint central administration page to manage and create service application like App management service and subscription setting services

Configure App Service url in SharePoint central administration

Open SharePoint 2013/2016 central administration-> Click Apps -> App management -> Configure App URLs

Provide the App Domain and App Prefix

Click Ok.

Develop Hello World SharePoint Hosted Add-in

Now we will see ho we can develop our first SharePoint hosted add-in using visual studio 2015/2017 for SharePoint 2013/2016.

Open visual studio -> New project -> Pick a template SharePoint Add-in

Click Ok.

Choose the add-in type SharePoint hosted or provider hosted add-in

• Sharepoint Hosted Add-in -> It’s hosted inside the SharePoint farm
• Provider hosted add-in -> It deploys the contents and host outside of SharePoint like any web servers and azure websites.

In this demo I have chosen SharePoint hosted add-in -> click Next

Choose the add-in version “Sharepoint 2016”

Click Finish. After successful creation of the add-in project look like this

– Content -> Holds the stylesheets by default it uses App.css

– Images -> This module helps to store the images inside your project

– Pages -> This module helps to hold the pages inside your project.

– Scripts -> This module help to hold your javascript files like jquery, Bootstrap references

– Appmanifest.xml ->This file helps to manage the title, name, version, icon, permission and locale settings of the current add-in.

– Feature -> This folder helps to include and exclude the modules in the project, For examples, you don’t need some modules you can just exclude without deleting

– Package – Helps to package your app modules into a solution file. App

Click on the page module -> Open default.aspx

Under contentplaceholdermain replace the HTML below:

<div>
<p id="message">
<!-- The following content will be replaced with the username when you run the app - see App.js -->
Hello world
</p>
</div>

Click save -> Right click on the solution file -> click deploy it into SharePoint

Open the SharePoint 2013/2016 site. Click on gear icon -> Click site contents

Now the app has been successfully installed in your site collection
Click on the HelloWorld SharePoint add-in.

You may like following SharePoint 2013/2016/Online SharePoint Apps or Add-in tutorials:

• Bind SharePoint Online Host Web List Data to Dropdownlist in SharePoint Hosted Add-in
• Remote Event Receivers in SharePoint online + Develop in Provider hosted Add-in using Visual Studio 2015 and Deploy to Microsoft Azure
• Provider Hosted App in SharePoint Online using Visual Studio 2017 + Deploy Provider Hosted Add-in to Microsoft Azure
• How to create a choice type site column and add mapping inside SharePoint hosted add-in in SharePoint 2013 Online?

Now you know how to set up a SharePoint add-in development environment and create a project into it.