How To Create SharePoint Hosted App

Apps for SharePoint are self-contained pieces of functionality that extend the capabilities of a SharePoint website. Basically, in SharePoint, the application can be hosted by 3 types.

1. SharePoint Hosted Application
   Provide basic resource into the app or web, such as HTML/CSS/JS files etc. No Server-side code runs under SharePoint-Hosted application.
   
   
2. Auto Hosted Application
   Auto Hosted apps for SharePoint are Cloud-Hosted apps whose remote computers are provisioned and deployed for you in Windows Azure.
   
   
3. Provider Hosted Application
   Components that are deployed and hosted outside of SharePoint farm.

Let us concentrate on the SharePoint-Hosted Application. To create SharePoint Hosted Apps, please follow the below approach.

1. Configure DNS for hosting share point app.
   
2. Configure App URL.
   
3. Start the App Services.
   
4. Create SharePoint Hosted Apps.

Configure DNS for hosting SharePoint app.

1. Open DNS
   
   
   
   
2. Right click on Forward Lookup Zones and select New Zone.
   
   
   
   
3. Click on Next button.
   
   
   
   
4. Select the appropriate zone, then click on Next button.
   
   
   
   
5. Provide the Zone and click on Next button.
   
   
   
   
6. Navigate up-to Dynamic Update screen by clicking on Next button.
   
   
   
   
7. Click on Finish button to complete the DNS Configuration.
   
   
   
   
8. Right click on newly created zone and select New Alias (CNAME) option.
   
   
   
   
9. Enter asterisk(*) mark in Alias name and appropriate name for fully qualified domain name.
   
   
   
   
10. Press OK button.
    
    
    

We need to register this newly created app domain with SharePoint. Go to Central admin, click on Apps on right menu. It will give you a message saying, "The Subscription Settings service and corresponding application and proxy needs to be running in order to make changes to these settings. "

It means that we need to configure Subscription Settings Services before configuring the app URLs. Let's start and configure the required services for app development.

Start/Configure the App Services

We need to start and configure the below two services for app.

App Management Services

Method 1 - PowerShell

Before you begin, make sure that the user running the Windows PowerShell cmdlets has the following memberships on all databases that you will be using.

• db_securityadmin
• db_owner

1. Launch SharePoint 2013 "Management Shell" in administrative mode.
   
   
   
   
2. Get the Farm account
   
   $account = Get-SPManagedAccount FarmAccount
   
   
3. Create a new application pool using this account
   
   $appPoolAppSvc = New-SPServiceApplicationPool -Name AppServiceAppPool -Account $account
   
   
4. Create the "App management" service application, using this application pool
   
   $appAppSvc = New-SPAppManagementServiceApplication -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName "databaseName"
   
   
5. Create a proxy for the service application.
   
   $proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc
   
   
   
   
6. Start the "App Management Service" service.
   
   Get-SPServiceInstance | where-object {$_.TypeName -eq "App Management Service"}
   (Get-SPServiceInstance | where-object {$_.TypeName -eq "App Management Service"}).Provision()
   Get-SPServiceInstance | where-object {$_.TypeName -eq "App Management Service"}
   
   
   

Complete Script

add - pssnapin "Microsoft.Sharepoint.Powershell"
$account = Get - SPManagedAccount FarmAccount
$appPoolAppSvc = New - SPServiceApplicationPool - Name AppServiceAppPool - Account $account
$appAppSvc = New - SPAppManagementServiceApplication - ApplicationPool $appPoolAppSvc - Name AppServiceApp - DatabaseName "databaseName"
$proxyAppSvc = New - SPAppManagementServiceApplicationProxy - ServiceApplication $appAppSvc
Get - SPServiceInstance | where - object {
    $_.TypeName - eq "App Management Service"
}(Get - SPServiceInstance | where - object {
    $_.TypeName - eq "App Management Service"
}).Provision() Get - SPServiceInstance | where - object {
    $_.TypeName - eq "App Management Service"
}

Method 2 - Central administration

1. Open SharePoint 2013 central administration, click on "Application Management->Manage Service Applications.
   
   
   
   
2. Click on New ->App Management Service.
   
   
   
   
3. Type a name for the service application and its database.
   
   
   
   Type a name for the application pool and the account used by the pool.
   
   
   
   
4. The service application and its proxy are created.
   
   
   
   
5. The last action is to start the App Management Service.
   
   Click on Application Management ->Manage services on server.
   
   
   
   
6. Click on Start in front of the service.
   
   
   

Microsoft SharePoint Foundation Subscription Setting Services

Before you begin, make sure that the user running the Windows PowerShell cmdlets has the following memberships on all databases that you will be using,

• db_securityadmin
• db_owner

Open the PowerShell window and execute below script.

add - pssnapin "Microsoft.Sharepoint.Powershell"
$account = Get - SPManagedAccount sharepoint13\ administrator
$appPoolSubSvc = New - SPServiceApplicationPool - Name SettingsServiceAppPool - Account $account
$appSubSvc = New - SPSubscriptionSettingsServiceApplication - ApplicationPool $appPoolSubSvc - Name SettingsServiceApp - DatabaseName SettingsServiceArvindDB
$proxySubSvc = New - SPSubscriptionSettingsServiceApplicationProxy - ServiceApplication $appSubSvc

Once this script is successfully executed. We have created a new service Application, and its proxy which will run under its own Service App Pool.

To verify this go to Central Admin-> Service Applications-> Manage Service Applications > you can see below Svc application created , up and running.



Configure App URL 

1. Go to Central Administration, click Apps.
   
2. On the Apps page, click Configure App URLs.
   
3. In the App domain box, type the isolated domain that you created for hosting apps.
   
   For example, vmsharepdev03.com or vmsharepdev03-Apps.com.
   
   
4. In the App prefix box, type a name to use for the URL prefix for apps.
   
   For example, you could use “apps” as the prefix so that you would see a URL for each app such as “apps-12345678ABCDEF.vmssharepdev03.com”. The following illustration shows the Configure App URLspage after you have filled in the App domain and prefix.
   
   The Configure App URLs page in Central Administration shows the App domain and App prefix.
   
   
   
5. Click OK.

Create SharePoint-Hosted App, Open Visual studio and select App for SharePoint

Provide required data. While selecting the hosting option, remember to select the hosting option asSharePoint-Hosted.



Open default.aspx page and find the <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"></asp:Content> block.

Copy and paste the below code inside PlaceHolderMain Area.

<div>
    <p id="message">
        <!-- The following content will be replaced with the user name when you run the app - see App.js -->initializing...
    </p>
</div>
<script type="text/javascript">
    function Hello() {
        var currentTime = new Date();
        $get("timeDiv").innerHTML = currentTime.toDateString();
    }
</script>
<div id="timeDiv"></div>
<input type="button" value="Push ME!" onclick="Hello();" />

We are all set to deploy our SharePoint-Hosted App. Right click on Solution and say Deploy.

Once App is deployed successfully, go to SharePoint Application and click on Site Actions the little gear symbol on top right and click on Site Content. You can see your App there.





Click on Trust it ! to view the app functionality. In this case current date.



Note If SharePoint app continuously prompts for credentials then we have to disable the Loop back check to resolve the issue.

Follow below steps to disable the Lookback check.

Step 1

Use Windows Icon + R to launch a Run menu

Step 2

Type the command “REGEDIT”



Step 3

Expand node “Computer -> HKEY_LOCAL_MACHINE -> CurrentControlSet -> Control”



Step 4

Locate Key by the name “Lsa” as shown below



Step 5 - Add a new DWORD Entry 

• Select “Lsa” Key.
  
  
• In the right panel, create a new DWORD Entry, as shown below.
  
  
  
  
• Enter “DisableLoopbackCheck” in Value Name field.
  
  
• Enter “1” in Value Date Field.
  
  
• Select “Hexadecimal” radio button.
  
  
  
  
• Click OK to save the DWORD