UNDERSTANDING THE THREE APPS FOR SHAREPOINT DEPLOYMENT MODELS (part 1) - SharePoint-Hosted

Because SharePoint 2013 is moving in the direction of the cloud, there are three new types of deployment models available to help you achieve this goal for the Apps for SharePoint:

• SharePoint-hosted
• Autohosted
• Provider-hosted

Each one of these types of deployment models possesses characteristics that make it ideal for different types of app development. The following sections examine the deployment models in greater detail.

SharePoint-Hosted

The SharePoint-hosted deployment type represents a way to deploy client-side, lightweight apps to SharePoint 2013. The easiest way to think about the SharePoint-hosted app is as an application that has no server-side code. It is an application made up of static application files or pages that reside on your SharePoint tenancy or instance. Think of HTML and JavaScript files that enable client-side coding. When users access the SharePoint-hosted app, they are redirected to the page that contains your application. The SharePoint-hosted deployment type is good for lighter-weight apps such as branded list views, media apps, or weather apps.

If you decide to leverage the SharePoint-hosted deployment model, then you are limited to code that does not run on the server. However, also know that client-side applications can be quite powerful. For example, you can still use Silverlight with SharePoint 2013, and as mentioned, you also can take advantage of HTML (more specifically the newer HTML5 standards) along with JavaScript. You can use these in tandem with the client-side object model to interact with SharePoint data (for example, list data).

To help illustrate how you build a SharePoint-hosted app, let’s go ahead and create a simple SharePoint-hosted app using the following steps.

TRY IT OUT: Creating a SharePoint-Hosted App (SPHostedApp_SimpleDateApp.zip)

To complete this exercise, ensure you have the following:

• Visual Studio 2012 downloaded and installed
• SharePoint Developer Tools installed
• An Office 365 trial site set up for your use

You can reference the following TechNet article to walk through the process to set up your development environment: http://msdn.microsoft.com/zh-cn/library/sharepoint/ee554869_v=office.15_.

After you have your environment set up and ready, you can begin to create your first SharePoint-Hosted app:

1. Open Visual Studio, and click File ⇒ New Project. Navigate to Office/SharePoint ⇒ Apps, and then select App for SharePoint 2013.

2. Provide a name for the app (SPHostedApp_SimpleDateApp), select a location for the project, and click OK, as shown in Figure 1.

FIGURE 1

3. 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 (see Figure 2).

FIGURE 2

4. Click Finish.

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

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

FIGURE 3

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

FIGURE 4

8. Double-click the Default.aspx file 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>

9. After you finish adding the code snippet, right-click the SharePoint app (for example, SPHostedApp_SimpleDateApp) and click Publish, as shown in Figure 5. This builds your SharePoint-hosted app (that is, the .APP package discussed earlier) and prepares it for you for deployment to your SharePoint site.

FIGURE 5

10. When prompted, click Finish to complete the build process.

11. Windows Explorer automatically opens when the app is built, so copy the Windows Explorer folder path to the clipboard (see Figure 6). You’ll use this folder path when uploading the .APP package to SharePoint.

FIGURE 6

12. Navigate to your SharePoint Online site, and then click the New App to Deploy link.

13. In the Deploy App dialog, click the Upload link.

14. Click Browse, and then paste the folder path you copied to the clipboard in the Choose File to Upload dialog. Click Open.

15. Click OK, and then click Deploy.

16. When prompted to trust the app, click Trust It (see Figure 7).

FIGURE 7

17. When the app has been deployed, click the Site Contents link. You should now see your app listed on the page.

18. Click the app tile to load your SharePoint-hosted app (see Figure 8). Click the Push me! button.

FIGURE 8

How It Works

The SharePoint-hosted app is a lightweight application, and in this example you created and deployed a simple app that displayed the current time when you clicked a button object. To accomplish this, you can see in the following code that you added the hello function, created a new var object called currentTime, and then set the inner HTML of the timeDiv DIV object to be the string representation of the current Date.

...
<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>
...

You then deployed the App for SharePoint using the Publish feature in Visual Studio 2012. You also explicitly set the permissions level of the app before you deployed it, so when you clicked the Trust It button, this level of permission was enabled by SharePoint for your application. Setting permissions is a common task that you’ll do across many different SharePoint apps.

The benefits here are that you can not only get code off of the server, but you’re now leveraging JavaScript to bring your app to life on the client. The SharePoint-hosted deployment technique is lightweight, but you will find yourself doing a lot of client-side coding such as JavaScript or HTML, so make sure if you’re not up to speed on either of these two technologies you spend a little time learning them. If you want to move beyond the client and build cloud-based apps, you can use the Autohosted deployment model.