Upgrade to Capacitor 3 - Application -Part I

Recently I needed to upgrade to ionic capacitor 3. Let us see the steps of upgrading. 

Upgrading The Application: 

1. Capacitor 3 supports nodeJS 12 or greater. So first check the version for node JS

node -v

Note: Here I have version 14, so no need to update node JS. If you have a version lower than 12, you need to update.

2. Capacitor 3 supports Typescript 3.8 or greater. If you use visual studio code You can check the typescript on the lower right side after selecting the ts file

3. Below is the command to install the latest capacitor cli and core packages. You can see below the version is 3. 

npm install @capacitor/cli@latest @capacitor/core@latest

 

 

4. Update the plugin, If you have used it in your application.  

5. ionic build

6. When we try to cap sync to the platform, there we can find the warning about mismatch of the version. Read the warning in the below snap:

So we need to update the android here.

npx cap sync

7. Update the Platform for capacitor 3: I have worked on only the Android platform, So here is the process for Android upgrade.

i) Install version 3 . you can install @capacitor/android@3 or @capacitor/android@latest as the latest is 3 now.

npm install @capacitor/android@latest

 npx cap sync

ii) You can run the application by CLI or from Android Studio. Here I will explain the execution by Android Studio. To open the Android Studio, Execute the below command:

npx cap open android

or

ionic cap open android

iii) Check for Gradle: Capacitor 3 supports below or higher versions for Gradle and Gradle Plugins. ( File Menu-> Project Structure). If you have the below version from 7.0 for Gradle or 4.2 for Gradle Plugin, you can change it here and click "OK". It will upgrade.

8. Execute the application

After pressing the run, Android Studio will take some time to build the Gradle, and then it will launch the app on the device.

[ Note: There are some configuration changes as well, but when you upgrade, those will automatically change in the configuration files.]

Thank you, Hope this is helpful.

References:

https://capacitorjs.com/docs/updating/3-0

https://capacitorjs.com/docs/updating/3-0#android

 

Add comment