SharePoint 2013 - Develop SharePoint Hosted Apps-example

I am assuming that our DEV environment is single server farm which includes DNS as well in same machine

Following are very high level steps involved in setting up DEV environment for SharePoint hosted apps

1. Create forward look up zone in DNS server (which is mandatory for apps)

2. Provision SPSubscriptionSettingsService and AppManagementService

3. Configure App Url in SharePoint Central Admin

4. Develop sample SharePoint hosted app

1. Create forward look up zone in DNS server

     1.1  From your VM or server--->All Programs--> Administrative Tools---> DNS

     1.2 ForwardLookUpZones--->New Zone

            

     1.3 Choose Primary Zone and click next

        

       1.4  Choose "To all DNS servers running on domain controllers in the domain" and click

              Next

   1.5 Enter zone name as "spdevapps.com"

    

    1.6  Choose "Do not allow dynamic updates" and click Next & Finish as well

 

   1.7 Upon successful, right click on newly created zone and choose "New Alias (CNAME)"

   1.8 Enter * as Alias name

     

    1.9 Click browse fr FQDN---> Double click on your server name

 

   1.10 Double click on Forward Lookup zones

 

  1.11 Choose your Server name and click OK until you go back to the main screen

 

    1.12 Go to command prompt and flush dns: ipconfig /flushdns

2. Provision SPSubscriptionSettingsService and AppManagementService

    2.1 Create/Configure the App Management Service
    2.2 Ensure that the SPSubscriptionSettingsService and        
         AppManagementServiceInstance services are running with these below cmdlets(if    
         they are not running this cmdlet will make them to run)

        Get-SPServiceInstance | where{$_.GetType().Name -eq       
        "AppManagementServiceInstance" -or $_.GetType().Name -eq 
        "SPSubscriptionSettingsServiceInstance"} | Start-SPServiceInstance

         If already running,

    2.3 If not, check  whether respective services are running or not in CA-->Manage 
          services on server under System Settings category

   2.4 We will have to provision following services along with their proxies, no worries, it's 
         very simple. Run following script @ SP powershell console.

        Note - Replace 'Get-SPManagedAccount' with your respective account 

--------------------------------------------------------------------------------------------------------------------------

$account = Get-SPManagedAccount “xxxx\administrator”(your domain name\user name)

$appPoolSubSvc = New-SPServiceApplicationPool -Name SettingsServiceAppPool -Account $account

$appPoolAppSvc = New-SPServiceApplicationPool -Name AppServiceAppPool -Account $account

$appSubSvc = New-SPSubscriptionSettingsServiceApplication –ApplicationPool $appPoolSubSvc –Name SettingsServiceApp –DatabaseName SettingsServiceDB

$proxySubSvc = New-SPSubscriptionSettingsServiceApplicationProxy –ServiceApplication $appSubSvc

$appAppSvc = New-SPAppManagementServiceApplication -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName AppServiceDB

$proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc

--------------------------------------------------------------------------------------------------------------------------

The above script provisions following service applications.

AppManagement Service & SubscriptionSettingsServiceApplication.

Check in CA

Go to Central Administration àApplication Management àManage service applications

3. Configure App Url in SharePoint Central Admin

    3.1 Go to Central Administration---> Apps-->Configure App Urls under App Management

    

     2.2 App domain would be - spdevapps.com

     2.3 App prefix would be - spapp

 4. Develop sample SharePoint hosted app
     4.1. Open Visual studio 2012 and select "App for SharePoint".

   4.2. In the New App for SharePoint wizard, add the SharePoint site URL that you want to 
   debug and then select the SharePoint-hosted model as the way you want to host your    
   app for SharePoint.

4.3. Click Finish.

4.4. After Visual Studio generates the project, double click the AppManifest.xml file, which is located within the SharePoint project.

4.5. In the Scope drop-down list, select Web, which is the scope of permissions that you’re configuring

 
4.6. In the Permission drop-down list, select Read, which is the type of permission you’re configuring.

4.7. Check the default.aspx page & other configurations.

4.8. Double-click the Default.aspx fi le and replace PlaceHolderAdditionalPageHead and
    PlaceHolderMain with the following bolded code.

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,

Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"

MasterPageFile="~masterurl/default.master" language="C#" %>

<%@ Register Tagprefix="SharePoint"

Namespace="Microsoft.SharePoint.WebControls"

Assembly="Microsoft.SharePoint, Version=15.0.0.0,

Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"

Assembly="Microsoft.SharePoint, Version=15.0.0.0,

Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"

Assembly="Microsoft.SharePoint,

Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderAdditionalPageHead"

runat="server">

<script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>

<link rel="Stylesheet" type="text/css" href="../Content/App.css" />

<script type="text/javascript" src="../Scripts/App.js"></script> 

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderId="PlaceHolderMain" runat="server">

<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();"/>

</asp:Content>


4.9 Deploy the app..

4.10 You can observe that the url of the app in output window

http://spapp-d61c11acb879cb.sharepoint2013apps.com:50000/SPHostedApp_SimpleDateApp/
Here 

spapp - is the prefix what we have provided

d61c11acb879cb- is the app id dynamically generated one

sharepoint2013apps- is our app domain name

SPHostedApp_SimpleDateApp- is our app name

Now check the app from the SharePoint site (where we deployed our visual studio app solution ) à Site ContentsàCheck our App .

click and check the functionality..

Note: It's very important... above steps are development environment related....when you deploy the app, we are deploying to only one site collection given during when we created project. What if, the app should be available for all site collections in the web application?

No worries, we can do that, by creating 'app catalog site' in CA.

CA-->Apps-->Manage App Catalog

Create new site collection -- no worries it's self explanatory, finally it looks like

click on site collection to check our newly deployed app in CA...

Our app looks likd as..............

we got it........

Please feel free to comment.... :)