Start an Ionic 2 App (Windows 10)

Making a Windows project with Ionic 2 is much easier now that Ionic officially supports the Windows platform.

There are two popular ways to work with Ionic on Windows. The first is using Visual Studio (the easiest way, but it doesn’t always work as expected), and the second is using Ionic CLI with GitBash (this was more useful in our case, I’ll explain why later on).

So, let’s start an Ionic 2 app for Windows 10. We’ll do it step by step and every step I’ll explain how to do it with both Visual Studio and Ionic CLI.

1. Set up environment

First of all we’ll need to install the necessary environment:
1. Node.js and npm;
2. Install Cordova and Ionic

npm install cordova –g
npm install ionic –g

3. Download and install Visual Studio Community and the SDK for Windows developing.
4. GitBash should be installed together with the SDK, but it’s best to check, if it’s not there, install it.

2. Start the project

When we have the necessary environment, we can start the project as follows:

cordova start <folderName> tabs –-v2

and add the Windows platform:

cordova platforms add windows

Visual Studio

Now, we can open this project in Visual Studio (Open -> Project/Solution -> (Choose the project file)). Then we need to build the project (Build -> Build solution) and then add the following to the config.xml file:

if it is a code redactor, or choose Windows10 in the Windows tab if you are in a designed redactor.

Now you can build your app to a Local Machine or Emulator by pressing the green arrow.

Ionic CLI

Without Visual Studio you can do the same thing, first add the following line to config.xml

and then simply command:

cordova build

to build and then:

cordova emulate
or
cordova run

to run the project.

3. Sign the package

This is the most interesting part, where we had some problems and spent quite a bit of time figuring out where they were.

First of all, you’ll have to go to your Microsoft developer account and reserve the application name. Later on you will assign in to your app.

Visual Studio

Right click on your solution and choose Store -> Associate With Store. In the window that opens you’ll need to sign in to your developer account (if you didn’t do it before) and choose the application name.

After that, try to run your project, if your app works fine, congratulations, you’re done! You can now Create Packages and find them in your project at folder/platforms/windows/AppPackages

But, if you get an app with a blank screen as we did, the next part is for you.

Ionic CLI

First you’ll need to download the certificate to your computer. I prefer to put it into the project’s root folder (as it usually has a name like “…Store_Key.pfx”).

Now we can use Ionic CLI to sign our package with that certificate, but first we need the thumbprint which we can find in the certificate details. Once we know it we can sign our package:

cordova build — –packageCertificateKeyFile=”path to the certificate” –packageThumbprint=”certificate thumbprint” –archs=x86

If you miss out the “ –archs=<which can be x64, x86, arm>” part, you can get an error that you can’t build for any CPU, so keep that in mind.

If the build succeeds, you’re almost done, the last step is to add the package name, (you can find it in your Microsoft developer account/App management/App identity and it will be your ‘Package/Identity/Name’), into the config.xml file as the following line:

You can also change the author in this file. (Visual Studio does it all for you.)

The build command will take all this data form config.xml and compile it into AppManifest.xml which is responsible for this Item info.

So, now you can go to your project folder/platforms/windows/AppPackages and install the *.appx file.

Done!