Android iOS Mobile Development

Visual Studio Starter Kit for Ionic 3

Updated for Ionic 3.9.2

Just updated on 11/28/2017 – This was mostly just updating NPM packages but the main thing was to add the vendor.js file to the index.html

Updated for Ionic 3.7.1

Just updated on 10/20/2017 – There were a few things that needed to be done to the solution instead of just updating the NPM packages.

First update the index.html with:

<!– all code from node_modules directory is here –>

Then added the bolded text to the service-worker.js



What did I learn today

Today I spent several hours setting up a default Ionic 3 project on my local machine and spent several more hours setting up Ionic Package to upload and build my Android application.  While the instructions were not easy, I spent a lot of time looking at various different resources.  This post will compile this list of resources and list the steps I used to get a very basic project up and running.  This is my attempt to create a Visual Studio Starter Kit using Ionic 3 and Ionic Package


This is a list of all the things I read as well as downloaded to get my default project up and running.

  • Ionic Package – – this is a deployment service for easy creation of native packages.
  • Required Downloads
    • Java JDK – Link – Accept License Agreement and Download/Install the version that fits your OS
    • Cordova Tools for Visual Studio 2017
      • Open Visual Studio 2017 Installer
      • Click Modify
      • Click Mobile development with JavaScript – Install
    • LTS Node Version – Link
    • NPM Task Runner – Link
    • GitHub Visual Studio Extension – Link


Ionic Package Account

This set of instructions will setup your Ionic Apps account so that you can make use of Ionic’s Cloud Platform.  Ionic has a free platform that is very generous and most personal projects would easily fit within those constraints.  The paid accounts are also generally very inexpensive and make it very feasible for organizations to make use of.  (I am not employed or sponsored by Ionic.)  Details can be found here and pricing.

  1. Create a new account –
  2. Name Your First App – *Enter your project name here*
  3. Click Settings
  4. Click Certificates
  5. New Security Profile
  6. Name it *Enter your project name here*

Create KeyStore Security Credentials for Ionic Package Account

These are the Android instructions creating a keystore that is needed to package Ionic Android applications on Ionic Cloud.

  1. Open command prompt as administrator
  2. Copy/Paste the following:
    • C:\Program Files\Java\jdk1.8.0_131\bin – This may be different depending on where you installed the JDK.
  3. Copy/Paste the following; Replace MY-RELEASE-KEY with your project name. Replace MY_ALIAS_NAME with your project name.
    • keytool -genkey -v -keystore MY-RELEASE-KEY.keystore -alias MY_ALIAS_NAME -keyalg RSA -keysize 2048 -validity 10000
  4. Follow the Prompts

Creating Ionic Package Security Credentials

These steps will assign the newly created keystore to the security credentials in Ionic Package.

  1. Upload newly created keystore file, should be in C:\Program Files\Java\jdk1.8.0_131\bin or the directory your java jdk is installed.
  2. Type in key alias – Should be same as keystore name
  3. Type Passwords for Both

Deploying the Starter Kit

  1. Open Visual Studio
  2. Open Team Explorer
  3. In Local Git Repositories
  4. File -> Close Folder
  5. Open Solution “Mine is found in C:\Users\brett\Source\Repos\IonicLabOne as an example
  6. Open package.json – AND WAIT
  7. Build and cross your fingers.
  8. Open ionic.config.json
  9. Update “app_id” with id from
  10. You can find the app_id on – just replace the XXXXXX

App Id


  1. Open node command prompt
  2. Navigate to where you application is located (mine: C:\Users\brett\Source\Repos\IonicLabOne\IonicLabOne)
  3. Type the following
  4. Ionic login
  5. Type your credentials
  6. Type the following
  7. ionic package build android –profile *The name of the security profile you created*
  8. Download the package and send the .apk file to email address your phone has access to.
  9. Install app and open


I spent around five hours fuddling with all of these features and I wanted to create an easy starter kit that would let me get this setup rather quickly.  This is the result of that work. I don’t know why it is so hard to get ionic templates setup for visual studio but hopefully this gets us closer to that day.


By Brett The Whitt

Brett is a web development consultant and has been working for more than 12 years. He specializes in hybrid mobile app development and using front end frameworks such as AngularJS. Always passionate about continuous education, he has been most recently mentoring and encouraging his co-workers to become better speakers. To further this growth, he leads Lightning Talk Nights and other events at his job at HMB Inc

2 replies on “Visual Studio Starter Kit for Ionic 3”

Hi there,

Your starter kit was great and saved me a lot of time, I suggest to including the following build.json file for deployment:
“android”: {
“release”: {
“keystore”: “My-keystore-key.keystore”,
“storePassword”: “myPassword”,
“alias”: “My-keystore-alias”,
“password” : “myPassword”,
“keystoreType”: “jks”

And you may find the *.apk package in release folder.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s