March 8, 2016 10:00 am

Building Hosted Web Apps with Windows App Studio

If you have a web app that’s currently available publicly via URL, you can easily bring it to Windows 10 using Windows App Studio’s Hosted Web App template. Windows App Studio is an online service that makes it easy to build an app for Windows with no coding required.  This blog post will walk you through how to create your own Hosted Web App.

With Windows App Studio, you create a native Windows 10 app in a browser by starting with a template or a blank canvas, then add information, data, services, and styling.  Once you’re finished, you generate the app as a Visual Studio solution, a sideloading package, or a publishing package that lets you reach the users of 200+ million Windows 10 devices in the Windows Store.

One of these templates is the Hosted Web App (HWA) template, which brings publicly accessible websites and web apps to Windows. It will ask you to enter the URL of your web app, add an app icon, enter settings, and get it ready to publish on the Windows Store. The process takes an absurdly short amount of time.

Things that take more time than building a Hosted Web App with Windows App Studio:

  • Checking the mail
  • Microwaving a bag of popcorn
  • Checking out at a grocery
  • Brushing your teeth (hopefully)
  • Watching an ad break during a TV show (perfect time for to make a HWA!)

So if you have 3 minutes to learn, let’s get started!

The process of creating a Hosted Web App using Windows App Studio can be broken down into four steps.


Step One: Creating the project

If you haven’t already, sign up for Windows App Studio using your Microsoft account. It’s a completely free service. Once you’re signed up, navigate to the Start New Page, where you will see the option to create a Hosted Web App.


Once you click Hosted Web App, a pop-out will appear. Enter the name you want to use for your Windows app and click Start with this one!  The device previews are simply to show approximately how the app might look on different screens.


Step Two: Configuring the app

Once you have created the project, you’ll be taken to the Content Editing screen. On this page you will enter the URL for the site you’re converting. And that’s all you really need to do.


You then have the option to upload a Manifest, which is a JSON document containing information like application defaults and start-up parameters. You can also define additional URI rules and the rotation preference, but those are optional.

The preview on the right hand side of the screen shows what your Hosted Web App looks like on that type of device. If your preview doesn’t work, don’t worry. It usually just means the site doesn’t allow embedding in an iframe but should work when you generate the app.

After you enter in the URL and other information, you’re likely going to want to update the app’s icon from the default,  which is merely a placeholder. To do this, click the app icon on the navigation bar (to the right of the Content tab, highlighted below in green) to open the icon editor.


On the screen shown above, click the logo under the App logo heading (highlighted in purple above). That will open a file picker where you can select the icon you want to use. The tool will automatically generate the various icon sizes you need.

After you’ve done that, there is only one more configuration step. Click the Settings tab to edit your Store listing details such as your app’s description, language, Store association details, privacy policy, and other similar information. To publish to the Store, you must fill out the Store Association info here. For detailed instructions on publishing, please see the documentation.


Once you enter the information, click Save. Then you’re ready to finish and generate the app.

Step Three: Generating the app

When you’ve finished configuring settings, click the gray Finish button at the top. You’ll then be taken to a page where you can preview the app on different device form factors. The only thing you need to do on this page is click the big Generate button at the top. That will open a pop-out where you select the type of packages you want to generate. (The Visual Studio solution is always generated by default).

Note that in order to generate Publish packages, you’ll need to enter the Store Association details in the previous screen.


After everything is ready to go, click Generate. It should take under a minute to run the generation. After that, you will have the app ready to go with the package type(s) you selected.


That’s everything you need to do to create a Hosted Web App in Windows App Studio.

We’d love to hear your feedback as you use the tool, so please let us know your thoughts on our User Voice and the Windows App Studio forums. Happy app building!

Join the conversation

  1. What am I missing? Why would I do this rather than direct someone to the web page I wanted them to see in the first place?

    • Granted the use cases are fairly limited, but the advantage here is that it appears “native” to the device, so the user can pin the app on their mobile, xbox, or desktop in a way that’s familiar to them. Yes, they can do that too with a favorite/bookmark link, but this surfaces as an “app” in their app list, which may be the user preference. There are a few apps on my phone (Android) that are nothing more than webview hosts and I find them convenient because then using them doesn’t clutter up my browser tabs. In that case, you can also save logons to the app, so it automatically logs you on where that may or may not always work right in a browser depending on if cookies or cache gets cleared out, etc. I’m guessing the Windows API will be similar too, where you can integrate native features directly into the app, like local storage, camera, etc.

  2. Hi! Can I use this template to provide access to a MVC website (non-SPA). My first tries ends up with a ‘REDIRECT_FAILED’ error.

  3. Hoping someone can help me here. I created two web apps and have only 1 issue with both. Each one works great except that any click within the app forces the browser to open. How do I get it to utilize the browser within the app as expected?

  4. Hi there,
    I tried to create Web Hosted App with the Template for Web apps, however creating this seems very easy but most of the time the result of this App shows :
    Uh oh, we cannot display this content: ……N/A Failure name:REDIRECT_FAILED
    My aim was an App that simply opens the Yahoo mail website so that I don’t need to log in every time again.
    Does anyone has an idea, why so many URL’s can’t be opened with this Web App made by Window App Studio? Or should I go via a differnt template instead of the Web Hosted one?