Wednesday, January 29, 2014

WAT? I said, Web App Template! (Which helps you Windows Store App your Web Site...)

JohnShew's Blog - Website to App — The Web App Template Simplifies Windows App Development


At BUILD last year, Guggs and I showed how Giorgio Sardo and his team here in DPE have been coding together with great companies — like Khan Academy — to move entire websites into Windows Store apps — more or less effortlessly.

As I showed in the demo, the trick to making this so easy is the new Web control we released in Windows 8.1. The Web control provides an execution environment for Web content that exposes the most essential features of the browser so your Web content largely just works inside the control.

We’ve been very excited about this approach and have been doing a lot of joint projects with developers using this approach. Coming out of this we found an even easier way to port website content.

Rather than requiring developers to recreate the wheel for features such as in-app navigation, charm integration and live tiles, all that functionality is now built into the template and controlled through simple settings in a config file. And with HTML5 as the app platform, there is one seamless development approach across your Web app and your Windows apps, which makes for an easy transition for all Web developers. It really is cool.

Giorgio, Jeff Burtoft, and a handful of other engineers on my team, have packaged these ideas into a nice Web App Template, a tool that makes this approach easy to do for both Windows 8.1 and Windows Phone 8 apps.

We’ve invested in this project because we think there are a lot of great Web apps out there that will also make great Windows apps. 


CodePlex - Web App Template


Web App Template is a tool that uses your Web App as the core for a full featured Store App for Windows 8.1 and Windows Phone 8. The Web App Template (WAT) is implemented as a Visual Studio template that you install through our one click installer. You can then start a new project type of “Web App Template”. Plug your Web App values into the config file, and hit F5 to see it run.

At runtime, the WAT project will then take your Web App and config data (meta data), and build the Windows Store App:

WAT provides the key features most Web Apps will need to perform as a store app such as back buttons, navigation, Offline support, charm integration and much more.
The Web App Template allows you to use your web development skills and you’re touch friendly, responsive Web Apps to create high quality Windows Apps. Download the installer and get started today.

Source Code

git clone


In order to install the Web App Template you need to have Visual Studio 2013(Windows Store Express, Pro or Ultimate) or later and a machine or VM running windows 8.1. The Windows Phone 8 template requires that you have the Windows Phone SDK or Visual Studio Express for Windows Phone.

Then, download the installer for the appropriate project type and double click to install. Then choose “new project” from the file menu and select “web app template” from the file types. Note for the Windows Phone tool, an installer is not yet available, so you can instead us the development project as a base project.

Quick Start:

  1. Install the template. Note There is not yet an installer available for Windows Phone 8, so use the development project as a base project.
  2. In visual Studio, start a new Project and select the project type “Web App Template” under the JavaScript Section.
  3. Open the “config.json” file in the config folder, and enter data about your Web App
  4. Hit F5 and see you app in Action
  5. Update your app images and app details in the app manifest
  6. Submit to the store and reach new users


Web Application Template [Docs]



What can you do with WAT?

WAT is a very powerful tool and you can achieve many things. Some highlights are:

Live Tiles & Push Notifications

You can configure any RSS feed to update live tiles for your app or easily setup your website to push notifications and update live tiles even when the app isn't running.


You can integrate the share charm so your users can share content just like they would on any other Windows app


You can search WAT-based apps the same way you would in any Windows app - via the search charm. Try it now

Navigation Bars

You can add navigation bars which help users navigation around your app, just like in any Windows app

CSS Overrides

You can embed CSS styles which get inserted over the existing styles on your website. This is great for adjusting the style of the site when it is presented as an app

Hide HTML elements

You can hide name HTML element from your site. Great for removing the top navigation, footers etc which you do not need when the site is presented as an app


You can configure which urls remain inside the app and which ones open in the browser

HTML app

The config file is just a starting point. The app is a regular HTML Windows app which you can develop further to meet your requirements.


Very interesting project and one I'll be keep a close I on...

No comments: