image.png

in SharePoint 2013

Autohosted SharePoint Apps Deep Dive – Part 1

Autohosted SharePoint Apps Deep Dive Part 1

Autohosted SharePoint Apps Deep Dive Part 2

Autohosted SharePoint Apps Deep Dive Part 3

Introduction

In my previous blog post I introduced the new app model in SharePoint 2013. Developers can easily extend SharePoint 2013 by building apps.

You will need to consider how you are going to build an app depending on the available hosting options. At the end of the day, your app needs to live where users can get access to.

Apps can either live in SharePoint or outside SharePoint.

There are basically two broad hosting options available:

  • SharePoint Hosted – App is installed and hosted in SharePoint itself
    • This will create spin a new web (SPWeb – a sub-site where your app is deployed) to host the app
    • As it is a SPWeb, you can have SharePoint Pages, Lists, Document Libraries
    • However, you can only use client-side coding here – JavaScript, HTML
    • You do have JavaScript Client Side Object Model (JCSOM) to the rescue!
  • Cloud Hosted – App is installed in SharePoint but hosted elsewhere (in the cloud) and interact with SharePoint.
    • Flexible model
    • App is isolated from SharePoint and is associated with your web project or MVC project or even a Windows Azure project
    • You interact back to SharePoint using OAUTH Permissions
    • You can use REST endpoints and CSOM .NET along with JCSOM

The Cloud Hosted model can be further divided into two different categories:

  • Autohosted – SharePoint will automagically deploy your app to Windows Azure websites.
    • This is only supported with Office 365 SharePoint Online
  • Provider Hosted – You as a developer or an Enterprise is responsible in deciding where you want to host your app.
    • You may decide to host in a Windows Azure website or your own hosting provider.

SharePoint App

This post introduces you to building autohosted apps with Visual Studio

What do you need to build autohosted apps?

You will need:

Autohosted App – Hello World!

Once you have everything required to build autohosted apps:

Open Visual Studio 2012 as an administrator [Unfortunately you will need to run Visual Studio as administrator to build SharePoint apps]

Create a new project and choose App for SharePoint 2013 project

SP Project

In the ‘New app for SharePoint’ dialog, notice you have the choice to where you want to host your app. The default is ‘Autohosted

Enter the SharePoint 2013 online site Url where you want to deploy and debug the app. This should be a developer site.

New app for SharePoint

Click Finish to continue

Visual Studio will generate the required project and files.

Exploring the Autohosted App Project

Below is the screenshot of the solution explorer:

solution explorer

Visual Studio automatically created an ASP.NET web project and associated the same with the app for SharePoint project.

You can see this association in the app for SharePoint project properties window:

image

This is where most of the app code is going to live!

This web project will be automagically deployed to Windows Azure Websites when you deploy the app to your production site.

Debugging Autohosted Apps

So far we haven’t added any code but lets see what happens when we debug this autohosted app.

Debugging is easy! Just press F5 to start debugging

Since the app itself [ContactsListApp project] is deployed to the SharePoint 2013 Online site, you will be prompted to enter the credentials (for Visual Studio to access the site to deploy the app)

image

[You may be prompted for credentials again– this time to authenticate to SharePoint site as your browser has to open the SharePoint site to take you to the app]

Once authenticated you will see the screen where you are asked whether you trust the app

image

This screen shows you what the app can do with the SharePoint site.

[If you are installing third-party apps, it is highly recommended to read and understand what the app is and what rights it has before installing the app]

Click Trust It and you will see your app – which just displays the title of the developer site

image

If you notice in the address bar, you can see that the Url now says its http://localhost – how did this happen?

During F5, Visual Studio will deploy the web project in the local IIS Express than Azure website so you don’t have to consume any azure resources and it becomes much easier to debug your web project as it is running locally.

The diagram below shows what happens when you debug an autohosted app:

image

You can see the IIS Express icon in your taskbar

image

This loads the default page in your web project which in this case is the Default.aspx

You can see the code to display the Title is in the Default.aspx.cs

image

Exploring the Default Code in Default.aspx.cs

Below is the code generated by default:

protected void Page_Load(object sender, EventArgs e)
{
    // The following code gets the client context and Title property by using TokenHelper.
    // To access other properties, you may need to request permissions on the host web.

    var contextToken = TokenHelper.GetContextTokenFromRequest(Page.Request);
    var hostWeb = Page.Request["SPHostUrl"];

    using (var clientContext =
        TokenHelper.GetClientContextWithContextToken(hostWeb, contextToken, Request.Url.Authority))
    {
        clientContext.Load(clientContext.Web, web => web.Title);
        clientContext.ExecuteQuery();
        Response.Write(clientContext.Web.Title);
    }
}

As you can see it uses the TokenHelper class to get the required OAuth tokens to interact with the SharePoint site. It then uses the .NET CSOM to interact with the site.

Exploring the App Manifest

I think it is important to explore the app manifest which describes your app properties, where the app will run, start page of the your app etc.,

You can find the app manifest in the app for SharePoint project – double click the AppManifest.xml to open the manifest designer

image

I will go through some of the properties in another blog post but this is where you can change your basic app properties

App Manifest – View Code

There is more to the app manifest!

Right click the AppManifest.xml and select ‘View code

This will open the XML file where you can edit the app manifest directly

image

Notice you have lots new properties – You are not required to edit  them manually as they are managed by Visual Studio. You will need these in few advanced scenarios.

In the next blog post, lets build the simple contacts lists autohosted app.

Meanwhile, if you have any questions, feel free to leave a comment! 🙂

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.

Webmentions

  • Autohosted SharePoint Apps Deep Dive – Part 2 ← Chaks' Corner November 6, 2013

    […] Autohosted SharePoint Apps Deep Dive – Part 1 Autohosted SharePoint Apps Deep Dive – Part 3 […]