July 16, 2019
  • Announcements
  • Appflow
  • Capacitor
  • DevOps

Introducing Capacitor Support for Ionic Appflow

Nick Hyatt

capacitor-appflow-support

Today we’re 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.

If you’re already a user of Appflow and Capacitor, feel free to skip down to the section below, Setting Up Capacitor, for instructions on how to get started.

Ionic Appflow 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).

Cordova vs. Capacitor

Appflow’s cloud services initially used Apache Cordova, 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 without having to learn native mobile platform technology.

As part of leveraging Cordova, Appflow is able to provide:

  • Reliable native builds in the cloud. No local dependency issues to worry about, and a one-stop shop for your team to track the latest iOS and Android app versions together.
  • Real-time updates. Save time and make changes fast by pushing HTML, JavaScript, or CSS updates live to your end users.
  • CI/CD automation. With pre-built workflows and smart defaults, your team can automate their pipeline in minutes, with CI/CD best practices already built in.

Beginning today, we’ve added support for Capacitor, our take on building cross-platform apps. It’s available on all Appflow plans.

Note: Support for Cordova in Ionic Appflow will not be going away!

Capacitor is Ionic’s 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.

Capacitor builds on the best parts of Cordova, 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.

Using Capacitor with Appflow

In spirit, Capacitor and Cordova are very similar. Both use WebViews to run your Ionic app’s web code and provide a structured way of exposing native functionality to your web code.

However, there are some key differences between Cordova and Capacitor, which means changes to how Capacitor must be configured to use Appflow’s services.

Now, let’s take a look at how to integrate each Appflow service with Capacitor.

Setting Up Capacitor

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:

New Ionic Project

ionic start myApp tabs --capacitor
cd myApp

Existing Ionic Project

cd myApp
ionic integrations enable capacitor

# or for Angular projects
ng add @capacitor/angular

Initialize Capacitor

# appName is name of the app, appId is domain identifier (ex: com.example.app)
npx cap init [appName] [appId]

# Build the project once
ionic build

# Add native platforms
npx cap add ios
npx cap add android

Package: Cloud Native Builds

Since Appflow’s Package feature builds native binaries on the server, there are no different steps required for Capacitor. Simply start a Package Build as you normally would in Appflow, then download the binary once it finished building.

Automation: CI/CD

Similar to Package, Appflow’s Automation features run server side. The full suite of CI/CD features support Capacitor.

Deploy: Live Updates

Demo Video: Using Appflow’s Live Deploy feature, you can ship real-time updates to your users.

Using Ionic Appflow’s Live Deploy feature requires the installation of the Appflow SDK in your Ionic app.

First, if your app hasn’t been linked to Ionic Appflow, run the ionic link command then follow the prompts to connect the app to Appflow.

Next, add the Deploy feature:

ionic deploy add

Several prompts will walk you through the setup.
Appflow App ID: [Press Enter key to use the current Id or type in a different one]
Channel Name: [Enter desired channel name or “Master”]
Update Method: [Select “auto”, “background”, or “none.”]

The Deploy plugin (cordova-plugin-ionic, named as such since it was created long before Capacitor) is successfully installed into your Ionic project and various variables are automatically configured in the native iOS/Android projects for you.

To see the Deploy feature in action, there’s just a few more steps. Commit the changes to source control/Appflow:

git add .
git commit -m “added appflow deploy”
git push

Your Capacitor app is now ready to use Appflow Deploy. Follow the normal steps to trigger a deploy build (now containing the Appflow SDK), then send a live update to your users.

Start Using Capacitor with Appflow Now

Appflow’s new Capacitor support combines a modernized native app runtime with compelling DevOps features, resulting in a powerful solution for teams looking to build powerful Ionic mobile apps. Begin using Capacitor with Appflow today!

We recently recorded a special live demo that shows off how to migrate a Cordova app to Capacitor as well as all the features mentioned in this post, including Capacitor native builds, live deploys, and automations. Check it out:

Nick Hyatt

Related Posts