Deploy to Android and iOS Platform

Ionic framework Practice 2

before deploying to android, here are some requirements:

• JDK8
• Android Studio 3.6 version or up
• Updated Android SDK tools, platform and component dependencies. Available through Android Studio’s SDK Manager

Note: we are using Capacitor not Cordova, cuz react version didn’t support Cordova

Deploy Steps

(in your app directory, using terminal)

Follow the tutorials for more detail:

• Ionic React Quickstart
• Capacitor Ionic Getting Started
• Ionic Commands Capacitor

After created your ionic application, which we did at prat one. Access to the folder first, then

Build the project

$ ionic build

After using ionic build you must see a “build” folder in your app. Make sure in capacitor.config.json file “webDir”: “build” is there, not “www”.

Note: Capacitor treats “www” as its webdir when you change it to “build”,
you are telling it that all the project materials are not in www folder but in the build folder, copy all data from there and gradle will runs it as an app in the capacitor.

Add Android and iOS Platform

(snapshots take android for example)

$ ionic cap add android
$ ionic cap add ios

you will the process like below

Open and run the android project at native IDEs Android Studio

$ ionic cap open android
$ ionic cap open ios

another way after Build the project :

Initialize Capacitor with your app information

$ npx cap init [App name] [App ID]

Note: npx is a new utility available in npm 5 or above that executes local binaries/scripts to avoid global installs.

Add and Open Platform

$ npx cap add android
$ npx cap add ios
$ npx cap open android
$ npx cap open ios

Congrats! The android application should operate on Android Studio automatically!

Wait for minutes to build the android application, then click on the ‘run app’ button. The emulator I use Nexus one API 28

After the app installed in the emulator successfully, you would see the message as below

The emulator would open the app automatically. If you back to the home screen and swipe up, it will show your apps, and the myApp should be there.

Update new changes

If you make changes in your app content, remember to run these command line before you run the app

Copy and Update to Android and iOS

$ ionic capacitor sync android
$ ionic capacitor sync ios

This action will copy all the change to android/app/src/main/assets/public, ensure the android and ios platform have the same conditions. Run the app again to see those update!

$ ionic cap run android
$ ionic cap run ios

Note: cap = capacitor

Issues

If you got “Manifest merger failed” from logs after run ‘ionic cap run android’, please create a file within the root dir called “gradle.properties” and adding the code below:

android.useAndroidX=true
android.enableJetifier=true

After adding, run the command again to update

$ ionic cap sync android
$ ionic cap sync ios

—

If your laptop is Window OS, when you run ‘ ionic cap sync ios’, you will have the error related ‘pod’ as below.

That is becausepod is a command for Cocoapods, the dependency manager for Xcode project, it must be running on macOS.

Previous: Create an Ionic Application with React

Next: Capacitor Storage API

Support my writing by becoming a Medium member today and getting access to an unlimited number of articles.