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 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 refresh on HTML, CSS, JS changes using BrowserSync
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
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
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.
-
Set up a Microsoft Developer account here.
-
Reserve the name of your app and obtain its identity details (under App management | App identity), including Name, Publisher, and PublisherDisplayName.
-
Generate the app pointing at production content:
npm run generate:prod
Optionally test the production app using:
npm run launch:prod
-
Update the appmanifest.xml file located in the tmp/prod//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.
-
Build the APPX package:
npm run package
- Upload package to the Windows Store, and then complete the submission process.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.