WinCoder Blog

Using Web App Template in App Studio to Publish WP8 in 25 Steps

Microsoft’s App Studio portal allows developers to build rapid prototypes as well as full blown applications quickly and easily on any machine with a capable web browser.  This has resulted in thousands of published apps from developers around the world!  In today’s post, I am going to focus on one of the many provided templates, the Web App Template.


The Web App Template started as a project on Codeplex that allows for the creation of an app experience on Windows Phone and Windows 8 by leveraging your existing website.  This approach comes with various pros and cons, namely that the more responsive design implemented in the original website the better the layout is when wrapped into an application, in addition the app requires accessibility to the internet for full functionality.  However, this can be seen as a great opportunity for developers looking to create applications which require little maintenance to render across multiple platforms i.e. Android, IOS, Windows etc.


Recently, the Web App Template was brought over as an available template in App Studio offering developers the ability to easily generate wrapped applications over existing mobile ready websites.  This can aid companies in rapidly creating a presence on the Windows ecosystem.  Using this approach, I was able to bring my mobile ready website @ over to the Windows Store as an app in only 25 steps!



1. A mobile ready / responsive website (It is encouraged to use only IP’s or sites that you own)

2. A free App Studio account available @

3. A Windows Store Developer Account – If you are reading this blog, I may be able to help you out with getting access, e-mail “p decarlo @ Micro soft dot com”


Step 1:

Login to App Studio, and start a new project.

When prompted to Choose your template, select the Web App Template


Step 2:

Click the Create Button



Step 3:

Note the default template which wraps

The fields should be fairly intuitive


Step 4:

Modify the values below:

1. App Title

2. Base Url – Note the site may render differently on a device, do not always assume it will look like the simulator on the left

3.  Message (I did not prefer the default grammar)

Then click Save


Step 5:

Select Themes from the top menu

Here you can optionally change the color of the Application Bar

Note: Other template modifications won’t render changes in the Web App Template


Step 6:

Let’s gather logos using Bing Image Search

Note: I am searching for Free to modify, share, and use commercially tagged images


Step 7:

Create a nice square logo larger

Note: It is recommended to use a large layout 400 x 400 or greater

App Studio will resize the large square image in the next step

7_TMV Logo

Step 8:

Select Tiles from the Top menu

Upload your image as the Small and Large Tile

Provide appropriate text for your tile

You may also click over to the Splash and Lock menu to modify the Splash Screen


Step 9:

Select Publish Info from the top menu

Click to modify the logo, again I used the same image from the previous step


Step 109_TMV_Logo:

Click Finish, then Generate and select the options below


Step 11:

Verify your app was successfully generated


Step 12:

Head to the Windows Store Dev Center

Select Dashboard


Step 13:

Select Windows Phone Store


Step 14:

Select Submit App


Step 15:

Select App Info


Step 16:

Reserve your App Name

Make sure this app matches the name given to your app in App Studio

If the name is unavailable, find one that is and regenerate your app in App Studio using the new name

Scroll down and select the appropriate categories and distribution options for your app


Step 17:

Head back over to your generated App Studio App and Download the publish package

Here you can also test your app by side-loading using the Installable Packages QR code

More information on these features can be found by clicking “How to”


Step 18:

Note the location of the downloaded publish package


Step 19:

Locate your downloaded publish package



Step 20:

Extract the .XAP file within


Step 21:

Head to Upload and Describe your packages in the Windows Phone Store


Step 22:

Click Add new and select your extracted .XAP file from the previous steps


Step 23:

Add the necessary description and keyword info

In addition you will want to provide the necessary images

I resized my logo used for the live tiles in order to create the 300×300 App Tile Icon

I used the Snipping Tool to grab screenshots from the App Studio previewer and resized to 1280×800

You could also obtain screenshots by sideloading your package into the emulator if you have the WP8 SDK installed


Step 24:

Click Review and Submit


Step 25:

Note the summary of your app submission

If everything looks good, click Submit




Download the published app!



1 comment for “Using Web App Template in App Studio to Publish WP8 in 25 Steps

Leave a Reply

Your email address will not be published. Required fields are marked *