Generating release outputs for Ionic

Create your bitrise project

On the bitrise.io website add your Ionic project. Once the scanner finished, you have to select which platform(s) to build.

If your project contains either jasmin or karma-jasmine test, the scanner generates two workflows for you.

The primary is a ci like workflow it contains the test step:

  primary:
    steps:
    - activate-ssh-key:
        run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
    - git-clone: {}
    - script:
        title: Do anything with Script step
    - npm:
        inputs:
        - command: install
    - karma-jasmine-runner: {}
    - deploy-to-bitrise-io: {}

The another workflow is called deploy, it is a workflow to achieve cd, by default it builds for emulator:

  deploy:
    steps:
    - activate-ssh-key:
        run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
    - git-clone: {}
    - script:
        title: Do anything with Script step
    - npm:
        inputs:
        - command: install
    - karma-jasmine-runner: {}
    - generate-cordova-build-configuration: {}
    - ionic-archive:
        inputs:
        - platform: "$IONIC_PLATFORM"
        - target: emulator
    - deploy-to-bitrise-io: {}

If your project does not contain jasmin or karma-jasmine test the scanner generates only one workflow (primary) which is prepared to build for emulator:

  primary:
    steps:
    - activate-ssh-key:
        run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
    - git-clone: {}
    - script:
        title: Do anything with Script step
    - npm:
        inputs:
        - command: install
    - generate-cordova-build-configuration: {}
    - ionic-archive:
        inputs:
        - platform: "$IONIC_PLATFORM"
        - target: emulator
    - deploy-to-bitrise-io: {}

Build for device

To build for device you would need to upload your code signing files per platform. After that, update the Generate cordova build configuration step, this step will generate a build.json file which controls the ionic-cliā€™s code signing. Then update the Ionic archive step to target to device.

  1. Upload your code signing files
  • Upload your ios provisioning profile and code sign identity to Bitrise (Workflow/Code Signing tab), if you want to build for ios.
  • Upload your android keystore to bitrise (Workflow/Code Signing tab), if you want to build for android.
  1. Update the Generate cordova build configuration step
  • Navigate to the Workflow Editor/Workflows tab and select Generate cordova build configuration step
  • Set the Build configuration input as desired
  • For ios code signing fill: Development Team, Code Sign Identity, Provisioning Profile and Packaging Type
  • For android code signing: the required inputs (Keystore, Keystore password, Alias and Password) are fulfilled with the default env vars generated when you uploaded your keystore ($BITRISEIO_ANDROID_KEYSTORE_URL, BITRISEIO_ANDROID_KEYSTORE_PASSWORD, BITRISEIO_ANDROID_KEYSTORE_ALIAS, BITRISEIO_ANDROID_KEYSTORE_PRIVATE_KEY_PASSWORD)
  1. Update the Ionic archive step
  • Navigate to the Workflow Editor/Workflows tab and select Ionic archive step
  • Set the Build command target inputā€™s value to device

Run a new build, once it finishes you can test the signed ipa and apk files.

1 Like

Hi, I am trying to run Ionic Archive with custom options, to be more specific ā€œā€“prodā€. I saw that in the build log this command is showed as option but it is not used when the build command really run. I just added ā€œā€“prodā€ on ā€œOptions to append to the ionic-cli build commandā€ input.

Am I doing something wrong?

Adding some info from the build log:
`
Configs:

  • WorkDir: /bitrise/src
  • BuildConfig: /tmp/__bitrise-cordova-build-config__617970465/build.json
  • Platform: android
  • Configuration: release
  • Target: device
  • CordovaVersion:
  • IonicVersion:
  • Options: --prod
  • DeployDir: /bitrise/deploy
    cordova version: 7.0.1
    ionic version: 3.5.0
    `
    [ā€¦]

$ ionic "cordova" "build" "--release" "--device" "android" "--buildConfig" "/tmp/__bitrise-cordova-build-config__617970465/build.json"

build command is generated without my custom option.

Thanks!

Hi @willian.steffen.radi,

thanks for the question! This is an issue with the step, the command builder allows you to set the custom options, but it does not use them when it builds the current build command.

I scheduled to fix this.

1 Like

Ok! Thanks!

1 Like

Hi @willian.steffen.radi,
we released a new version of ionic-archive step, this version fixes the custom options issue.

1 Like

Hi,
I follow all your step, however i encounter a problem during the step ionic-archive.
It says this:
ā€œError: No platforms added to this project. Please use cordova platform add <platform>.
No ios nor android platformā€™s output dir exist
No output generatedā€

And i donā€™t understand why because i already added android as platform.

Thank you in advance !
And sorry for my bad english !

Hi @Corentin,

Can you please create a bug report at #issues:build-issues? Would help a lot to track it down as fast as possible :slight_smile:

Hi @viktorbenei
I will do it, no problem :slight_smile:

1 Like

Thank you! :slight_smile:

Please could someone create a guide for creating the provisioning profiles, certificates and code sign identity files on Mac OSX that are required by bitrise for Ionic developers who have never had to build an IPA locally.

We donā€™t have to use xcode or xamarin because we use Ionic instead. Just need to see how we can create the necessary files.

We want to use bitrise to create the IPA and deploy automatically from git hosted code.

(it would be amazing if you can include screenshots for each step please :smiley: )

Thanks!

1 Like

Hi @dev-mgr-uk,

Definitely see your point and weā€™re working on making it easier! :wink: In the meantime (copy pasting from our other chat) Iā€™d suggest you to follow this guide:

  1. To generate a Certificate: https://ioscodesigning.com/generating-code-signing-files/ - probably easiest to do it from Xcode
  2. To generate a Provisioning Profile: https://ioscodesigning.com/generating-code-signing-files/#generate-a-provisioning-profile - probably easiest to do it from Xcode
  3. Then Export the Certificate with the related private key (.p12 file): https://ioscodesigning.com/exporting-code-signing-files/
  4. Export the Provisioning Profile: https://ioscodesigning.com/exporting-code-signing-files/#exporting-provisioning-profiles
  5. Once you have these files (a Certificate with private key in .p12 format, and a Provisioning Profile) you can upload them to Bitrise.io in the Workflow editor, under Code Signing, and just follow the rest of the guide here (Generating release outputs for Ionic -> ā€œBuild for deviceā€ section).

Once you get to this configuration phase it might also help to run the Bitrise runner / CLI on your own Mac, so that you can iterate on the actual config faster using the same tools (including the editor GUI) right on your Mac! Related guide: How to experiment with Bitrise configs locally, on your Mac/Linux

If youā€™d have any questions just let me know!

P.S.: for reference this is the official Cordova Code Signing documentation, applies for both Cordova and Ionic projects: https://cordova.apache.org/docs/en/latest/guide/platforms/ios/#signing-an-app

Thanks Victor, however the screenshots for manual exporting in xcode are incorrect on:

Someone needs to go through and update these docs using the latest xcode version screens.

Also, if youā€™re using Ionic then you wonā€™t have ā€˜build and archiveā€™ from xcdode so the codesigndoc one-liner wonā€™t work. It seems that you donā€™t need ā€˜build and archiveā€™ if you export the certs manually. I think you should make this clear at the start as I spent a long time trying to go down the codesigndoc route when for Ionic you should follow the manual process. I suggest you add a completely new page to ioscodesigning.com for the Ionic process.

Thanks.

Thanks, scheduled a task to update those guides! :wink:

Good point! If you have some time feel free to do that yourself, itā€™s an open source repo: GitHub - bitrise-io/ioscodesigning