Developing a SharePoint-Hosted App in SharePoint 2013 Part -I

Hi Guys,

This is the first post from me on SharePoint 2013. As part of R&D on SharePoint 2013 Apps, I got some good information from the msdn site and others. So I wanted to share with you…

Before start reading this post, have a look at this post to know basics about apps and why aapps?

In simple words, apps are of three types based on their hosting model

SharePoint Hosted: If you deploy/install your app with in the sharepoint server it is called sharepoint hosted app. In this, when we deploy the app a sharepoint site will be created and all the app content stored in the sharepoint itself. The app content will be lists/pages/content types etc.   

Auto Hosted (Azure): If we host the app on Windows Azure, it is called auto hosted. The app will sit in the cloud, we will download and install this app in to the sharepoint. When we install, the app will automatically create a site and provides us a windows azure site.

Provider Hosted: If you host your app in any other cloud (other cloud providers) environment, it is called Provider hosted. The logic and code related to app will be resided external to sharepoint. The code/logic might be in C# or JavaScript or php or java or anything. Here sharepoint just work as a place holder for the app.

Apps are isolated identities and they need a separate domain(called app domain) to deploy/install.one app cannot communicate with other apps. Once you deploy/install a sharepoint hosted app, it creates a separate site.

E.g. :  http://app-6d52f0e761fc86.apps.purnam.com/DemoApp1/Pages/Default.aspx

 i.e. http://[Appprefix]-[App Id].[App domain name]/[AppName].

Now let's create a simple sharepoint-hosted app with a static text and an alert message..

Developing a SharePoint Hosted App :

Go to visual studio 2012 à Create -> New -> Project -> select Office/Sharepoint category and then select the Apps under that.

Choose the App for SharePoint 2013 template .And give the required information

Give the name of the app, the url of the sharepoint site, give the hosting option as “SharePoint-hosted”. In this post I am showing only how to develop a sharepoint hosted app. If you want to deploy your app to windows azure, you need to select the “Auto-hosted”. If you want to deploy your app to any other cloud (or your own cloud) select “Provider-hosted” option.

Once you say finish, Your App Solution structure will be like this :

If you notice this, there is one feature, some css, image , javascript files along with a default.aspx page.

This default.aspx page is the landing page of your app site (When you deploy your app a site will be created and this page will be the home page of this site).

If you have look at to the Default.aspx page, you will find a head and main place holder and references to the App.css and App.js files. Along with this it calls the sharePointReady function of App.js file.

In this default page im writing a content with the h1 tags like this

 

In App.js by default CSOM code will be there. Here Sharepoint Ready function calling the  getUserName function. Now I am adding a simple function called ShowAlert(), just to show an alert when we access the app. Check this

Now build the project and then try to deploy it. You will find this below error (if you are trying to deploy the app for the first time without service apps creation and app domain creation).

The reason for this deployment error is you need set some prerequisite settings before deploying the app. These are the below settings/configurations to install and configure the apps in SP2013 successfully. 

·         Create an Isolated domain for the app

·         Create/Configure the App Management Service

·         Create/Configure the Subscription Settings Service

Creating Isolated Domain for the Apps :

Create the app domain using PowerShell cmdlets (There are some other approaches to create the app domain but I am showing here with the PowerShell as i am deploying in a single server work group environment )

Step 1 : 

Open the SharePoint 2013 Management PowerShell with Admin rights

Check the Admin and timer services running or not (if you say start it will start if they are stopped) with these commands

 

net start spadminv4

net start sptimerv4

For continuation click here..Developing a SharePoint-Hosted App in SharePoint 2013 Part -II