Skip to main content

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 integrate your project with an Appflow app.

note

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.

Required Ionic Tooling#

In order to use an Ionic app in Appflow, you'll need to install a few tools and create an Ionic app first.

System requirements:#

  • 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.

Install Ionic CLI:#

  • Run the following in the command line terminal to install the Ionic CLI (ionic), 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
note

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.

Create a new Ionic app#

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

Integrating Capacitor

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.
note

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

Create a Git repository#

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

Git Permissions

  • 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.

App Creation and Git Integration#

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

note

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.

App Creation

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

Select the Import existing app option and continue.

Appflow-create-new-app

Import your existing starter app into Appflow by giving it a name, then choose your choice of Git provider.

Appflow-add-app-name

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:starter_app repository).

Appflow-git-integration

That's it! You're ready to start enabling some cool Appflow features.