September 24, 2020
  • Announcements
  • Appflow

Announcing Web Previews in Appflow

Matt Kremer

Today, we’re thrilled to announce Web Previews in Appflow, the easiest way to share what you’re working on with coworkers, stakeholders, and more.

Unfamiliar with Appflow? It’s a mobile DevOps solution by Ionic that makes it easy to continuously build, deploy, and update mobile app experiences across iOS, Android, and the web. With Appflow, you can fully automate your team’s app development workflow, and go from idea to production in less time.

New to Ionic or Appflow? Try our step-by-step app wizard to build your first app and generate a web preview in minutes.

Web Previews represent the next step in our belief in the web first development strategy, and we’re especially excited for what this feature enables for teams who want a quick and easy way to share pre-production versions of their app, without the overhead and complexity of managing TestFlight, iOS enterprise certs, or any of the more complicated methods of showing off what you’ve built.

Check out this short overview video, then read on to see how to start using Web Previews today:

Web Previews: Faster feedback loops

Much of the app development process, especially for mobile apps, involves getting the design just right along with fine tuning the overall user experience. To do so effectively, you have to get the app into your user’s hands – screenshots and mockups don’t cut it.

Traditionally, developers would accomplish this via testing and sharing apps like TestFlight, or by generating native app binaries and distributing them via iOS enterprise certs. When it comes to iterating quickly, such as tweaking a design change or fixing bugs, it’s annoying to get slowed down by native builds.

Fortunately, when you combine Ionic Framework’s UI components and Capacitor’s cross-platform APIs, you can develop and test 99% of your app in the browser. Also known as the web first approach, you create the app locally then deploy to mobile devices and app stores when ready.

Today, we’re taking that a step further – sharing your app with your team is now a URL click away:

There’s just a couple of steps to get started.

Prerequisite: Turn On Preview URLs

For privacy and security reasons, all existing applications in Appflow have Web Previews disabled by default. In order to turn URLs on, you’ll need to visit the “Web preview” settings inside of the dashboard for your app and enable them.

Once they’re enabled, you can create a Web Preview for a specific web build.

Building a Web Preview

Begin by navigating to either the Commits or the Build screen. Select the “Create a new Build” option, choose “Web” as the target platform, then toggle the Web Preview destination before clicking “Build”:

After the build succeeds, you’ll be able to click the eye icon in your builds list to view that Web preview:

You can now interact with and test your app!

Switch between previewing different modes of your application by clicking the “iPhone” dropdown in the top right of the Web preview. This allows you to choose other devices like Android or a tablet.

Sharing Web Previews

Individually reviewing Web Previews is useful for fast iterations, but the real power of Appflow’s Web Previews stems from the collaboration capabilities it unlocks for teams.

Some collaboration ideas for teams include:
– Initiating a UX/UI review with your design team
– Showing an interactive prototype to your Product Manager
– Verifying that a bug has been fixed with your QA team
– Demonstrating work in progress with your customers or stakeholders

Sharing a Web Preview is easy: click the “Share” button from a Web Preview in the top right, then “Copy to clipboard.” Anyone with the copied URL can view the app instantly. Alternatively, scan the QR code displayed on the Web Preview with the stock Camera application on an iOS or Android device. This will open the app in the phone’s browser.

Web Preview URLs are public, accessible to anyone with the link.

What about Native features?

Given that Web Previews run in a web browser, native APIs or plugins will not work. As a best practice, we recommend defensive programming to handle differences between the web and native platforms using either Capacitor or Ionic Framework’s Platform API.

Capacitor’s isNative property detects if the app is running on iOS or Android:

if (Capacitor.isNative) {
   // call native plugin
} else {
  // handle on the web

Alternatively, you can detect the app running on mobile with the Platform API:

if ("hybrid")) {
   // call native plugin
} else {
   // handle on the web

But wait, there’s more

New to Ionic or Appflow? Build and share your first app with others in minutes using our step-by-step app wizard – all completely free.

To create an app, enter a really compelling name, such as “My first Ionic app.” Choose your app’s icon, theme color, and layout template. Next, choose your JavaScript Framework of choice: Angular, React, or Vue.

Next, sign up for an Ionic account with your Git host of choice (GitHub, Bitbucket, or GitLab). This gives you free access to web app previews and live app deployments.

Alternatively, you can create an account with a username and password, then choose your Git host:

After connecting to the Git host, a new repository, web build, and Web Preview is created automatically for your new Ionic app. After a brief moment, you’ll be brought to your app within Appflow:

Follow the instructions to install the Ionic CLI and clone the app locally, or click the Live Preview button in the upper right corner to test out and share your new app immediately!

From here, you can begin customizing your app or deploy it to iOS and Android devices using Capacitor.

Start using Web Previews today

Web Previews represent the next phase of Appflow’s goal of empowering web developers building mission critical apps at scale. Develop most of your apps in the browser, share with stakeholders for early feedback, then deploy to native mobile when ready.

Web Previews are available on all Appflow plans. Build a web preview from within Appflow or create a new Ionic app in minutes right now.

How will you use the new Web Previews feature? Let us know in the comments.

Matt Kremer