Today we\u2019re excited to introduce support for Capacitor to Ionic Appflow, covering all features such as cloud-based native builds, real-time updates, and CI\/CD automation.<\/p>\n
If you\u2019re already a user of Appflow and Capacitor, feel free to skip down to the section below, Setting Up Capacitor<\/strong>, for instructions on how to get started.<\/p>\n Ionic Appflow<\/a> is a Mobile DevOps solution for developers and teams building apps with Ionic. It helps increase agility and app quality while speeding up time-to-market by automating key phases of the development lifecycle. By generating and streamlining the native app build process, shipping real-time updates, and organizing approval workflows, your team is free to focus on the good stuff (innovation).<\/p>\n <\/p>\n Appflow\u2019s cloud services initially used Apache Cordova<\/a>, an open source app runtime, to bundle Ionic apps into native iOS and Android apps. Cordova abstracts away the native side of apps and provides access to native features like Camera and geolocation through a library of plugins. It effectively empowers web developers to reuse their skills to build mobile apps<\/a> without having to learn native mobile platform technology.<\/p>\n As part of leveraging Cordova, Appflow is able to provide:<\/p>\n Beginning today, we\u2019ve added support for Capacitor, our take on building cross-platform apps. It\u2019s available on all Appflow plans<\/a>.<\/p>\n \n Note: Support for Cordova in Ionic Appflow will not be going away!\n<\/p><\/blockquote>\n Capacitor<\/a> is Ionic\u2019s new open source cross-platform app runtime that makes it easier to build web apps that run natively on iOS, Android, Electron, and the web.<\/p>\n Capacitor builds on the best parts of Cordova<\/a>, with some great added benefits, like more visibility into native project changes, better app maintainability as new mobile operating system versions are released, and easier native plugin development.<\/p>\n In spirit, Capacitor and Cordova are very similar. Both use WebViews to run your Ionic app\u2019s web code and provide a structured way of exposing native functionality to your web code.<\/p>\n However, there are some key differences<\/a> between Cordova and Capacitor, which means changes to how Capacitor must be configured to use Appflow\u2019s services.<\/p>\n Now, let\u2019s take a look at how to integrate each Appflow service with Capacitor.<\/p>\n First, we need to add Capacitor to our web-based project. For the best experience, we recommend an Ionic app. From a terminal, run these commands:<\/p>\n New Ionic Project<\/strong><\/p>\n Existing Ionic Project<\/strong><\/p>\n Initialize Capacitor<\/strong><\/p>\n Since Appflow\u2019s Package feature builds native binaries on the server, there are no different steps required for Capacitor. Simply start a Package Build<\/a> as you normally would in Appflow, then download the binary once it finished building.<\/p>\n Similar to Package, Appflow\u2019s Automation features run server side. The full suite<\/a> of CI\/CD features support Capacitor.<\/p>\nCordova vs. Capacitor<\/h2>\n
\n
Using Capacitor with Appflow<\/h2>\n
Setting Up Capacitor<\/h2>\n
ionic start myApp tabs --capacitor\ncd myApp\n<\/code><\/pre>\ncd myApp\nionic integrations enable capacitor\n\n# or for Angular projects\nng add @capacitor\/angular\n<\/code><\/pre>\n# appName is name of the app, appId is domain identifier (ex: com.example.app)\nnpx cap init [appName] [appId]\n\n# Build the project once\nionic build\n\n# Add native platforms\nnpx cap add ios\nnpx cap add android\n<\/code><\/pre>\nPackage: Cloud Native Builds<\/h2>\n
Automation: CI\/CD<\/h2>\n
Deploy: Live Updates<\/h2>\n