Getting Started

Contents

1. Prerequisites
2. Installation
3. “Hello World!”
4. Next Steps

## Prerequisites

To use the AppX Generator, you will need to have Git, NodeJS, and NPM installed.

Git

You can get Git here. If you are on Windows, during the installation, make sure you select the second option, which will allow you to run Git from the command prompt:

NodeJS and NPM

NodeJS and NPM are available together here. If you are on Windows, you should restart your computer after installing both Git and NodeJS.

Developer Mode

To start develop Windows 10 Apps, you must have Developer mode enabled. On your device that you want to enable, go to Settings. Choose Update & security. Then choose For developers and select Developer mode.

## Installation To install the AppX Generator along with Gulp and Yeoman, open a command prompt/terminal and type: ```shell npm i -g gulp yo generator-appx ``` ## “Hello World!”

Create an empty folder

After you have the generator installed, create a new folder. Then cd to it using a command prompt/terminal.

You can create a directory through Windows Explorer/Finder or directly from the command line:

mkdir test
cd test

On Windows, if you created the folder using Windows Explorer, you can double click to enter the folder to view its contents. There is a quick shortcut you can do to bring up a command line in the proper directory. Both the command prompt or the Git Bash shell will work. To bring up a command prompt, shift + right click in the folder and click Open command window here. For Git Bash, just right click and click Git Bash here....

Yo

The next step is to get the project scaffolded out. To do this, type the following it your command line:

yo appx

You will then receive a few prompts. If this is your first time scaffolding out a project, it is recommended to just accept the defaults. To do so, you can just hit Enter to each prompt.

Yeoman will then scaffold out the app for you and proceed to install the npm dependencies. This step will take some time on slower machines because of the npm dependency installation. To easily speed this process up significantly check out the Tips section in the sidebar.

Folder Structure

The project will scaffold out the following folder structure.

├── README.md
├── gulpfile.js/
│   ├── ...
├── node_modules/
│   ├── ...
├── package.json
└── src/
    ├── AppxManifest.xml
    ├── bundles/
    ├── css/
    ├── html/
    ├── img/
    ├── js/
    └── misc/

If you created your folder through the command line, or if you've closed the window, you can open the folder in a file explorer using (this will be useful later):

(Windows):

start .

or (OS X):

open .

Run Gulp

Next, simply type:

gulp

This should begin all the default gulp tasks, create a local server, and spawn your default browser pointing to the local server.

Note: If your default browser is Microsoft Edge, this will not work. This is because of a built in security restriction that prevents Microsoft Edge from accessing localhost. You can load up another browser and point it to http://localhost:3000. Or, to get around the localhost restriction, you can follow the instructions here. We have also provided a command you can use. Just type gulp edge-loopback before starting your project.

You will notice there will be a new dist folder added into our project:

├── README.md
├── dist/
│   ├── bundles/
│   ├── css/
│   ├── img/
│   ├── index.html
│   ├── js/
│   ├── swig.html
│   └── web.config
├── gulpfile.js/
│   ├── ...
├── node_modules/
│   ├── ...
├── package.json
└── src/
    ├── AppxManifest.xml
    ├── bundles/
    ├── css/
    ├── html/
    ├── img/
    ├── js/
    └── misc/

Make Some Changes

The dist folder (short for distribution) is where all the compiled files from the src (short for source) folder end up. This is the folder you would upload to a production folder. By separating our src and dist folders, we are able to do things like minify our code, preprocess CSS, etc. without having to lose our original source files. Learn more about the folder structure here.

We will be working entirely out of the src folder.

Open the folder in your favorite text editor or IDE, and make a change in one of the files (e.g. index.html) and save it. You will see it automatically refresh in every browser you have open.

## Next Steps

If you are fairly comfortable with scaffolding out a new project and are interested in what else this project can offer, please check out the Usage section in the sidebar.

For a quick refresher, you can visit the Quick Start section in the sidebar or check out the asciicinema recording below: