Hi there.
Can I use Bitrise to automatically build (and deploy) Ionic 2 (Cordova) based apps? I see support for iOS and Android native. I know GreenhouseCI works nicely with Ionic 1 but we’re building in version 2 (Angular 2 based) and it’s made it a real struggle to find a compatible CI platform!
Thanks,
Nick
Hey Nick,
Some time ago I’ve worked on Cordova Android projects integration with Bitrise.
I was able to prepare docker image based on bitrise base image and published it to docker hub (search for “vgaidarji/docker-android-cordova”). Then I’ve used this custom image in bitrise and was able to build Cordova Android (sample) project on bitrise with no issues.
You can find more information in this blogpost “How to build Cordova-based Android project on bitrise.io”.
I hope it will give you more understanding how to deal with such projects on bitrise.io.
Best,
Veaceslav
A quick update: while we were working on our Ionic 2 guide, we realized that it simply takes too much time to npm install -g ionic cordova, so we will preinstall both in this weekend’s Stack updates.
Related PRs:
It seems that the default project generated by ionic start ProjectName --v2 (source) is fairly broken, eg with the generated .gitignore files we couldn’t build the project which was generated on one Mac on another Mac after a git clone. We couldn’t find any ionic command which would properly regenerate the files in the ignored folders. Eg if you ignore the iOS project directory (which is in the default gitignore generated by ionic start) and regenerate it with ionic platform add ios, the generated iOS project will have code signing settings which are incompatible with Xcode 8.
You can find our current notes and the sample project code at: https://github.com/bitrise-samples/ionic-2
We’ll try to get back to work on this sample once the stacks are updated, with preinstalled ionic and cordova (after this weekend).
Hi Viktor & team
Thanks for the updates. Will be great to be able to build Ionic apps with Bitrise soon 
As to regenerating the Ionic setup - after running the npm install, you have to explicitly run npm platform add ios and android - it seems a stupid way to do this but it should work and you only have to do it once on clone. You do have to assume that the repo contains both platforms though - you’d think they’d have a command to scan the config.xml and add the desired platforms.
(when first adding platforms on the original machine, do ionic platform add ios --save to get it written to the config).
Thanks!
Nick
Hi Veaceslav
Thanks - I came across that in my search and it looks really useful! However the key platform for me is iOS and I want to ensure that I can build both iOS and Android automatically without needing to use multiple CI providers. Fingers crossed it’ll be Bitrise!
Thanks
Nick
Quick update: stack updates are now live, Ionic and Cordova are now preinstalled on the Xcode Edge and Android/Linux stacks.
Hi Viktor, the Ionic 2 sample above works like a charm. I’m trying to setup CI with karma and protractor tests, but without success so far.
Btw, it’s not recommended maintain the cordova/ionic generated folders on git.
On bitrise.yml you can create an empty www folder.
mkdir www
Then you can add the platform to restore the platforms and plugins folders.
ionic platform add android
And generate the platform build:
ionic build android --prod
Thanks for your insights @jlcarvalho!
The issue with this is that it works for android (ionic platform add android generates a proper gradle project), but ionic platform add ios in itself is not enough, as it generates an Xcode project which has incompatible code signing settings for Xcode 8.
So far all I could figure out for iOS is to:
grep to normalize/fix the code signing settings in the xcode project file. This might be a better solution, but it might also be a bit too complicated for someone not familiar with Bash and tools like grep.Maybe this can help: https://cordova.apache.org/docs/en/latest/guide/platforms/ios/#using-buildjson
Thanks for the link @jlcarvalho!
I guess that can work, although directly specifying code signing options is effectively deprecated since Xcode 7, as it’s incompatible if you have to use multiple signing params, e.g. if your app includes a Today widget extension (where the widget itself have to be signed as well, with appropriate separate code signing files).
The new, recommended way (since Xcode 7) is to use -exportOptionsPlist with a plist file parameter, which describes the export options - http://devcenter.bitrise.io/tips-and-tricks/xcodebuild-export-options/
Tricky 
A quick update: the following configuration now works for Android, and can build & distribute the app in about ~3.5 minutes (running the ci-android workflow on bitrise.io, using the Android/Linux stack):
format_version: 1.3.1
default_step_lib_source: https://github.com/bitrise-io/bitrise-steplib.git
app:
envs:
- IONIC_PROJ_DIR_PATH: ./cutePuppyPics
workflows:
_ci_finish:
steps:
- deploy-to-bitrise-io@1.2.6:
run_if: '{{getenv "BITRISE_BUILD_URL" | ne ""}}'
_ci_setup:
steps:
- activate-ssh-key@3.1.1:
run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
- git-clone@3.4.1: {}
build-android:
steps:
- change-workdir@1.0.1:
title: Change workdir to ionic project dir
inputs:
- opts: {}
path: $IONIC_PROJ_DIR_PATH
- is_create_path: "false"
opts: {}
- script@1.1.3:
title: Build the app for distribution
inputs:
- content: |-
#!/bin/bash
set -ex
#
npm install
mkdir -p www
ionic platform add android
ionic build android --prod
mv ./platforms/android/build/outputs/apk/android-debug.apk "${BITRISE_DEPLOY_DIR}"
opts: {}
build-ios:
envs:
- BITRISE_PROJECT_PATH: ./platforms/ios/cutePuppyPics.xcodeproj
- BITRISE_SCHEME: cutePuppyPics
steps:
- change-workdir@1.0.1:
title: Change workdir to ionic project dir
inputs:
- opts: {}
path: $IONIC_PROJ_DIR_PATH
- is_create_path: "false"
opts: {}
- script@1.1.3:
title: Build the app for distribution
inputs:
- content: |-
#!/bin/bash
set -ex
#
npm install
mkdir -p www
ionic platform add ios
ionic build ios --prod
opts: {}
- certificate-and-profile-installer@1.8.2: {}
- xcode-archive@2.0.4: {}
ci-ios:
before_run:
- _ci_setup
after_run:
- build-ios
- _ci_finish
ci-android:
before_run:
- _ci_setup
after_run:
- build-android
- _ci_finish
Source: https://github.com/bitrise-samples/ionic-2/blob/master/bitrise.yml
+------------------------------------------------------------------------------+
| bitrise summary |
+---+---------------------------------------------------------------+----------+
| | title | time (s) |
+---+---------------------------------------------------------------+----------+
| - | activate-ssh-key@3.1.1 | 1.39 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | git-clone@3.4.1 | 6.06 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | Change workdir to ionic project dir | 1.03 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | Build the app for distribution | 161 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | deploy-to-bitrise-io@1.2.6 | 7.12 sec |
+---+---------------------------------------------------------------+----------+
| Total runtime: 177 sec |
+------------------------------------------------------------------------------+
Of course you can remove the iOS specific workflows if you don’t want to build for iOS. I’m still trying to figure out the “right way” for iOS…
EDIT: added mkdir -p www (right before ionic platform add ...), as that’s required if you don’t modify the default .gitignores
One more note: the default iOS Xcode project (generated by ionic platform add ios) does not mark the scheme as shared. This can also lead to issues, see: http://devcenter.bitrise.io/ios/frequent-ios-issues/#xcode-scheme-not-found
On my Mac, if I did not open the generated Xcode project in Xcode.app, just ran
ionic platform add ios
ionic build ios --prod
the build did hang, because of the missing shared scheme.
I found this article about the xcode schemes: http://moduscreate.com/cordova_xcodebuild_hangs_freezes_during_build/
And we have a Step for that too! 
recreate-user-schemes
I believe it uses the same ruby gem under the hood.
With this I could finally almost build the project, one last issue:
Check dependencies
Signing for "cutePuppyPics" requires a development team. Select a development team in the project editor.
Code signing is required for product type 'Application' in SDK 'iOS 10.2'
Which is what I mentioned earlier (Can I use Bitrise to automatically build (and deploy) Ionic 2 (Cordova) based apps?), that the default code signing settings generated by ionic are not compatible with Xcode 8, you have to manually set the Team in Xcode project, or you have to force this parameter somehow.
Forcing is possible, although it’s almost always not the best long term solution. Anyway, if you force the Team ID as a build / command line param, you’ll get one more error:
Check dependencies
cutePuppyPics has conflicting provisioning settings. cutePuppyPics is automatically signed for development, but a conflicting code signing identity iPhone Distribution has been manually specified. Set the code signing identity value to "iPhone Developer" in the build settings editor, or switch to manual signing in the project editor.
Code signing is required for product type 'Application' in SDK 'iOS 10.2'
To fix this you have to force both the Team ID and the Identity as build params, so the build-ios workflow looks like this:
build-ios:
envs:
- BITRISE_PROJECT_PATH: ./platforms/ios/cutePuppyPics.xcodeproj
- BITRISE_SCHEME: cutePuppyPics
steps:
- change-workdir@1.0.1:
title: Change workdir to ionic project dir
inputs:
- path: $IONIC_PROJ_DIR_PATH
- is_create_path: "false"
- script@1.1.3:
title: Build the app for distribution
inputs:
- content: |-
#!/bin/bash
set -ex
#
npm install
mkdir -p www
ionic platform add ios
ionic build ios --prod
- recreate-user-schemes:
inputs:
- project_path: $BITRISE_PROJECT_PATH
- certificate-and-profile-installer@1.8.2: {}
- xcode-archive@2.0.4:
inputs:
- force_team_id: 72SA8V3WYL
- force_code_sign_identity: iPhone Developer
Full bitrise.yml config: https://github.com/bitrise-samples/ionic-2/blob/master/bitrise.yml
With this config, and with the related code signing files, it finally worked, on the Xcode “Edge” stack:
+------------------------------------------------------------------------------+
| bitrise summary |
+---+---------------------------------------------------------------+----------+
| | title | time (s) |
+---+---------------------------------------------------------------+----------+
| - | activate-ssh-key@3.1.1 | 1.31 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | git-clone@3.4.1 | 6.79 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | Change workdir to ionic project dir | 2.05 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | Build the app for distribution | 128 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | recreate-user-schemes | 9.35 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | certificate-and-profile-installer@1.8.2 | 6.62 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | xcode-archive@2.0.4 | 29 sec |
+---+---------------------------------------------------------------+----------+
| âś“ | deploy-to-bitrise-io@1.2.6 | 7.73 sec |
+---+---------------------------------------------------------------+----------+
| Total runtime: 191 sec |
+------------------------------------------------------------------------------+
But it’s way too complicated for someone not deeply familiar with how Xcode works… We’ll have to find a better way to handle this.
TL;DR; for now:
Use this bitrise.yml for your ionic app’s build config: ionic-2/bitrise.yml at master · bitrise-io/ionic-2 · GitHub
The variables you have to set are at the top, in the app:envs: section, set those to the right ones for your project
On bitrise.io you should run the ci-ios or ci-android workflows as those are the ones which configured to Git Clone the repository, in local (where you already have the source code) you can run the build-ios and build-android workflows for testing/debugging. For the iOS configuration please use the Xcode Edge stack and for the Android configuration use the Android/Linux stack, as those now have ionic and cordova preinstalled.
Android should work right out of the box, with debug signing, for iOS you’ll have to open the Xcode project locally, set the same Team as the Team ID you set in bitrise.yml, and then run codesigndoc GitHub - bitrise-io/codesigndoc: Your friendly iOS Code Signing Doctor to collect all the required code signing files.
Note for Team ID: probably the easiest way to get the Team ID and to set it in Xcode for local testing at the same time is to open the generated Xcode project, and set the Team in Build Settings, then click the team again and choose Other ... - this will print the ID of the current selected Team!
13 posts were merged into an existing topic: How to build Ionic 2 apps
I have a custom step called test.
Logs: https://gist.github.com/jlcarvalho/353a6c4462f1780a9930db9f74afd491
bitrise.yml: https://gist.github.com/jlcarvalho/ff0fb3f92d89eb4e9d6b8c1f1c387502
This discusion was converted to a #how-to post: How to build Ionic 2 apps
Closing it here, feel free to continue the discussion under the #how-to post!
