How to build Ionic 2 apps

viktorbenei · January 11, 2017, 11:24am

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

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

github.com

bitrise-io/ionic-2/blob/master/bitrise.yml#L4

    
      
          format_version: 1.3.1
          default_step_lib_source: https://github.com/bitrise-io/bitrise-steplib.git
          app:
            envs:
            - IONIC_PROJ_DIR_PATH: ./cutePuppyPics
            # for iOS
            - BITRISE_PROJECT_PATH: ./platforms/ios/cutePuppyPics.xcodeproj
            - BITRISE_SCHEME: cutePuppyPics
            - FORCE_TEAM_ID: 72SA8V3WYL
          workflows:
            _ci_finish:
              steps:
              - deploy-to-bitrise-io@1.2.6:
                  run_if: '{{getenv "BITRISE_BUILD_URL" | ne ""}}'

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: http://devcenter.bitrise.io/ios/code-signing/#configure-xcode-archive-to-create-the-signed-ipa

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!

jlcarvalho · January 10, 2017, 3:44pm

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.

viktorbenei · January 10, 2017, 3:47pm

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?)

jlcarvalho · January 10, 2017, 4:27pm

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

viktorbenei · January 10, 2017, 5:20pm

@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).

viktorbenei · January 10, 2017, 5:37pm

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.

jlcarvalho · January 10, 2017, 6:01pm

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

viktorbenei · January 10, 2017, 6:02pm

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

jlcarvalho · January 10, 2017, 6:16pm

=== 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)

viktorbenei · January 10, 2017, 6:17pm

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

jlcarvalho · January 10, 2017, 6:56pm

Worked! Thanks.

How can I pay you a beer?

viktorbenei · January 10, 2017, 8:00pm

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

jlcarvalho · January 10, 2017, 8:19pm

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

viktorbenei · January 10, 2017, 8:20pm

Perfect!

viktorbenei · January 23, 2017, 3:34pm

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

viktorbenei · January 23, 2017, 5:19pm

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).

hcentelles · March 27, 2017, 6:59pm

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.

viktorbenei · March 27, 2017, 7:52pm

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: http://devcenter.bitrise.io/ios/code-signing/#configure-xcode-archive-to-create-the-signed-ipa

dev-mgr-uk · January 27, 2018, 12:24pm

Apparantly this process is outdated and instead we should use:

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

shaileshpendams · March 5, 2020, 6:21pm

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