Project Creation and Git
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 create a project on Appflow.
Check out this branch from this tutorial's companion app to compare with your starter project. If you run into any issues or need help understanding any of these concepts, please contact Ionic Support.
In order to use 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.
- To integrate Appflow with Git, you must log into your Git service of choice as a user that meets the following requirements:
- Has full read, write, and admin privileges on any repos you'd like to connect with Appflow.
- Has the ability to create a webhook in all repos you'd like to connect with Appflow.
- 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
starter_app) for this app (these steps will vary based on the host).
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, GitLab or Bitbucket.
To create an app in the Appflow Dashboard and then connect it to your git repo:
- Log into the Appflow Dashboard using your credentials and select the Apps tab from the side menu.
- Next, click the Add App button:
- From the pop-up dialog, enter "Starter App" for the name then enable "Allow web builds" toggle (we'll see what that does very soon).
- Select Git from the Settings sub-menu in the side bar, then connect to your Git host of choice:
Back in the command line, link the newly created Appflow app with your local repository using
ionic link. Choose "Link an existing app on Ionic Appflow", then select
Push a commit.
git add . # stage all changes git commit -m "initial commit" # commit staged changes git push origin main # push changes from main branch to the git host
That's it! You're ready to start enabling some cool Appflow features.