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 –>
http://build/vendor.js

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

self.toolbox.precache(
 [
 './build/main.js',
 './build/vendor.js', 
 './build/main.css',
 './build/polyfills.js',
 'index.html',
 'manifest.json'
 ]
);

 

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

Requirements

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

• Ionic Package – http://docs.ionic.io/services/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

Setup

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 – https://apps.ionic.io/login
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
   • Clone – https://github.com/bwhittington/IonicVisualStudioStarter
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 apps.ionic.io
10. You can find the app_id on apps.ionic.io – just replace the XXXXXX

Deploy

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

Conclusion

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.