Saturday, 10 March 2018

Build ios, android ionic/codova apps and deploy them to store using Visual Studio Online


I love to work with ionic framework because it gives me all I need as a fullstack dev plus development is much much faster, since I can  see results in browser. Even when with native plugins i can easily inject mocks.

I started this blog post many months ago :) but as always did not have time to finish it. But this time  for better, Microsoft simplified builds a lot.

What do you need before we start

Install VSTS extensions

Configure build

Create new build and add required files and variables

VSTS has amazing feature which allow to securely store files and variables. My build is using aliases for 3 files
  • mobile.mobileprovision
  • ios_Certificates.p12
  • android.keystore
And variables:
  • certificates.pass
  • app.versionPrefix
  • node.env
  • ionic.default.version
  • cordova.default.version
Files can be uploaded even before build is created. To do so go to VSTS choose your project -> Build and releases -> Library -> Secure files

Configure build

At this stage YAML builds are in preview so you need to enable them read more here.

First step would be to create build and choose source control (In this example I am using github, but in all my projects I prefer vsts source control its free for private projects)

Second step would be to choose YAML build

Next step specify build name. For build agent choose hosted macOS (you can add external build instance if you wish, previously I used to use MacInCloud)

That is basically all we need to configure with build, last step is to add variables by clicking variables tab

  • app.versionPrefix  this variable is used to build version for app. Very important is to use reasonable version because android version has some limitations (First my fault was when I created app with date version such as 2017.09.11.123, because remember that google will not allow upload new version with lower code).
  • ionic.default.version variable to control ionic-cli to build app
  • cordova.default.version control cordova version
  • node.env - variable to control which environment configuration to use look here
  • certificates.pass  - in the beginning I mentioned that for this blog I used one password to create all certificates. To make this password secret (Nobody can see it) click on a lock and enter password
After this hit save & queue and our build will start it will produce two artefacts with apk and ipa.

Create release

Go to release tab

Configure artefacts and by clicking . 
Configure trigger

Configure tasks

Press plus and search for Apple App Store release

Press plus and search for Google play release release

Now app is deployed to all stores.
Volodymyr Bilyachat Web Developer