Getting Started

How to download and install WAT and get started with your first WAT-based app

The WAT tool is an extension to Visual Studio 2013 which adds the 'Web Application Template' to the list of avaliable project types in Visual Studio.

A 'Web Application Template' project is a HTML/JavaScript Windows Store app that features a Json-based config file that you can configure to add the relevant parameters for the web content you want to feature in your app. To learn more about how to configure the Json file see the Json Reference section.

At this time, WAT only supports HTML/JavaScript apps for Windows / Windows Phone 8.1. Xaml\.net and C++ languages are not supported. C# and XAML is used for the Windows Phone 8.0 WAT tool

Install the Web App Template

  1. Ensure you have Windows 8.1 with the latest updates installed (Windows 8.0 is not supported)
  2. Ensure you Have Visual Studio 2013 with Update 2 installed. You can get a free edition called Microsoft Visual Studio Express 2013 with Update 2 for Windows which will give you everything you need to use WAT for both Windows and Windows Phone 8.1.
  3. If you plan to use the Windows Phone 8.0 (silvelright) template, ensure you have the Windows Phone SDK 8.0.
  4. Download the installer from http://wat.codeplex.com.
  5. Open 'installable template' folder and double click 'VSIX-web-app-template.visx'. Follow the on-screen prompts to install the tool.
  6. When creating a new project in Visual Studio you will see 'Web app template' listed under Templates > Other Languages > Javascript. Use this to create your WAT-based app project

Create your first app

By default the web application template project uses a config file that is setup for this website. This config file showcases most of the features in WAT and it is a great starting point to customise for your own app.

To create your first WAT-based app, follow these steps:

  1. Ensure you have installed WAT (see 'Install the Web App Template' above)
  2. Create a new project in Visual Studio and use the 'Web app template' listed under Templates > Other Languages > Javascript
  3. You can run the app immediately and you'll see a modified version of this site inside your app
  4. Refer to the Json Reference section for details on how to configure your Json file for yor own web content

The Visual Studio project structure

When you create an app based on the 'Web Application Template' you will create a native app with a bunch of pre-defined files. Some of these are intended for you to change, some are not. This section gives you an overview of the main files that are included in the default project.

The exact location of these files will vary based on whether you are using the Universal app template or the Windows Phone 8.0 (silverlight) template. However, in both cases, the files serve the same purpose.

The default WAT project structure (for the Universal template)
File(s) Purpose Modify?
/config/config.json This is the main file you'll use to modify your app. The settings in this file drive the behaviour of the app, for more detail refer to the JSON section of this site. By default, this file is setup for the WAT documentation site (this site). Yes
/css/Default.css This is a default file provided by the default HTML5 app template and is not used or referenced in WAT. No
/css/injected-styles.css The contents of this CSS are injected into the web control that WAT renders. You can use this file to override CSS that is provided by the site you are tragetted. Doing this gives you the ability to alter the appearance of the site and make it feelmore like a native app. This is a standard CSS3 file so you can do anything you could normally do in CSS3 here. Yes
/css/wrapper-styles.css The contents of this CSS are used to style the native aspects of the app such as the nav bar, app bar etc. Refer to the documentation for styling standard HTML5 Windows apps for details on how to use this file. Yes
/images/ (folder) This folder contains the images that are used for tiles, store logos etc for your app. Overwrite these images with your own images to bring the website's brand through to the app. You can use the Windows store image generator tool on this site to generate a batch of images at the right size and dimension from a single high quality source image. if you do, this, simply drag the images into this folder and edit the package.manifest file to reference them. Yes
/js/default.js This Javascript file is referenced at the top of wat-wrapper.html which is the main HTML page for your app. In most scenarios you will not need to change this file, but if you need to add custom functionality, you can modify this file. Alternatively, for a cleaner approach you can add a new JS file to this folder and reference it in wat-wrapper.html. Yes
/templates/css/ (folder) The CSS files in this folder all apply default styles to the native parts of the app based on the settings in the config.json file. You shoud avoid modifying this file and use /css/wrapper-styles.css instead. No
/templates/js/ (folder) The JS files in this folder represent the core functionality of the WAT tool and you should avoid modifying them if possible. If you need to add custom javascript code, you should use /js/default.js No
/templates/error.html This HTML file is used if the app falls into an error state. You may want to change the text and appearance of this file. Yes
/templates/notify-settings.html This HTML file is used as the template for notifications. Yes
/templates/offline.html This HTML file is used if the app falls goes offline. You may want to change the text and appearance of this file. Yes
/templates/wat-wrapper.html This HTML file is the main page that the app uses to present the web content to the user. By default, the web content will take up the entire page, but in some scenarios, you may want to add native features and change the layout of this page. Yes
/default.html This HTML file is a default file provided by the underlying HTML app template and is not used in WAT. No
/error-example.html This HTML file is an exmaple of what you could do for an error page. Yes
/offline-example.html This HTML file is an exmaple of what you could do for an offline page. Yes
/package.appxmanifest This is a standard file for Windows apps and is used to modify the metadata, declarations, images and capabilities for the app. This is where you will define the images, background colour, title and description for your app (amongst other things). This file applies to any Windows app and is not provided by WAT. For further detail, refer to http://msdn.microsoft.com/en-us/library/windows/apps/br211474.aspx Yes