Skip to main content

Deploying Your App with Appflow

With your newly minted enterprise application, it is time to get it in your user's hands. The best way to do that is using Appflow. Appflow is a continuous integration (CI) and continuous deployment (CD) platform for Ionic development teams. The platform helps development teams continuously build and ship their apps faster than ever!

Let's walk through the steps together.

Connect Your Repo#

Appflow works directly with Git version control and uses your code base as the source of truth for Deploy and Package builds. In order for Appflow to access your code, you can choose to integrate directly using a hosting service like GitHub or Bitbucket, or you can push your code directly to Appflow.

If you did not connect your app's repo in earlier part of the tutorial, now is the time to do so. In the Appflow Dashboard ensure you've created your new app and connected to it's git repo. More details can be found within the Appflow Quickstart, if needed.

Install the Appflow SDK#

In order to take advantage of some of the best Appflow features, like deploying live updates to your app and bypassing the app stores, you'll need to install the Appflow SDK (also known as the Ionic Deploy plugin). The Appflow SDK comes with Ionic Appflow's Live Update feature for detecting and syncing your app with updates that you've pushed to channels.

The best way to install the Appflow SDK plugin is to follow the instructions provided in the Dashboard. In the Deploy > Destinations section, clicking "Install Instructions" with pop a modal with a command you'll be able to copy and paste into your terminal. The code will look similar to the following, except with all of the values already filled in for you based on your selections within the modal itself:

ionic deploy add  \    --app-id="YOUR_APP_ID" \    --channel-name="YOUR_CHANNEL_NAME" \    --update-method="background|auto|none" \

More details on installing the Appflow SDK can be found here.

Committing to Appflow#

Once this command you copied from the last step is run in your terminal, be sure to commit the changes just made to your project and push them to your git host:

git add . # stage any changesgit commit -m "added appflow sdk" #  commit staged changesgit push origin main # push the changes from the main branch to your git host

You will now see your commit available in the Commits tab of the Dashboard.

Additional details on pushing a commit can be found here.

Deploy a Live Update#

With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native app to listen to a particular Deploy Channel Destination. When a Live Update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination.

To get the Live Update deployed, a Web build will need to be created. This can be done through the Start build icon from the Commits tab or by clicking the New build button in the top right corner of the Build > Builds tab. After selecting the correct commit to deploy, select the Web target platform and the Latest build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable Live Update and pick the Channel to automatically assign the build to once it successfully completes.

Upon completion of the Web Build, additional versioning options are available to you. After completing this section, and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the Deploy live updates button in the build detail page. The same can be done by clicking the Deploy live updates icon on the build in the Build > Builds tab and select the Channel from the dropdown.

To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the Visual Studio Code - Ionic extension. You will open the Ionic extension panel. Under the Capacitor section, you will Build, Sync, then choose where you want to run the app in the Run. This could be on an iOS simulator or Android Emulator, or a real device if you have one plugged into your computer. Another route would be to open the app in Xcode or Android Studio via the Ionic extension, then run the app on a device or simulator/emulator.

Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup (if you have chosen the auto update method during setup). If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!

To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the Deploy a Live Update section inside the Appflow docs.

Build a Native Binary#

Next up is a native binary for your app build and deploy process. This is done via the Ionic Package service.

First things first, you will need to create a Package build. This can be done by clicking the Start build icon from the Commits tab or by clicking the New build button in the top right from the Build > Builds tab. Then you will select the proper commit for your build and fill in the several required fields, as well as any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors.

Given a successful Package build, an iOS binary (.ipa or IPA) or an Android binary (.apk or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the Artifacts section in the right of the build detail page or clicking the Download IPA/APK icon on the build in the Build > Builds tab.

Further information regarding building native binaries can be found inside of the Build a Native Binary section inside the Appflow docs.

Create an Automation#

Automations enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger Package builds and Deploy builds every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production.

For more information, visit the Create an Automation section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our Basic plans and above.

Create an Environment#

Package builds and Deploy builds can be futher customized via Environments. This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the Automation feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.

Creating an Environment is available for those on our Basic plans and above. More information on this can be found in the Create an Environment section within the Appflow docs.

Create a Native Configuration#

Native Configurations allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any Package build or Automation.

Native configs can be used to:

For access to the ability to create a Native Configuration, you will need to be on our Basic plans and above. Additional details of this feature can be found in the Create a Native Configuration section within the Appflow docs.

What’s Next?#

Congratulations! You developed a complete cross-platform enterprise app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to you users devices!

There are many paths to follow from here. Try adding another Ionic UI component to the app, or more native functionality. The sky’s the limit. Once you have added another feature run the the build and deploy process again through Appflow to get it out to your users.

Happy app building! 💙

Edit this page