NodeJs Archives - Bool Tech

Have you noticed that you can right-click a web application project in Visual Studio and convert it to a provider hosted app? Well why not? Basically your own website and a SharePoint manifest is all what you need for a provider hosted app.

This discovery today made me think about all legacy web apps out there that can be converted to SharePoint apps. Traditionally we had to add plain links to external applications or embed them into an IFrame by hardcoding it in an .aspx page or a Page Viewer WebPart.

A web application that should be converted to a SharePoint app can be any web app, not only asp.net web site.

For a year ago, I had a little nodejs project to try out mongodb and knockout.js: Anvaska which I published as a heroku app:

Now I want to try to convert this to a SharePoint app. I am satisfied when:

A full page app is rendering Anvaska
The SharePoint app renders the chrome control (suiteBar) if the app runs within a SharePoint context

1. A full page app

To create a link to Anvaska is simple. I only have to add the link in the manifest file:

Anvaska

http://anvaska.herokuapp.com/?{StandardTokens}

Anvaska

http://anvaska.herokuapp.com/?{StandardTokens}

But when I click on the app, there is a problem:

A “POST” to this site? Why? The reason is the application page called appredirect which makes a “POST” call:

/_layouts/15/appredirect.aspx?instance_id={F9049494-42D0-4077-9F34-88A35B7271B9}

In the hive you can see why. The redirect page uses a form and POST method:

&lt;form id=&quot;frmRedirect&quot; action=&quot;&lt;%= SPHttpUtility.HtmlEncode(SPHttpUtility.UrlPathEncode(RedirectLaunchUrl, false)) %&gt;&quot; method=&quot;post&quot;&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPAppToken&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(AppToken) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteUrl&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(Web.Url) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteTitle&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(Web.Title) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteLogoUrl&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(Web.SiteLogoUrl) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteLanguage&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(Web.UICulture.Name) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPSiteCulture&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(System.Threading.Thread.CurrentThread.CurrentUICulture.Name) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPRedirectMessage&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(RedirectMessage) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPErrorCorrelationId&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(ErrorCorrelationId) %&gt;&quot; /&gt;
 &lt;input type=&quot;hidden&quot; name=&quot;SPErrorInfo&quot; value=&quot;&lt;%= SPHttpUtility.HtmlEncode(ErrorInfo) %&gt;&quot; /&gt;
&lt;/form&gt;

<form id="frmRedirect" action="<%= SPHttpUtility.HtmlEncode(SPHttpUtility.UrlPathEncode(RedirectLaunchUrl, false)) %>" method="post">

</form>

Just of curiosity, I tried to change method=”post” to method=”get” and the app worked. Of course you never should change any SharePoint built-in controls or pages. So there must be another solution. The asp.net web sites are okay with the external POST calls, but pages like wordpress, *.herokuapp.com don’t allow external POST redirects.

The anvaska application uses nodejs, expressjs. To solve this issue in this particular application I can do a redirect in express js:

; title: ; notranslate ]
var express = require(&quot;express&quot;);
var app = express();
app.post('/', function(req, res){
    res.redirect(req.url);
});
app.listen(process.env.PORT || &quot;8080&quot;);

; title: ; notranslate ]

var express = require("express");

var app = express();

app.post('/', function(req, res){

res.redirect(req.url);

});

app.listen(process.env.PORT || "8080");

SharePoint Matryoshka

To overcome this issue with the POST verb, a nested iframe can be used. Recently, I wrote a post about “Provider Hosted First Approach” where I presented the original idea of Thomas Deutsch. The implementation is an SPAppIframe which covers the whole html body. In an app part it would cause a nested iframe. But it would work.

&lt;WebPartPages:AllowFraming ID=&quot;AllowFraming&quot; runat=&quot;server&quot; /&gt;

&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;JSDEV - App Part&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            html, body {
                overflow:hidden;
            }
        
            body {
                margin:0px;
                padding:0px;
            }
         
            iframe {
                border:0px;
                height:100%;
                width:100%;
            }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;SharePoint:SPAppIFrame ID=&quot;SPAppIFrame1&quot; 
            runat=&quot;server&quot; 
            src=&quot;http://localhost:9000/#?SPHostUrl={HostUrl}&amp;amp;SPAppWebUrl={AppWebUrl}&amp;amp;SPLanguage={Language}&amp;amp;SPClientTag={ClientTag}&amp;amp;SPProductNumber={ProductNumber}&quot; 
            frameborder=&quot;0&quot;&gt;
        &lt;/SharePoint:SPAppIFrame&gt;
    &lt;/body&gt;
&lt;/html&gt;

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>

<head>

<title>JSDEV - App Part</title>

html, body {

overflow:hidden;

}

body {

margin:0px;

padding:0px;

}

iframe {

border:0px;

height:100%;

width:100%;

}

</style>

</head>

<body>

<SharePoint:SPAppIFrame ID="SPAppIFrame1"

runat="server"

src="http://localhost:9000/#?SPHostUrl={HostUrl}&amp;SPAppWebUrl={AppWebUrl}&amp;SPLanguage={Language}&amp;SPClientTag={ClientTag}&amp;SPProductNumber={ProductNumber}"

frameborder="0">

</SharePoint:SPAppIFrame>

</body>

</html>

2. SharePoint Chrome Control (suiteBar)

To add a SharePoint Chrome Control is easy. Just follow this MSDN article:

How to: Use the client chrome control in apps for SharePoint

Add a javascript file to your project: spapp-chrome.js and refer to it from your website page. That’s it. Here is the screenshot:

Summary

With a little effort, any legacy web application can be converted into a SharePoint app and be part of a bigger intranet, can be added by users in the sites where it is meaningful rather than just adding links to all existing external applications. These SharePoint apps could even interact with SharePoint and even have appwebs if it makes sense. What do you think? Let me know.

Recently I had an exciting mail conversation with Thomas Deutsch. He came up with an idea how to fasten the development of apps. This smart approach is called “Provider Hosted First”. See Thomas’ original blog post. Here are some highlights:

What you actually do is a local website which runs in grunt server:

localhost:9000

1	localhost:9000

Then a SharePoint-hosted app is created with an SPAppIframe that refers to that local app site. Genious!!!

Some key features of this approach:

This local app contains a livereload script. Your sharepoint app is updated every time you save your css, js, html file in your IDE
Grunt minifies, bundles your assets
Grunt runs your tests automatically when your content is modified
The SharePoint app can be on Premises, on Office 365, wherever you want it.

Video

See the video how it looks like to develop using this approach

Kategoriarkiv: NodeJs

Convert any web app to a SharePoint app

1. A full page app

SharePoint Matryoshka

2. SharePoint Chrome Control (suiteBar)

Summary

SharePoint Apps: “Provider Hosted First” Approach

Video