{"id":4372,"date":"2022-09-21T14:00:47","date_gmt":"2022-09-21T14:00:47","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=4372"},"modified":"2023-01-19T18:28:07","modified_gmt":"2023-01-19T23:28:07","slug":"introducing-portals-for-capacitor","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor","title":{"rendered":"Introducing Portals for Capacitor"},"content":{"rendered":"<p>Today, we&#8217;re thrilled to announce Portals for Capacitor, making it possible for enterprise teams to implement a micro frontends strategy directly into Capacitor apps. Develop at scale by isolating different features and updating them independently. Portals for Capacitor is ideal for large-scale enterprise teams building mission-critical applications.<\/p>\n<p><!--more--><\/p>\n<h2>The power of Capacitor<\/h2>\n<p>Installed nearly half a million times per month and growing, Capacitor is Ionic&#8217;s solution to bridge web and native applications, providing seamless mobile experiences to users around the world. Since the release of Capacitor in May 2019, thousands of companies have used the cross-platform native runtime to build web apps that run on iOS, Android, desktop, and on the web as Progressive Web Apps.<\/p>\n<p>Capacitor connects the web to native, enabling the best of both worlds by providing the tooling and runtime that make it possible to take any modern web app and deploy it natively to all the platforms you care about. Capacitor is quickly becoming the de facto standard for web developers building for mobile.<\/p>\n<p>Now, with Portals for Capacitor, your enterprise team can bring Capacitor applications to market even faster.<\/p>\n<h2>Building Capacitor apps at scale<\/h2>\n<p>Capacitor apps harness the power of the web to quickly build mobile applications. However, when developing large-scale Capacitor apps, as with any mobile application, team organization can limit the potential to move even faster. Here are some potential challenges large teams could face:<\/p>\n<p>Features are built at different times. Some features are created or updated faster than others. For new features to reach users, the entire application needs to be ready to ship at the same time. This lag can lead to bottlenecks in the development process and a slower shipping cadence.<\/p>\n<p>Managing multiple developers can be difficult. When building Capacitor apps, a team of multiple developers\u2014often spanning 10 or more developers\u2014will likely work on the same code base. It takes an abundance of time and planning to ensure that developers aren\u2019t tripping over each other to get the project done.<\/p>\n<h2>Why Portals for Capacitor?<\/h2>\n<p>Portals for Capacitor enables large enterprise teams to ship faster by dividing a single Capacitor app into smaller micro frontends. In combination with Appflow live updates, individual teams can now ship updates independently and on their own schedule. Here are just a few benefits of using Portals for Capacitor:<\/p>\n<p><strong>Organize development teams to speed up app production.\u00a0<\/strong><span style=\"font-size: revert;\">Portals for Capacitor isolates different features and allows teams to build these features autonomously, without getting in the way of each other. With this architecture optimization, prioritize runtime versus build-time to provide a better user experience.<\/span><\/p>\n<p><strong>Update features autonomously.<\/strong> Portals for Capacitor works seamlessly with live updates by Appflow to ship features independently. Live updates enable teams to submit code changes directly to their users without waiting to package all features and updates simultaneously.<\/p>\n<p><a href=\"https:\/\/ionic.io\/login?source=portals\"><strong>\u2192 Sign up for a trial of Portals for Capacitor today!<\/strong><\/a><\/p>\n<h2>Setting up Portals for Capacitor<\/h2>\n<p>Portals for Capacitor allows users to define separate micro frontend applications kto exist in the same Capacitor application. This is done by adding configuration to the Capacitor config defining the location of the applications during build.<\/p>\n<pre><code class=\"language-ts\">const capacitorConfig: CapacitorConfig = {\n  plugins: {\n    \/\/ Portals for Capacitor configuration\n    Portals: {\n      shell: {\n        name: &#039;shell&#039;,\n        webDir: &#039;.\/build&#039;,\n      },\n      apps: [\n        {\n          name: &#039;account&#039;,\n          webDir: &#039;..\/account\/build&#039;,\n        },\n      ],\n    },\n  },\n};\n<\/code><\/pre>\n<p>After the applications have been defined, you can add live updates configuration so that each application can be deployed independently by having each application as a separate Appflow app.<\/p>\n<pre><code class=\"language-ts\">{\n  name: &#039;shell&#039;,\n  webDir: &#039;.\/build&#039;,\n  liveUpdateConfig: {\n    appId: &#039;YOUR_APP_ID_IN_APPFLOW&#039;,\n    channel: &#039;production&#039;,\n    autoUpdateMethod: &#039;background&#039;,\n  },\n};\n\n<\/code><\/pre>\n<p>Now each micro frontend has not only its own app but also separate deployment channels.<\/p>\n<p><a href=\"https:\/\/ionic.io\/docs\/portals\/for-capacitor\/overview\"><strong>\u2192 Dig into the Portals for Capacitor documentation to learn more.<\/strong><\/a><\/p>\n<h2>Get started today<\/h2>\n<p>Portals for Capacitor solves the problems faced when trying to develop and deploy features quickly. <a href=\"https:\/\/ionic.io\/login?source=portals\">Sign up<\/a> to try Portals for Capacitor, and <a href=\"https:\/\/go.ionicframework.com\/portals-for-capacitor\">get in touch<\/a> with a Portals specialist to learn more.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, we&#8217;re thrilled to announce Portals for Capacitor, making it possible for enterprise teams to implement a micro frontends strategy directly into Capacitor apps. Develop at scale by isolating different features and updating them independently. Portals for Capacitor is ideal for large-scale enterprise teams building mission-critical applications.<\/p>\n","protected":false},"author":84,"featured_media":4373,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"26","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"553139","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/introducing-portals-for-capacitor\/227111","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120],"tags":[255,227],"class_list":["post-4372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","tag-micro-frontends","tag-portals"],"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>Introducing Portals for Capacitor - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Today we\u2019re thrilled to announce Portals for Capacitor, making it possible for enterprise teams to implement a micro frontends strategy.\" \/>\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\/introducing-portals-for-capacitor\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Portals for Capacitor\" \/>\n<meta property=\"og:description\" content=\"Today we\u2019re thrilled to announce Portals for Capacitor, making it possible for enterprise teams to implement a micro frontends strategy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-21T14:00:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-19T23:28:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.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=\"Christine Perez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christine Perez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor\"},\"author\":{\"name\":\"Christine Perez\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/7b75cb57a99f0c2dc7e9f000946a60f7\"},\"headline\":\"Introducing Portals for Capacitor\",\"datePublished\":\"2022-09-21T14:00:47+00:00\",\"dateModified\":\"2023-01-19T23:28:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor\"},\"wordCount\":613,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png\",\"keywords\":[\"micro frontends\",\"Portals\"],\"articleSection\":[\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor\",\"url\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor\",\"name\":\"Introducing Portals for Capacitor - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png\",\"datePublished\":\"2022-09-21T14:00:47+00:00\",\"dateModified\":\"2023-01-19T23:28:07+00:00\",\"description\":\"Today we\u2019re thrilled to announce Portals for Capacitor, making it possible for enterprise teams to implement a micro frontends strategy.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png\",\"width\":1600,\"height\":880},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing Portals for Capacitor\"}]},{\"@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\/7b75cb57a99f0c2dc7e9f000946a60f7\",\"name\":\"Christine Perez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/07\/christine-perez-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/07\/christine-perez-150x150.png\",\"caption\":\"Christine Perez\"},\"description\":\"Product Marketing Manager\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/christineperez1\/\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/christine\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducing Portals for Capacitor - Ionic Blog","description":"Today we\u2019re thrilled to announce Portals for Capacitor, making it possible for enterprise teams to implement a micro frontends strategy.","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\/introducing-portals-for-capacitor","og_locale":"en_US","og_type":"article","og_title":"Introducing Portals for Capacitor","og_description":"Today we\u2019re thrilled to announce Portals for Capacitor, making it possible for enterprise teams to implement a micro frontends strategy.","og_url":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor","og_site_name":"Ionic Blog","article_published_time":"2022-09-21T14:00:47+00:00","article_modified_time":"2023-01-19T23:28:07+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png","type":"image\/png"}],"author":"Christine Perez","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Christine Perez","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor"},"author":{"name":"Christine Perez","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/7b75cb57a99f0c2dc7e9f000946a60f7"},"headline":"Introducing Portals for Capacitor","datePublished":"2022-09-21T14:00:47+00:00","dateModified":"2023-01-19T23:28:07+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor"},"wordCount":613,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png","keywords":["micro frontends","Portals"],"articleSection":["Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor","url":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor","name":"Introducing Portals for Capacitor - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png","datePublished":"2022-09-21T14:00:47+00:00","dateModified":"2023-01-19T23:28:07+00:00","description":"Today we\u2019re thrilled to announce Portals for Capacitor, making it possible for enterprise teams to implement a micro frontends strategy.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png","width":1600,"height":880},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/introducing-portals-for-capacitor#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Introducing Portals for Capacitor"}]},{"@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\/7b75cb57a99f0c2dc7e9f000946a60f7","name":"Christine Perez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/07\/christine-perez-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2021\/07\/christine-perez-150x150.png","caption":"Christine Perez"},"description":"Product Marketing Manager","sameAs":["https:\/\/www.linkedin.com\/in\/christineperez1\/"],"url":"https:\/\/ionic.io\/blog\/author\/christine"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/portals_capacitor.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4372","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\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4372"}],"version-history":[{"count":2,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4372\/revisions"}],"predecessor-version":[{"id":4688,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4372\/revisions\/4688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4373"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}