Generating release outputs for Ionic

ionic

#1

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.


Ionic build sign error
How to build Ionic 2 apps
How to build Ionic 2 apps
Ionic-archive says that i don't have platform install but there is
#3

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?


#4

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!


#5

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.


#6

Ok! Thanks!


#7

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


#8

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 !


#9

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:


#10

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


#11

Thank you! :slight_smile:


#12

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!


#13

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


#14

Thanks Victor, however the screenshots for manual exporting in xcode are incorrect on:
https://ioscodesigning.com/generating-code-signing-files/

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.


#15

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: https://github.com/bitrise-io/ioscodesigning