How to build Ionic 2 apps

How To
1

THIS IS AN OUTDATED TUTORIAL, bitrise.io can now scan & auto configure a base workflow for Ionic apps automatically. For an updated tutorial please see:

Setup

  1. Use this bitrise.yml for your ionic app’s build config: https://github.com/bitrise-samples/ionic-2/blob/master/bitrise.yml
  2. 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.

Stack on bitrise.io: 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 (ci-android on bitrise.io), 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, and then upload them to the project on bitrise.io (in the Workflow Editor, left side: Code signing & Files section)

iOS Code Signing note: To set the final code signing type, the one with which the IPA will be signed, use the “export method” (Select method for export) option of the Xcode Archive step to set the final code signing type (e.g. “app-store” or “ad-hoc”), just like you would in case of a native iOS project! Relevant section of the iOS code signing guide: iOS code signing - Bitrise Docs

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!

Screen Shot 2017-01-09 at 8.57.21.png2690×1780 680 KB

Screen Shot 2017-01-09 at 8.35.31.png1146×152 28.8 KB

Screen Shot 2017-01-09 at 8.35.38.png798×314 19.3 KB

2

I tried to run ionic serve on Xcode 8.2.x, on macOS 10.12 (Sierra) after_run workflow, but I got /bin/bash: ionic: command not found.

So I followed the link: https://github.com/bitrise-io/bitrise.io/blob/master/system_reports/osx-xcode-8.2.x.log#L177

Seems that neither cordova or ionic was installed by osx-box.

3

On the mac stacks only the Xcode Edge stack has Ionic and Cordova preinstalled (Can I use Bitrise to automatically build (and deploy) Ionic 2 (Cordova) based apps?)

1 Like
4

Thanks Viktor, but now I`m getting this error:

Building project: /Users/vagrant/git/handup/platforms/ios/handup-ionic.xcworkspace

	Configuration: Debug
	Platform: emulator


Configs:
  project_path: ./platforms/ios/handup.xcodeproj

Analyzing project: ./platforms/ios/handup.xcodeproj

Searching for shared schemes...
  shared scheme count: 0

No shared schemes found, generating default user schemes...
The newly generated schemes, may differs from the ones in your project.
Make sure to share your schemes, to have the expected behaviour.

Failed to recreate project (./platforms/ios/handup.xcodeproj) user schemes, error: output: #<RuntimeError: [Xcodeproj] Unable to open `/Users/vagrant/git/handup/platforms/ios/handup.xcodeproj` because it doesn't exist.>
--- Stack trace: ---
["/usr/local/lib/ruby/gems/2.3.0/gems/xcodeproj-1.4.2/lib/xcodeproj/project.rb:99:in `open'", "/var/folders/90/5stft2v13fb_m_gv3c8x9nwc0000gn/T/bitrise333422609/script.rb:8:in `<main>'"]

exit status 1
5

@jlcarvalho please include the full input, at least the part after the Git Clone step - I think something’s missing or not configured correctly (e.g. something’s in a subdirectory what wasn’t in our sample).

6

From the log it seems that your xcode project is generated to the path: REPOROOT/handup/platforms/ios/handup-ionic.xcworkspace

But your config specifies BITRISE_PROJECT_PATH: "./platforms/ios/handup.xcodeproj"

Change ./platforms/ios/handup.xcodeproj to ./platforms/ios/handup-ionic.xcworkspace, to match with the Xcode project (workspace) file generated by ionic.

7

Now I got this error:

Forcing Development Team: 6DLEBYX6Q8
Forcing Code Signing Identity: iPhone Developer
[09:47:52] $ set -o pipefail && xcodebuild "-workspace" "./platforms/ios/handup-ionic.xcworkspace" "-scheme" "handup" "DEVELOPMENT_TEAM=6DLEBYX6Q8" "CODE_SIGN_IDENTITY=iPhone Developer" "archive" "-archivePath" "/var/folders/90/5stft2v13fb_m_gv3c8x9nwc0000gn/T/__archive__969235093/handup.xcarchive" | xcpretty

If you can't find the reason of the error in the log, please check the raw-xcodebuild-output.log
The log file is stored in $BITRISE_DEPLOY_DIR, and its full path
is available in the $BITRISE_XCODE_RAW_RESULT_TEXT_PATH environment variable
Archive failed, error: exit status 65
8

Did you check the raw-xcodebuild-output.log file? Should be attached to the build (Apps & Artifacts section) by the Deploy to Bitrise.io step

9 
=== BUILD TARGET handup-ionic OF PROJECT handup-ionic WITH CONFIGURATION Release ===

Check dependencies
No profiles for 'com.ionicframework.handupionic731677' were found:  Xcode couldn't find a provisioning profile matching 'com.ionicframework.handupionic731677'.
Code signing is required for product type 'Application' in SDK 'iOS 10.2'

** ARCHIVE FAILED **


The following build commands failed:
	Check dependencies
(1 failure)
10

http://devcenter.bitrise.io/ios/code-signing/

Run codesigndoc on the generated Xcode project (on your Mac), and then upload all the code signing files it generates to bitrise.io

Of course first you have to make it sure that you actually can Archive the project on your Mac! Open it in Xcode, do an Archive in Xcode, and once the Archive is successful do an IPA export from the organizer (the window auto opened by Xcode after a successful Archive), until you get a signed .ipa of the app

1 Like
11

Worked! Thanks.

How can I pay you a beer?

1 Like
12

:joy: no need, just don’t forget to recommend Bitrise to others :wink:

13

I’ll write a blogpost about Bitrise in portuguese. Thanks again :grinning:

14

Perfect! :wink:

15

A post was merged into an existing topic: Xcode + Android SDK combined stack

16

Another note after debugging a Cordova app with a user: you might want to go with the Xcode 7.3.1 stack in some cases, instead of with the newer Xcode 8.x.x stacks.

In their case once they switched to Xcode 7 the project worked immedately, as the project generated by Ionic/Cordova is compatible with Xcode 7, but not with Xcode 8 out of the box / without any modification (see my comment at Can I use Bitrise to automatically build (and deploy) Ionic 2 (Cordova) based apps? about the default generated Xcode project when using it with Xcode 8).

17

I followed the guide and it works for me, but I’m getting a development IPA. What if I want a distribution IPA? I try with force_code_sign_identity: iPhone Distribution but it failed.

1 Like
18

Hi @hcentelles,

Please don’t force any other option, keep it the way it is in the base config.

To set the final code signing type, the one with which the IPA will be signed, use the “export method” (Select method for export) option of the Xcode Archive step to set the final code signing type (e.g. “app-store” or “ad-hoc”), just like you would in case of a native iOS project! Relevant section of the iOS code signing guide: iOS code signing - Bitrise Docs

19

Apparantly this process is outdated and instead we should use:

http://discuss.bitrise.io/t/generating-release-outputs-for-ionic/2039

20

how to generate Android app bundle (.abb) in Bitrise using ionic.