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