Setting Up Add-In Development Environment In SharePoint Server 2016

In this article, I have explained how to configure Sharepoint add-ins development environment and create a simple "Hello World" web part in Sharepoint Server 2016 on-premises.

Before starting, let us discuss the requirements for setting up Sharepoint add-in development environment.

  • Create a Forward Lookup Zone.
  • Create a CName
  • Configure App Management Service.
  • Configure Microsoft Subscription Setting Service.
  • Configure App URLs.

Open DNS to create a forward lookup zone in your domain.

Click Start -> DNS.

SharePoint

On the next window, click on the SharePoint domain -> click Forward lookup zone -> Create New.

SharePoint

In the New Zone Wizard, use the primary zone as default and click Next.

SharePoint

Pick "All DNS Servers running on the domain controller in this domain" that is set by default -> click Next.

SharePoint

Provide the Zone name. In my case, I have created “SharepointApps.com”. Click "Next".

SharePoint

In the Dynamic Update window, accept as default -> click Next to complete the FLZ setup.

SharePoint

SharePoint

In the next step, create a wildcard alias named CNAME in your new domain. Right click on Create -> New Alias CNAME.


SharePoint

In the wizard, provide Alias name as “*”. Now, your FQDN looks like this “*.apps.com”.

Then, click on the Browse button to chose the target host of your domain.

SharePoint

Click OK to complete the process.

SharePoint

Configure Subscription settings and App management service application

The service application is used to provide the app permissions and creating the subdomains for the app. Before we proceed, please check the app management service and ensure that the subscription Settings Service is in running state.

Open SharePoint central administration >> Application Management >> Service Application >>Manage Services in Server.

SharePoint

Use the below PowerShell cmdlet to create the Microsoft Subscription Settings Service application.

  1. //Get the managed service account  
  2. $account = Get - SPManagedAccount "sharepoint20160\appservice"  
  3. //Create the new application pool for subscription settings service  
  4. $appPoolSubSvc = New - SPServiceApplicationPool - Name SettingsServiceAppPoolA - Account $account  
  5. //Create subscription settings service application  
  6. $appSubSvc = New - SPSubscriptionSettingsServiceApplication - ApplicationPool $appPoolSubSvc - Name SettingsServiceApp - DatabaseName MynewSubscriptionservice  
  7. //create proxy for the subscription settings service  
  8. $proxySubSvc = New - SPSubscriptionSettingsServiceApplicationProxy - ServiceApplication $appSubSvc  
  9. Use the below PowerShell cmdlet to create the App management service application  
  10. //Get the managed service account  
  11. $account = Get - SPManagedAccount "sharepoint20160\appservice"  
  12. //Create the new application pool for app  
  13. $appPoolAppSvc = New - SPServiceApplicationPool - Name AppServiceAppPool - Account $account management service  
  14. //Create app management service application  
  15. $appAppSvc = New - SPAppManagementServiceApplication - ApplicationPool $appPoolAppSvc - Name AppServiceApp - DatabaseName MyappDb  
  16. //create proxy for the app management  
  17. $proxyAppSvc = New - SPAppManagementServiceApplicationProxy - ServiceApplication $appAppSvc service  

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

Configure App Service URL

Open SharePoint central administration-> Apps -> App Management -> Configure App URLs.

SharePoint

Provide the App Domain and App Prefix.

SharePoint

Click OK.

Open Visual Studio -> New project, and pick a template SharePoint add-in just like below.

SharePoint

Click OK. Choose the add-in type SharePoint hosted or provider hosted add-in.

  • SharePoint Hosted Add-in -> It’s hosted on the SharePoint farm.
  • Provider-hosted Add-in -> It deploys the contents and host outside of SharePoint like any web server and Azure websites.

In this demo, I have chosen SharePoint hosted add-in. Just click Next.

SharePoint

Choose the add-in version “SharePoint 2016”.

SharePoint

Click Finish.

After successful creation of add-in, the project looks like this.

SharePoint

  • Content -> Holds the style sheets; 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 in your project.
  • Scripts -> This module help to hold your JavaScript files like jQuery, Bootstrap references
  • 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 example - if you don’t need some modules, you can just exclude those without deleting.
  • Package – Helps to package your app modules into solution file.

Click on the page module -> Open default.aspx.

Under contentplaceholdermain, replace the HTML below.

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

Click Save.

Right click on the solution file and click "Deploy it into SharePoint".


SharePoint

SharePoint

Open the site

Click on the gear icon -> click site contents.

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


SharePoint
Now, you know how to set up a SharePoint add-in development environment and create a project in it. We will discuss more in my upcoming articles.

Happy SharePointing !......

Up Next
    Ebook Download
    View all
    Learn
    View all