Sign in

Hosted Web App Starter Pack

Everything you need to get started building a Windows Universal Hosted Web App as quickly as possible.

The Starter Pack makes it easy to start a new Hosted Web App project based on a W3C Web App manifest. It comes with everything you need, including:

  • Tools and a build process to help you generate, package, and launch your Windows App
  • Template W3C Manifest
  • ES6 support using Babel
  • Code linting using ESLint
  • JS bundling using WebPack
  • Sass support
  • Automatic Browser & App refress on HTML, CSS, and JS changes using BrowserSync
Getting Started

To get started, first fork the repo. Then clone to your machine and install the dependencies.

git clone https://github.com/<USERNAME>/hwa-starter.git && cd hwa-starter
npm install

To set up a local server with BrowswerSync to serve the content:

npm run serve

Next you can generate and launch a Windows app pointing to localhost. This has the same features as viewing your app in the browser, such as automatic refresh with BrowserSync, but it also allows you to access the Windows APIs from JavaScript.

npm run launch:local
Deploy

Deploying content

The first step to move to production is to deploy the build output from the dist/ folder. If you'd like to use Github Pages, you can simply run the following command:

npm run deploy

Build Production App, Submit to Store

You can create an APPX package with your app contents for submission to the Windows Store, even on platforms that do not support installing the Windows SDK such as OS X and Linux.

  1. Set up a Microsoft Developer account here.
  2. Reserve the name of your app and obtain its identity details (under App management | App identity), including Name, Publisher, and PublisherDisplayName.

  3. Generate the app pointing at production content:

    
                                        npm run generate:prod

    Optionally test the production app locally using:

    
                                        npm run launch:prod
  4. Update the appmanifest.xml file located in the tmp/prod/<APP-NAME>/windows/manifest directory of the app with the identity details. The app manifest XML has already included placeholders indicating where each piece of information needs to be replaced.

  5. Build the APPX package:

    
                                        npm run package
  6. Upload package to the Windows Store, and then complete the submission process.
Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.