This tutorial uses Ionic Angular as the app framework/UI components and Capacitor to deploy the app to iOS and Android. However, given the focus on Appflow's mobile CI/CD features, you can follow along with any web framework or native runtime.
In this first step, you'll install the tooling required to use Appflow, create an Ionic app, and integrate your project with an Appflow app.
In order to use an Ionic app in Appflow, you'll need to install a few tools and create an Ionic app first.
- Node.js for interacting with the Ionic ecosystem. Download the LTS version here.
- Command-line interface/terminal (CLI):
- Windows users: For the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
- Mac/Linux users, virtually any terminal will work.
- Run the following in the command line terminal to install the Ionic CLI (
native-run, which is used to run native binaries on devices and simulators/emulators, and
cordova-res, used to generate native app icons and splash screens:
npm install -g @ionic/cli native-run cordova-res
The -g option means install globally. When packages are installed globally, EACCES permission errors can occur. Consider setting up npm to operate globally without elevated permissions. See Resolving Permission Errors for more information.
From the command line, run the following to create an Ionic Angular app named "starter_app" that uses the "blank" starter template:
ionic start starter_app blank --type=angular
You will be prompted with an option to integrate with Capacitor. You can choose either Capacitor or Cordova later. Ionic recommends using Capacitor.
Integrate your new app with Capacitor to target native iOS and Android? (y/N)
- To integrate with Capacitor enter "y" and press return.
[OK] Integration capacitor added!
- To integrate with Cordova, use the command below. More information on getting started with Cordova is here.
Ionic strongly recommends using Capacitor for the best Appflow experience. To learn more about these platforms, review the Capacitor vs Cordova article.
ionic integrations add cordova
Next, head over to your Git host of choice and create a new repository (ex:
starter_app) for this project.(these may vary based on the host)
Once you have your repository ready, it's time to push your local project to Git.
git add . # stage all changesgit commit -m "initial commit" # commit staged changesgit push origin main # push changes from the main branch to the git host
- To integrate Appflow with any Git, you must log in to your Git service of choice as a user that meets the following requirements:
- Has full read, write, and admin privileges on any repositories you'd like to connect with Appflow.
- Has the ability to create a webhook in all repositories you'd like to connect with Appflow.
Appflow works directly with Git version control, using your codebase as the source of truth for Deploy and Package builds. In order for Appflow to access your code, you can choose one of these hosting services: GitHub, Bitbucket, Bitbucket Server, GitLab, GitLab Self-Managed or Azure DevOps
Bitbucket Server, GitLab Self-Managed, and Azure DevOps integrations are only available on our Standard or Enterprise plans. Please contact us if you require this feature.
Log into the Appflow Dashboard using your credentials and you can see options to:
- Create a new app (using App Wizard)
- Import an existing app (from an existing Git repository)
For this tutorial, we will import our app that we already pushed to our Git.
Importing an existing App
Import existing app option and continue.
Import your existing starter app into Appflow by giving it a name, then choose your choice of Git provider.
Once you successfully integrate your Git Provider with appflow, all the repositories available to the integrating users are listed.
Select the repository that you would like to use for this particular app in appflow (ex:
That's it! You're ready to start enabling some cool Appflow features.