My experience on my daily works... helping others ease each other

Sunday, December 22, 2019

Ionic 4 + React + Capacitor: Publishing Your Apps

Since I don't have Apple Store Developer Account yet, I can only publish on Android, of which at Google Play Store. Head up if you are ready.

Before you start. Here is my development tools/environment.
  1. VS Code 

  2. Version: 1.41.0
    Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
    Date: 2019-12-11T17:58:38.338Z
    Electron: 6.1.5
    Chrome: 76.0.3809.146
    Node.js: 12.4.0
    V8: 7.6.303.31-electron.0
    OS: Darwin x64 19.2.0


  3. OSX Catalina with zsh (I am not using Bash)

  4. Samsung A50 running Android

Steps to publish your first Apps on Google Play.

1. Check your installation
           Command to check your NPM version
       % npm -v
       6.13.4
           Command to check your ionic version
       % ionic -v

       5.4.13

2. Test your apps on Android devices by running the following command on your command prompt
    ionic serve --devapp

   > ionic integrations enable cordova
   [ERROR] Ionic doesn't support using Cordova with @ionic/react projects.
        
        We encourage you to try ⚡️ Capacitor ⚡️ (https://ion.link/capacitor)

If you come across the above error, no worries. This is because your app is Ionic + React and Cordova does not support this. You need to add capacitor to it. If you already configure it with capacitor before, you don't need to run the command.

Run the following command.
      % ionic integrations enable capacitor
Once completed, you will see the following
     ðŸŽ‰   Your Capacitor project is ready to go!  🎉


    Add platforms using "npx cap add":

    npx cap add android
    npx cap add ios
    npx cap add electron

    Follow the Developer Workflow guide to get building:
    https://capacitor.ionicframework.com/docs/basics/workflow
     

    [OK] Integration capacitor added!

Next, initialize your apps to use the capacitor by running command npx cap init [appname] [appid]. The appname and appid are available in file capacitor.config.json.

Once done, run ionic build command. You shall see similar to following
> react-scripts build
Creating an optimized production build...
Compiled successfully.


File sizes after gzip:
...

354 B     build/static/js/5.c9486a88.chunk.js

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve ##this command is to install static server
  serve -s build       ##this command is to run the static server

Find out more about deployment here:   

Give it a try by running the last two command shown above. I did and the following appeared. Give it a try and use any other computer to browse your apps.

   ┌───────────────────────────────────────────────────┐
                                                    
     Serving!                                       
                                                    
     - Local:            http://localhost:5000      
     - On Your Network:  http://192.168.1.123:5000  
                                                    
     Copied local address to clipboard!             
                                                    

   └───────────────────────────────────────────────────┘

Voila!! You are halfway go from releasing your apps. BUT damn, you get few more errors when you try running command npx cap add android
   [error] The web directory ([some folder of your apps]) must contain a "index.html".

    It will be the entry point for the web portion of the Capacitor app.

What is next? If you google it, you will only be directed to https://github.com/ionic-team/capacitor/issues/116 or few which won't resolve your problem. Just go to your project folder, find where index.html is located. For mines, it is located in the folder public.


So, change your capacitor.config.json to point the webDir to the folder that holds the index.html. In my case, it will look like below
"npmClient": "npm",
"webDir": "public",

Finally, run ionic build and followed by npx cap add android.
Once done, you will see the following message.
Installing android dependencies in 18.77s
Adding native android project in: /YourProjectPath/android in 77.66ms
Syncing Gradle in 107.10s
add in 125.95s
Copying web assets from public to android/app/src/main/assets/public in 7.90ms
Copying native bridge in 1.21ms
Copying capacitor.config.json in 4.62ms
copy in 24.10ms
Updating Android plugins in 3.01ms
  Found 0 Capacitor plugins for android:

update android in 14.69ms

Now you can run npx cap open android to launch Android Studio

So go ahead run the command npx cap open android 
The command will open your android studio, update your Gradle and build your apps. It shall tell you where your APK is released.



Once done, observed on Gradle Sync Issues. Any Red or Orange, please do resolve it first.
Test your apps by running it.

NOTE: If you still face a problem; for instance, you have blank screen, Follow the following steps:
Ionic 4 + React + Capacitor — The right way of building mobile apps with these three https://link.medium.com/uHL1APKDx2 or http://malaysiandeveloper.blogspot.com/2019/12/ionic-4-react-capacitor-right-way-of.html

3. Test your apps by running it on emulater.
4. Before you publish your apps, create your splash screen. You can follow the steps shown here. I do it manually; that is by changing all icons in all folders located at android/app/source/main/res using Adobe Photoshop. Then I added the following in my capacitor.config.json file
"plugins": {
"SplashScreen": {
"launchShowDuration": 3000,
"launchAutoHide": true,
"backgroundColor": "#000000",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#ff9900",
"showSpinner": true
}
}

That shall do it.

5.  If you change the config and add new files, just recompile your code (start at step 2 again) and rebuild your APK.

6. Finally, you are ready to publish. If you are using Ionic 4 + React + Capacitor, skip step 7 to 10.

7. Create your key (if you have yet to do so). Follow the following step
(base) % keytool -genkey -v -keystore [yourkey.keystore] -alias [aliasname] -keyalg RSA -keysize 2048 -validity 999999
Enter keystore password:  
Re-enter new password: 
What is your first and last name?
  [Unknown]:  [Your Name]
What is the name of your organizational unit?
  [Unknown]:  [Your Company]
What is the name of your organization?
  [Unknown]:  [Your Company]
What is the name of your City or Locality?
  [Unknown]:  [Your current Local]
What is the name of your State or Province?
  [Unknown]:  [Your State]
What is the two-letter country code for this unit?
  [Unknown]:  MY
Is CN=My Name, OU=MyName, O=MyName, L="Local", ST=State, C=MY correct?
  [no]:  Yes

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 999,999 days
for: CN=My Name, OU=MyName, O=MyName, L="Local", ST=State, C=MY

[Storing my-release-key.keystore]

8. Signed your Unsigned APK (or your successful compiled/debug APK). Normally, your APK is located at android/app/..../debug/
- Run the command
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore /android/app/build/outputs/apk/debug/app-debug.apk [your-alias-name-given-during-key-generation]
Enter Passphrase for keystore: 

 updating: META-INF/MANIFEST.MF
....
Warning: 
The signer's certificate is self-signed.
No -tsa or -tsacert is provided and this jar is not timestamped. Without a timestamp, users may not be able to validate this jar after the signer certificate's expiration date (4757-11-17).

(base) % 

Note: Don't worry about the warning as you are signing using your own certs.
If you face problem of jarsigner error: java.time.DateTimeException: Invalid value for MonthOfYear (valid values 1 - 12): 0
Don't worry, just change your Java Environment/JDK to higher version. For example, I'm using Java 9 during the signing process, I just switch to JDK10 using JEnv. and it works

9. Next, align your APK or in other words, compile for final release using the Zipalign command.

(base) % zipalign -v 4 [your-signed-apk].apk [yourfinalnameapps].apk

please make sure you include the path to your APK and path to zipalign. Zipalign is located in android folder; for instance, mine is located at ~/Library/Android/sdk/build-tools/29.0.2/

10. Once done, you should be able to release it to Google.

11. For Ionic + React + Capacitor, you must perform few edits before you can begin.



12. Then run the command npm run build, followed by npx cap copy android or npx cap sync android.

13. Open your Android Studio and rebuild the projects.

14. Use your Android Studio to perform the following:


** Note: Please create key using Android Studio to ease in publishing the apps

15. Touch down. Open your Google Play Dashboard and start your publishing process.

The full documentation is reachable at https://ionicframework.com/docs/publishing/play-store and https://ionicframework.com/docs/v1/guide/publishing.html and https://support.google.com/googleplay/android-developer/answer/7159011
Share:

5 comments:

Kaparthicynixit said...

Thanks for posting the best information and the blog is very good.
Visit us: Dot Net Training Online India
Visit us: .Net Online Training Hyderabad

Beel SEO EXPORT said...

Much obliged as a results a reasonable setup as you have been endorsed to share direction thinking us. we can totally praise through and through you have completed here because of the reality you have made my comport your self as pleasantly ventilated as ABC. Hotspot Shield License Key

Valentines Day Wishes 2021 said...

You comprehend your errands stand separated of the gathering. there may be something uncommon almost them. It appears to me all of them are in truth amazing!File Viewer Plus Activation Key Free

rana g said...

Here we will be making your work a lot easier by our perfect anniversary wishes for the wife that will make your bond even more special and stronger. Rekindle your feelings and love with these pretty words and wedding anniversary wishes for wife. .Anniversary Words For Wife

Hurrain said...


Nice post, and thanks for letting us know about this. We find it very helpful.
Adobe Illustrator CC

About Me

Somewhere, Selangor, Malaysia
An IT by profession, a beginner in photography

Blog Archive

Blogger templates