{"id":3412,"date":"2020-09-24T14:51:46","date_gmt":"2020-09-24T14:51:46","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3412"},"modified":"2020-09-24T14:51:46","modified_gmt":"2020-09-24T14:51:46","slug":"announcing-web-previews-in-appflow","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow","title":{"rendered":"Announcing Web Previews in Appflow"},"content":{"rendered":"<p>Today, we\u2019re thrilled to announce Web Previews in Appflow, the easiest way to share what you\u2019re working on with coworkers, stakeholders, and more.<\/p>\n<p>Unfamiliar with Appflow? It\u2019s 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\u2019s app development workflow, and go from idea to production in less time.<\/p>\n<blockquote><p>\n  New to Ionic or Appflow? Try our step-by-step <a href=\"https:\/\/ionicframework.com\/start\">app wizard<\/a> to build your first app and generate a web preview in minutes.\n<\/p><\/blockquote>\n<p>Web Previews represent the next step in our belief in the <a href=\"https:\/\/ionicframework.com\/blog\/forget-mobile-first-progressive-web-app-first-is-the-future\/\">web first development strategy<\/a>, and we\u2019re 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\u2019ve built.<\/p>\n<p><!--more--><\/p>\n<p>Check out this short overview video, then read on to see how to start using Web Previews today:<\/p>\n<p><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/d9zuxeonhd.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\">\n<div class=\"wistia_embed wistia_async_d9zuxeonhd videoFoam=true\" style=\"height:100%;position:relative;width:100%\">\n<div class=\"wistia_swatch\" style=\"height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;\"><img decoding=\"async\" src=\"https:\/\/fast.wistia.com\/embed\/medias\/d9zuxeonhd\/swatch\" style=\"filter:blur(5px);height:100%;object-fit:contain;width:100%;\" alt=\"\" aria-hidden=\"true\" onload=\"this.parentNode.style.opacity=1;\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Web Previews: Faster feedback loops<\/h2>\n<p>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\u2019s hands &#8211; screenshots and mockups don\u2019t cut it.<\/p>\n<p>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\u2019s annoying to get slowed down by native builds.<\/p>\n<p>Fortunately, when you combine Ionic Framework\u2019s UI components and Capacitor\u2019s cross-platform APIs, you can develop and test 99% of your app in the browser. Also known as the <a href=\"https:\/\/ionicframework.com\/blog\/forget-mobile-first-progressive-web-app-first-is-the-future\/\">web first approach<\/a>, you create the app locally then deploy to mobile devices and app stores when ready.<\/p>\n<p>Today, we\u2019re taking that a step further &#8211; sharing your app with your team is now a URL click away:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2132\" height=\"1816\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page.png\" alt=\"\" class=\"aligncenter size-full wp-image-3413 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page.png 2132w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-300x256.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-1024x872.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-768x654.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-1536x1308.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-2048x1744.png 2048w\" data-sizes=\"auto, (max-width: 2132px) 100vw, 2132px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 2132px; --smush-placeholder-aspect-ratio: 2132\/1816;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"2132\" height=\"1816\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page.png\" alt=\"\" class=\"aligncenter size-full wp-image-3413\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page.png 2132w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-300x256.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-1024x872.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-768x654.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-1536x1308.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ionifits-web-preview-page-2048x1744.png 2048w\" sizes=\"auto, (max-width: 2132px) 100vw, 2132px\" \/><\/noscript><\/a><\/p>\n<p>There\u2019s just a couple of steps to get started.<\/p>\n<h2>Prerequisite: Turn On Preview URLs<\/h2>\n<p>For privacy and security reasons, all existing applications in Appflow have Web Previews disabled by default. In order to turn URLs on, you&#8217;ll need to visit the &#8220;Web preview&#8221; settings inside of the dashboard for your app and enable them.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2234\" height=\"1094\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings.png\" alt=\"\" class=\"aligncenter size-full wp-image-3414 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings.png 2234w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-300x147.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-1024x501.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-768x376.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-1536x752.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-2048x1003.png 2048w\" data-sizes=\"auto, (max-width: 2234px) 100vw, 2234px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 2234px; --smush-placeholder-aspect-ratio: 2234\/1094;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"2234\" height=\"1094\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings.png\" alt=\"\" class=\"aligncenter size-full wp-image-3414\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings.png 2234w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-300x147.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-1024x501.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-768x376.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-1536x752.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-settings-2048x1003.png 2048w\" sizes=\"auto, (max-width: 2234px) 100vw, 2234px\" \/><\/noscript><\/a><\/p>\n<p>Once they\u2019re enabled, you can create a Web Preview for a specific web build.<\/p>\n<h2>Building a Web Preview<\/h2>\n<p>Begin by navigating to either the Commits or the Build screen. Select the \u201cCreate a new Build\u201d option, choose \u201cWeb\u201d as the target platform, then toggle the Web Preview destination before clicking &#8220;Build&#8221;:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1846\" height=\"1498\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle.png\" alt=\"\" class=\"aligncenter size-full wp-image-3415 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle.png 1846w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle-300x243.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle-1024x831.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle-768x623.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle-1536x1246.png 1536w\" data-sizes=\"auto, (max-width: 1846px) 100vw, 1846px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1846px; --smush-placeholder-aspect-ratio: 1846\/1498;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1846\" height=\"1498\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle.png\" alt=\"\" class=\"aligncenter size-full wp-image-3415\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle.png 1846w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle-300x243.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle-1024x831.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle-768x623.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-toggle-1536x1246.png 1536w\" sizes=\"auto, (max-width: 1846px) 100vw, 1846px\" \/><\/noscript><\/a><\/p>\n<p>After the build succeeds, you&#8217;ll be able to click the eye icon in your builds list to view that Web preview:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2626\" height=\"434\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link.png\" alt=\"\" class=\"aligncenter size-full wp-image-3416 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link.png 2626w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-300x50.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-1024x169.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-768x127.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-1536x254.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-2048x338.png 2048w\" data-sizes=\"auto, (max-width: 2626px) 100vw, 2626px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 2626px; --smush-placeholder-aspect-ratio: 2626\/434;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"2626\" height=\"434\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link.png\" alt=\"\" class=\"aligncenter size-full wp-image-3416\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link.png 2626w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-300x50.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-1024x169.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-768x127.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-1536x254.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-web-preview-build-list-link-2048x338.png 2048w\" sizes=\"auto, (max-width: 2626px) 100vw, 2626px\" \/><\/noscript><\/a><\/p>\n<p>You can now interact with and test your app!<\/p>\n<p>Switch between previewing different modes of your application by clicking the &#8220;iPhone&#8221; dropdown in the top right of the Web preview. This allows you to choose other devices like Android or a tablet.<\/p>\n<h2>Sharing Web Previews<\/h2>\n<p>Individually reviewing Web Previews is useful for fast iterations, but the real power of Appflow\u2019s Web Previews stems from the collaboration capabilities it unlocks for teams.<\/p>\n<p>Some collaboration ideas for teams include:<br \/>\n&#8211; Initiating a UX\/UI review with your design team<br \/>\n&#8211; Showing an interactive prototype to your Product Manager<br \/>\n&#8211; Verifying that a bug has been fixed with your QA team<br \/>\n&#8211; Demonstrating work in progress with your customers or stakeholders<\/p>\n<p>Sharing a Web Preview is easy: click the &#8220;Share&#8221; button from a Web Preview in the top right, then \u201cCopy to clipboard.\u201d 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&#8217;s browser.<\/p>\n<p>Web Preview URLs are public, accessible to anyone with the link.<\/p>\n<h2>What about Native features?<\/h2>\n<p>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\u2019s Platform API.<\/p>\n<p>Capacitor\u2019s <code>isNative<\/code> property detects if the app is running on iOS or Android:<\/p>\n<pre><code class=\"language-javascript\">if (Capacitor.isNative) {\n   \/\/ call native plugin\n} else {\n  \/\/ handle on the web\n}\n<\/code><\/pre>\n<p>Alternatively, you can detect the app running on mobile with the Platform API:<\/p>\n<pre><code class=\"language-javascript\">if (this.platform.is(&quot;hybrid&quot;)) {\n   \/\/ call native plugin\n} else {\n   \/\/ handle on the web\n}\n<\/code><\/pre>\n<h2>But wait, there\u2019s more<\/h2>\n<p>New to Ionic or Appflow? Build and share your first app with others in minutes using our step-by-step <a href=\"https:\/\/ionicframework.com\/start\">app wizard<\/a> &#8211; all completely free.<\/p>\n<p>To create an app, enter a really compelling name, such as \u201cMy first Ionic app.\u201d Choose your app\u2019s icon, theme color, and layout template. Next, choose your JavaScript Framework of choice: Angular, React, or Vue.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create.png\"><img loading=\"lazy\" decoding=\"async\" width=\"543\" height=\"1024\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-543x1024.png\" alt=\"\" class=\"aligncenter size-large wp-image-3417 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-543x1024.png 543w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-159x300.png 159w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-768x1447.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-815x1536.png 815w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create.png 902w\" data-sizes=\"auto, (max-width: 543px) 100vw, 543px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 543px; --smush-placeholder-aspect-ratio: 543\/1024;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"543\" height=\"1024\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-543x1024.png\" alt=\"\" class=\"aligncenter size-large wp-image-3417\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-543x1024.png 543w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-159x300.png 159w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-768x1447.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create-815x1536.png 815w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-create.png 902w\" sizes=\"auto, (max-width: 543px) 100vw, 543px\" \/><\/noscript><\/a><\/p>\n<p>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.<\/p>\n<p>Alternatively, you can create an account with a username and password, then choose your Git host:<\/p>\n<p>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\u2019ll be brought to your app within Appflow:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2670\" height=\"1146\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete.png\" alt=\"\" class=\"aligncenter size-full wp-image-3418 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete.png 2670w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-300x129.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-1024x440.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-768x330.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-1536x659.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-2048x879.png 2048w\" data-sizes=\"auto, (max-width: 2670px) 100vw, 2670px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 2670px; --smush-placeholder-aspect-ratio: 2670\/1146;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"2670\" height=\"1146\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete.png\" alt=\"\" class=\"aligncenter size-full wp-image-3418\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete.png 2670w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-300x129.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-1024x440.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-768x330.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-1536x659.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-complete-2048x879.png 2048w\" sizes=\"auto, (max-width: 2670px) 100vw, 2670px\" \/><\/noscript><\/a><\/p>\n<p>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!<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1942\" height=\"1812\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview.png\" alt=\"\" class=\"aligncenter size-full wp-image-3419 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview.png 1942w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview-300x280.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview-1024x955.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview-768x717.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview-1536x1433.png 1536w\" data-sizes=\"auto, (max-width: 1942px) 100vw, 1942px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1942px; --smush-placeholder-aspect-ratio: 1942\/1812;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1942\" height=\"1812\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview.png\" alt=\"\" class=\"aligncenter size-full wp-image-3419\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview.png 1942w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview-300x280.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview-1024x955.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview-768x717.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/ss-app-wizard-preview-1536x1433.png 1536w\" sizes=\"auto, (max-width: 1942px) 100vw, 1942px\" \/><\/noscript><\/a><\/p>\n<p>From here, you can begin <a href=\"https:\/\/ionicframework.com\/docs\/\">customizing your app<\/a> or deploy it to iOS and Android devices <a href=\"https:\/\/capacitorjs.com\/docs\/getting-started\/with-ionic\">using Capacitor<\/a>.<\/p>\n<h2>Start using Web Previews today<\/h2>\n<p>Web Previews represent the next phase of Appflow\u2019s 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.<\/p>\n<p><a href=\"https:\/\/ionicframework.com\/docs\/appflow\/web-previews\">Web Previews<\/a> are available on all Appflow plans. Build a web preview from <a href=\"https:\/\/dashboard.ionicframework.com\">within Appflow<\/a> or <a href=\"https:\/\/ionicframework.com\/start\">create a new Ionic app<\/a> in minutes right now.<\/p>\n<p>How will you use the new Web Previews feature? Let us know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, we\u2019re thrilled to announce Web Previews in Appflow, the easiest way to share what you\u2019re working on with coworkers, stakeholders, and more. Unfamiliar with Appflow? It\u2019s 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 [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":3420,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120],"tags":[128],"class_list":["post-3412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","tag-appflow"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing Web Previews in Appflow - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Web Previews in Appflow\" \/>\n<meta property=\"og:description\" content=\"Today, we\u2019re thrilled to announce Web Previews in Appflow, the easiest way to share what you\u2019re working on with coworkers, stakeholders, and more. Unfamiliar with Appflow? It\u2019s 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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-24T14:51:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matt Kremer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@matthewkremer\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Kremer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow\"},\"author\":{\"name\":\"Matt Kremer\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/073efef09ceca1b117c33f77cb4120be\"},\"headline\":\"Announcing Web Previews in Appflow\",\"datePublished\":\"2020-09-24T14:51:46+00:00\",\"dateModified\":\"2020-09-24T14:51:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow\"},\"wordCount\":1035,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png\",\"keywords\":[\"Appflow\"],\"articleSection\":[\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow\",\"name\":\"Announcing Web Previews in Appflow - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png\",\"datePublished\":\"2020-09-24T14:51:46+00:00\",\"dateModified\":\"2020-09-24T14:51:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Web Previews in Appflow\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/073efef09ceca1b117c33f77cb4120be\",\"name\":\"Matt Kremer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/11\/matt-sm-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/11\/matt-sm-150x150.jpg\",\"caption\":\"Matt Kremer\"},\"sameAs\":[\"https:\/\/x.com\/matthewkremer\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/matt\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Web Previews in Appflow - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow","og_locale":"en_US","og_type":"article","og_title":"Announcing Web Previews in Appflow","og_description":"Today, we\u2019re thrilled to announce Web Previews in Appflow, the easiest way to share what you\u2019re working on with coworkers, stakeholders, and more. Unfamiliar with Appflow? It\u2019s 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 [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow","og_site_name":"Ionic Blog","article_published_time":"2020-09-24T14:51:46+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png","type":"image\/png"}],"author":"Matt Kremer","twitter_card":"summary_large_image","twitter_creator":"@matthewkremer","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Matt Kremer","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow"},"author":{"name":"Matt Kremer","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/073efef09ceca1b117c33f77cb4120be"},"headline":"Announcing Web Previews in Appflow","datePublished":"2020-09-24T14:51:46+00:00","dateModified":"2020-09-24T14:51:46+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow"},"wordCount":1035,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png","keywords":["Appflow"],"articleSection":["Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow","url":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow","name":"Announcing Web Previews in Appflow - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png","datePublished":"2020-09-24T14:51:46+00:00","dateModified":"2020-09-24T14:51:46+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-web-previews-in-appflow#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Web Previews in Appflow"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/073efef09ceca1b117c33f77cb4120be","name":"Matt Kremer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/11\/matt-sm-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2015\/11\/matt-sm-150x150.jpg","caption":"Matt Kremer"},"sameAs":["https:\/\/x.com\/matthewkremer"],"url":"https:\/\/ionic.io\/blog\/author\/matt"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/09\/web-preview-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3412"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3412\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3420"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}