Download Code: HelloWorld
In this article I have explain how to configure sharepoint add-ins development environment and create a simple hello world web part in sharepoint server 2016 on-premises.
Let’s get started
Before start we discuss about the things required for setting up sharepoint add-in development environment.
- Create Forward Lookup Zone.
- Create CName Alias
- 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
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
Next step 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 look 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 check the app management service and subscription settings service are in running state
Open sharepoint central administration -> Click Application management ->under service application ->Manage services in server
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
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 //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
Open sharepoint central administration-> Click Apps -> App management -> Configure App URLs
Provide the App Domain and App Prefix
Open visual studio -> New project -> Pick a template sharepoint add-in
Choose the add-in type sharepoint hosted or provider hosted addin
- Sharepoint Hosted Addin -> It’s hosted inside the sharepoint farm
- Provider hosted addin -> It deploy the contents and host outside of sharepoint like any web servers and azure websites.
In this demo I have choose sharepoint hosted addin -> click Next
Choose the add-in version “Sharepoint 2016”
After successful creation of add-in project structure look like this
- 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 holds the pages inside your project.
- 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 with out deleting
- Package – Helps to package your app modules into solution file. App
Click on the page module -> Open default.aspx
Under <asp:contentplaceholdermain> tag replace the HTML below
<div> <p id="message"> <!-- The following content will be replaced with the user name 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 site
Click on gear icon -> Click site contents
Now the app has been successfully installed in your site collection
Click on the Helloworld sharepoint addin
Now you know how to setting up sharepoint addin development environment and create a project into it.
We discuss more in my upcoming articles,
Happy sharepointing !……