DEV Community

Cover image for Ionic: Release of Android / iOS packages (apk / ipa) after setting up dev environment
Fabio Trotta
Fabio Trotta

Posted on • Updated on

Ionic: Release of Android / iOS packages (apk / ipa) after setting up dev environment

#ionic #angular #android #ios

Preface

This is a quick guide made to summarize and keep track of the steps useful for the initialization and release of iOS and Android apps with the Ionic framework.

 

Prerequisites

Clone the project from git or initialize a new Ionic project.

 

Check environment requirements

The dependency versions of the develepoment environment (Node, Ionic, Cordova and Angular) must be compatible with those indicated in the app package.json.

It's necessary that the node version in use is compliant with the Angular version according to this table:

Angular version Node.js version Angular CLI version
2.x 6.0.x or later minor version -
4.0.x/4.1.x 6.9.x or later minor version 1.0.6
4.0.x/4.1.x 6.9.x or later minor version 1.1.3
4.0.x/4.1.x 6.9.x or later minor version 1.2.7
4.2.x/4.3.x/4.4.x 6.9.x or later minor version 1.3.2
4.2.x/4.3.x/4.4.x 6.9.x/8.9.x or later minor version 1.4.10
5.0.x/5.1.x 6.9.x/8.9.x or later minor version 1.5.6
5.2.x 6.9.x/8.9.x or later minor version 1.6.7
5.2.x 6.9.x/8.9.x or later minor version 1.7.4
6.0.x 8.9.x or later minor version 6.0.8
6.1.x 8.9.x or later minor version 6.1.5
6.1.x 8.9.x or later minor version 6.2.9
7.0.x 8.9.x/10.9.x or later minor version 7.0.7
7.1.x 8.9.x/10.9.x or later minor version 7.1.4
7.2.x 8.9.x/10.9.x or later minor version 7.2.4
7.2.x 8.9.x/10.9.x or later minor version 7.3.9
8.0.x 10.9.x or later minor version 8.0.6
8.1.x 10.9.x or later minor version 8.1.3
8.2.x 10.9.x or later minor version 8.2.2
8.2.x 10.9.x or later minor version 8.3.29
9.0.x 10.13.x/12.11.x or later minor version 9.0.7
9.1.x 10.13.x/12.11.x or later minor version 9.1.x
10.0.x 10.13.x/12.11.x or later minor version 10.0.8
10.1.x 10.13.x/12.11.x or later minor version 10.1.7
10.2.x 10.13.x/12.11.x or later minor version 10.2.x
11.0.x 10.13.x/12.11.x or later minor version 11.0.7
11.1.x 10.13.x/12.11.x or later minor version 11.1.4
11.2.x 10.13.x/12.11.x or later minor version 11.2.x
12.0.x 12.13.x/14.15.x or later minor version 12.0.x

 

Setup development environment

1) Install Node: Download the needed version from the official website

2) Install Angular

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

3) Install Ionic

npm install -g @ionic/cli
Enter fullscreen mode Exit fullscreen mode

4) Install Android SDK: Guide to install the Android SDK on Windows, Mac and Linux

 

Launching app on Android

Navigate to the project root directory and type the following commands:

npm install
Enter fullscreen mode Exit fullscreen mode 
ionic cordova platform create android
Enter fullscreen mode Exit fullscreen mode 
ionic cordova run android
Enter fullscreen mode Exit fullscreen mode

To launch the app in reload live mode and view the changes in real time:

ionic cordova run android -l
Enter fullscreen mode Exit fullscreen mode

 

Launching app on iOS

1) Navigate to the project root directory and type the following commands:

npm install
Enter fullscreen mode Exit fullscreen mode 
ionic cordova platform create ios
Enter fullscreen mode Exit fullscreen mode 
ionic cordova platform prepare ios
Enter fullscreen mode Exit fullscreen mode

2) Open the native project created in the platform folder with XCode and build and run on the iOS device.

 

Release apk

1) Enter the command:

ionic cordova build android --release
Enter fullscreen mode Exit fullscreen mode

2) Rename the apk generated in: \platforms\android\app\build\outputs\apk with: {APP_NAME}-release-unsigned.apk

3) Move the apk to the jarsigner path Eg: C:\Program Files\Java\jdk1.8.0_201\bin (Alternatively set the jarsigner in the environment variables).

4) Move the .keystore file for the app always in \bin.

5) Enter the command 'jarsigner' to sign apk (enter the keystore password when required):

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore {APP_NAME} -release-key.keystore {APP_NAME} -release-unsigned.apk {APP_NAME} -key
Enter fullscreen mode Exit fullscreen mode

6) Move {APP_NAME}-release-unsigned.apk to: C:\Users\{USER_NAME}\AppData\Local\Android\Sdk\build-tools\{API you want to build with (Eg. android-4.4.2 or 29.0.2}

7) Navigate to: C:\Users\{USER_NAME}\AppData\Local\Android\Sdk\build-tools\{API you want to build with (Eg. android-4.4.2 or 29.0.2)}

8) Enter the command 'zipalign':

zipalign -v 4 {APP_NAME}-release-unsigned.apk {APP_NAME}_{RELEASE_DATE or APP_VERSION}_{ENVIRONMENT_BACKEND}.apk
Enter fullscreen mode Exit fullscreen mode

9) Your apk is ready to be delivered!

 

Release ipa

1) Enter the following commands:

ionic cordova platform prepare ios
Enter fullscreen mode Exit fullscreen mode

2) Import the Enterprise account certificate to the MAC. If the certificate has already been created, you can export it from another MAC or you can create it (https://help.apple.com/xcode/mac/current/#/dev154b28f09).

3) Enter the provisioning profile of the app which can be downloaded from the Apple Developer website (Download manual provisioning profiles: https://help.apple.com/xcode/mac/current/#/deva899b4fe5).

4) Open the native project with Xcode.

5) Choose "Generic iOS Device" as run device.

6) Select Product -> Archive from the top menu.

7) Your ipa is ready to be delivered!

Image credits:
Top 7 Reasons to Pick IONIC Framework for Mobile Apps

Top comments (0)

Read next

kyrierui profile image

YOLO V5 running on an Android phone Part 1(train model)

Ray -

retyui profile image

Cheat-sheet of diseases based on people's symptoms from Frostpunk: Beyond the Ice game

Davyd NRB -

codewithahsan profile image

Configuring Tailwind CSS for Storybook in an Angular Library inside an NX monorepo

Muhammad Ahsan Ayaz -

pedrobruneli profile image

How to cache requests in Angular

Pedro Bruneli -