{"id":5577,"date":"2023-08-31T10:56:56","date_gmt":"2023-08-31T14:56:56","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5577"},"modified":"2023-08-31T10:56:58","modified_gmt":"2023-08-31T14:56:58","slug":"building-a-native-superapp-with-micro-frontends-and-federated-capacitor","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor","title":{"rendered":"Building a Native Superapp with Micro Frontends and Federated Capacitor"},"content":{"rendered":"\n<p><em>This is a guest post from Simon Grimm, Ionic Developer Expert and educator at <\/em><a href=\"https:\/\/ionicacademy.com\/\"><em>the Ionic Academy<\/em><\/a><em>, an online school with 70+ video courses focused entirely on building awesome mobile apps with Ionic and Capacitor!<\/em><\/p>\n\n\n\n<p>Thanks to the advancements in web development, everyone can build powerful web applications with micro frontends (MFEs). But what about native apps? Can we use the same approach to build a native app with micro frontends?<\/p>\n\n\n\n<p>In this tutorial, we will learn how to build a <a href=\"https:\/\/ionic.io\/portals\">native superapp<\/a> with micro frontend architecture and the help of <a href=\"https:\/\/ionic.io\/docs\/portals\/for-capacitor\/overview\">Federated Capacitor<\/a>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is a Superapp?<\/strong><\/h2>\n\n\n\n<p>A superapp is a native app that is built with web technologies. It is a single app that <a href=\"https:\/\/ionic.io\/resources\/articles\/superapps-composable-mobile-app-development\">combines multiple apps or micro frontends<\/a> into one. This allows us to build a single app that can be extended with new features over time, and multiple teams can work on different parts of the app in parallel. One way to approach this is to integrate <a href=\"https:\/\/ionic.io\/docs\/portals\/\">Ionic Portals<\/a> into an existing native iOS or Android app and display web frontends seamlessly inside the native app.&nbsp;<\/p>\n\n\n\n<p>Another approach is using Module Federation inside a web project to combine different micro frontends into one web &#8220;wrapper&#8221; app. That&#8217;s what we are going to do &#8211; but we will also make that superapp work as a native mobile app!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting up the Superapp with Module Federation<\/strong><\/h2>\n\n\n\n<p>To get started, we create a new folder and add 3 projects with Module Federation by using the <a href=\"https:\/\/github.com\/jherr\/create-mf-app\"><code>create-mf-app<\/code><\/a> community package:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">mkdir superapp\u00a0\ncd superapp\u00a0\n# Run 3 times\u00a0\nnpx create-mf-app<\/code><\/pre>\n\n\n\n<p>For the first app, we create a host app that will be the shell for the other apps.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"634\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-4.png\" alt=\"\" class=\"wp-image-5592 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-4.png 846w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-4-300x225.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-4-768x576.png 768w\" data-sizes=\"auto, (max-width: 846px) 100vw, 846px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 846px; --smush-placeholder-aspect-ratio: 846\/634;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"634\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-4.png\" alt=\"\" class=\"wp-image-5592\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-4.png 846w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-4-300x225.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-4-768x576.png 768w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><\/noscript><\/figure>\n\n\n\n<p>The second micro frontend will be an About app or page using React. Make sure that you specify a different port than the shell app!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"634\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-5.png\" alt=\"\" class=\"wp-image-5593 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-5.png 846w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-5-300x225.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-5-768x576.png 768w\" data-sizes=\"auto, (max-width: 846px) 100vw, 846px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 846px; --smush-placeholder-aspect-ratio: 846\/634;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"634\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-5.png\" alt=\"\" class=\"wp-image-5593\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-5.png 846w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-5-300x225.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-5-768x576.png 768w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><\/noscript><\/figure>\n\n\n\n<p>The third micro frontend will be a List page using Vanilla JS. Again, specify a different port so we can run all three apps at the same time.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"802\" height=\"590\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-2.png\" alt=\"\" class=\"wp-image-5590 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-2.png 802w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-2-300x221.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-2-768x565.png 768w\" data-sizes=\"auto, (max-width: 802px) 100vw, 802px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 802px; --smush-placeholder-aspect-ratio: 802\/590;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"802\" height=\"590\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-2.png\" alt=\"\" class=\"wp-image-5590\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-2.png 802w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-2-300x221.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-2-768x565.png 768w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/noscript><\/figure>\n\n\n\n<p>In this example, I&#8217;m using React and Vanilla JS, but you can use any framework you like. Additionally the <code>create-mf-app<\/code> command uses Webpack, but you could also <a href=\"https:\/\/github.com\/originjs\/vite-plugin-federation\">use Module Federation with Vite instead<\/a>!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Starting the Micro Frontends<\/h2>\n\n\n\n<p>Now that we have our 3 projects, we can start them all at the same time. Make sure to run the commands in the correct folder, so you will need three terminals and dive into each folder, install the dependencies and start the app:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">cd host\nnpm install\nnpm run start\n\ncd about\nnpm install\nnpm run start\n\ncd list\nnpm install\nnpm run start<\/code><\/pre>\n\n\n\n<p>If you correctly defined different ports, you should now see three very simple projects up and running!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1326\" height=\"325\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3.png\" alt=\"\" class=\"wp-image-5591 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3.png 1326w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3-300x74.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3-1024x251.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3-768x188.png 768w\" data-sizes=\"auto, (max-width: 1326px) 100vw, 1326px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1326px; --smush-placeholder-aspect-ratio: 1326\/325;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1326\" height=\"325\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3.png\" alt=\"\" class=\"wp-image-5591\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3.png 1326w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3-300x74.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3-1024x251.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-3-768x188.png 768w\" sizes=\"auto, (max-width: 1326px) 100vw, 1326px\" \/><\/noscript><\/figure>\n\n\n\n<p>This is the basic architecture for our superapp, and now we just need to combine them into one app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exposing the Micro Frontends<\/h2>\n\n\n\n<p>To combine the micro frontends, we need to expose them to the outside world. This is done by using the <a href=\"https:\/\/webpack.js.org\/concepts\/module-federation\/\">Module Federation Plugin<\/a> in Webpack, which is already configured for us in the <code>webpack.config.js<\/code> file of each project. Let&#8217;s add some code to the different projects and then expose them to the host app!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating an About Component with React<\/h3>\n\n\n\n<p>First, we create a super simple about component, so add a new file at <code>about\/src\/About.tsx<\/code> and insert:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">export default () =&gt; {\n  return &lt;div className=&quot;bg-blue-600 p-8 text-white&quot;&gt;My cool about page&lt;\/div&gt;;\n};\n<\/code><\/pre>\n\n\n\n<p>This means we won&#8217;t expose the whole app but just one component for now.<\/p>\n\n\n\n<p>To do this, we now need to update the <code>about\/webpack.config.js<\/code> file and add our component to the <code>exposes<\/code> property of the <code>ModuleFederationPlugin<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">module.exports = (_, argv) =&gt; ({\n  \/\/ Remove the output, required for Federated Capacitor later\n  \/\/ output: {\n  \/\/   publicPath: &quot;http:\/\/localhost:8081\/&quot;,\n  \/\/ },\n\n  plugins: [\n    new ModuleFederationPlugin({\n      name: &quot;about&quot;,\n      filename: &quot;remoteEntry.js&quot;,\n      remotes: {},\n      exposes: { \n        &#039;.\/About&#039;: &#039;\/src\/About&#039;\n      },\n      \/\/ ... everything else is the same\n  ],<\/code><\/pre>\n\n\n\n<p>I have additionally removed the <code>output<\/code> property because this later breaks Federated Capacitor. You can now restart your about app, and you should be able to access a new URL at <a href=\"http:\/\/localhost:8081\/remoteEntry.js\">http:\/\/localhost:8081\/remoteEntry.js<\/a>.<\/p>\n\n\n\n<p>This is the entry point for our micro frontend, and we will need this URL later to load the component into our host app. But let&#8217;s do the same for the list app first!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a List Component with Vanilla JS<\/h3>\n\n\n\n<p>Like before, we changed some code on our micro frontend. This time we also changed the app to accept an element in a function and render the HTML inside of that element, which is a different way of using our micro frontend.<\/p>\n\n\n\n<p>Get started by changing the <code>list\/src\/App.js<\/code> file to:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import &quot;.\/index.css&quot;;\n\nexport default (el) =&gt; {\n  el.innerHTML = `\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;h3&gt;List&lt;\/h3&gt;\n    &lt;ul&gt;\n      &lt;li&gt;Item 1&lt;\/li&gt;\n      &lt;li&gt;Item 2&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n  `;\n};<\/code><\/pre>\n\n\n\n<p>Additionally, update the CSS file at <code>list\/src\/index.css<\/code> to:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">body {\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n.container {\n  font-size: 3rem;\n  margin: auto;\n  max-width: 800px;\n  margin-top: 20px;\n}\n\nli {\n  margin-left: 20px;\n  color: #fff;\n  font-size: 1rem;\n}<\/code><\/pre>\n\n\n\n<p>And again, we now need to update the <code>list\/webpack.config.js<\/code> file to expose our component:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">module.exports = (_, argv) =&gt; ({\n  \/\/ Remove the output, required for Federated Capacitor later\n  \/\/ output: {\n  \/\/   publicPath: &quot;http:\/\/localhost:8082\/&quot;,\n  \/\/ },\n\n  plugins: [\n    new ModuleFederationPlugin({\n      name: &quot;list&quot;,\n      filename: &quot;remoteEntry.js&quot;,\n      remotes: {},\n      exposes: {\n        &#039;.\/List&#039;: &#039;.\/src\/App.js&#039;,\n      },\n      \/\/ ... everything else is the same\n  ],<\/code><\/pre>\n\n\n\n<p>If you applied all changes correctly, you can find the new entry point for the list app at <a href=\"http:\/\/localhost:8082\/remoteEntry.js\">http:\/\/localhost:8082\/remoteEntry.js<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Combining the Micro Frontends with a Host App<\/h2>\n\n\n\n<p>Now that we expose both of our micro frontends, we can use the URLs and load them into our host app. For this, we need to update the <code>host\/webpack.config.js<\/code> file and add the URLs to the <code>remotes<\/code> property of the <code>ModuleFederationPlugin<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">plugins: [\n    new ModuleFederationPlugin({\n      name: &quot;host&quot;,\n      filename: &quot;remoteEntry.js&quot;,\n      remotes: {\n        about: &quot;about@http:\/\/localhost:8081\/remoteEntry.js&quot;,\n        list: &quot;list@http:\/\/localhost:8082\/remoteEntry.js&quot;,\n      },\n      \/\/ ... everything else is the same\n  ],<\/code><\/pre>\n\n\n\n<p>This makes our micro frontends available in the host app, and we can now load and use them in our app.<\/p>\n\n\n\n<p>To do so, bring up the <code>host\/src\/App.tsx<\/code> file and add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import React, { useEffect, useRef } from &quot;react&quot;;\nimport ReactDOM from &quot;react-dom&quot;;\n\nimport About from &quot;about\/About&quot;;\nimport List from &quot;list\/List&quot;;\n\nimport &quot;.\/index.scss&quot;;\n\nconst App = () =&gt; {\n  const listRef = useRef(null);\n\n  useEffect(() =&gt; {\n    List(listRef.current);\n  }, []);\n\n  return (\n    &lt;div className=&quot;mt-10 text-3xl mx-auto max-w-6xl p-4 bg-green-500&quot;&gt;\n      &lt;div className=&quot;text-white  p-4 mb-4&quot;&gt;My Host App&lt;\/div&gt;\n      &lt;About \/&gt;\n      &lt;div ref={listRef} \/&gt;\n    &lt;\/div&gt;\n  );\n};\nReactDOM.render(&lt;App \/&gt;, document.getElementById(&quot;app&quot;));<\/code><\/pre>\n\n\n\n<p>We can simply use the <code>About<\/code> component as is, but we need to use the <code>List<\/code> component differently. Because it is a Vanilla JS component, we need to use a <code>useRef<\/code> hook and pass the element to the component.<\/p>\n\n\n\n<p>At this point, the app would work but Typescript isn&#8217;t happy, so let&#8217;s fix that by defining the types for the components. Create a new <code>host\/src\/remote-declarations.d.ts<\/code> file and add:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">declare module &#039;about\/About&#039;;\ndeclare module &#039;list\/List&#039;;<\/code><\/pre>\n\n\n\n<p>Now run the shell app with <code>npm run start<\/code> and you should see the following:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"689\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image.png\" alt=\"\" class=\"wp-image-5588 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image.png 685w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-298x300.png 298w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-150x150.png 150w\" data-sizes=\"auto, (max-width: 685px) 100vw, 685px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 685px; --smush-placeholder-aspect-ratio: 685\/689;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"689\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image.png\" alt=\"\" class=\"wp-image-5588\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image.png 685w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-298x300.png 298w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-150x150.png 150w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/noscript><\/figure>\n\n\n\n<p>Congratulations, you have successfully combined two micro frontends into one app!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Capacitor to the Host App<\/h2>\n\n\n\n<p>Now that we have our superapp, we can add Capacitor to it and make it a native app.<\/p>\n\n\n\n<p>The problem is that we can&#8217;t load micro frontends from localhost on a native device, so we need to build the apps and load them from the device. And we need a tool that can bundle the micro frontends and load them correctly. Welcome to the world of <a href=\"https:\/\/ionic.io\/blog\/allow-me-to-reintroduce-myself-federated-capacitor\">Federated Capacitor<\/a>!<\/p>\n\n\n\n<p>To get started, we add <a href=\"https:\/\/capacitorjs.com\/\">Capacitor<\/a> to our host app and add the native platforms:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">npm i @capacitor\/core\nnpm i -D @capacitor\/cli\nnpx cap init\n\n## Add native platforms\nnpm i @capacitor\/android @capacitor\/ios\nnpx cap add ios\nnpx cap add android<\/code><\/pre>\n\n\n\n<p>While running the <code>init<\/code> command, make sure to use dist as the web asset directory of the Capacitor app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Federated Capacitor<\/h2>\n\n\n\n<p>To make our Superapp work with Capacitor, we need to add the <a href=\"https:\/\/ionic.io\/docs\/portals\/for-capacitor\/overview\">Federated Capacitor<\/a> plugin to our project. This is part of the Ionic Enterprise SDK, so you will need to <a href=\"https:\/\/ionic.io\/signup\">sign up for a paid account<\/a> to get access to it. If you have a native key, you can log in with the Ionic CLI, initialize the project and install the plugin after setting up your access key:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">ionic login\nionic init\nionic enterprise register\nnpm install @ionic-enterprise\/federated-capacitor<\/code><\/pre>\n\n\n\n<p>To configure Federated Capacitor, we need to open the host\/capacitor.config.ts file and define our shell app and the different micro frontends:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import { CapacitorConfig } from &#039;@capacitor\/cli&#039;;\n\nconst config: CapacitorConfig = {\n  appId: &#039;com.example.app&#039;,\n  appName: &#039;host&#039;,\n  webDir: &#039;dist&#039;,\n  server: {\n    androidScheme: &#039;https&#039;,\n  },\n  plugins: {\n    FederatedCapacitor: {\n      liveUpdatesKey: &#039;&#039;,\n      shell: {\n        name: &#039;shell&#039;,\n      },\n      apps: [\n        {\n          name: &#039;about&#039;,\n          webDir: &#039;..\/about\/dist&#039;,\n        },\n        {\n          name: &#039;list&#039;,\n          webDir: &#039;..\/list\/dist&#039;,\n        },\n      ],\n    },\n  },\n};\n\nexport default config;<\/code><\/pre>\n\n\n\n<p>Now we need a way to create a special build so we don&#8217;t break our local development environment. For this, we will first install two additional packages:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">npm i -D cross-env npm-run-all<\/code><\/pre>\n\n\n\n<p>Then we update the <code>host\/package.json<\/code> file and add new scripts which build our MFEs, and then build the host app with the <code>CAP_BUILD<\/code> environment variable set to true:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-json\">&quot;scripts&quot;: {\n    &quot;build&quot;: &quot;run-p build:about build:list &amp;&amp; cross-env CAP_BUILD=true webpack --mode production&quot;,\n    &quot;build:about&quot;: &quot;cd ..\/about &amp;&amp; npm run build&quot;,\n    &quot;build:list&quot;: &quot;cd ..\/list &amp;&amp; npm run build&quot;,\n    \/\/ ... everything else is the same\n  },<\/code><\/pre>\n\n\n\n<p>Finally, we can access the <code>CAP_BUILD<\/code> environment variable in our <code>host\/webpack.config.js<\/code> file and change the <code>remotes<\/code> property of the <code>ModuleFederationPlugin<\/code> depending on the value:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">const isCapBuild = process.env.CAP_BUILD;\n\nconst remotes =\n  isCapBuild == null\n    ? \/\/ Configuration for when developing locally\n      {\n        about: &#039;about@http:\/\/localhost:8081\/remoteEntry.js&#039;,\n        list: &#039;list@http:\/\/localhost:8082\/remoteEntry.js&#039;,\n      }\n    : \/\/ Configuration for when building for Capacitor\n      {\n        about: `about@about\/remoteEntry.js`,\n        list: `list@list\/remoteEntry.js`,\n      };\n\nconst deps = require(&#039;.\/package.json&#039;).dependencies;\nmodule.exports = (_, argv) =&gt; ({\n  \/\/ NOT NEEDED ANYMORE\n  \/\/ output: {\n  \/\/   publicPath: &#039;http:\/\/localhost:8080\/&#039;,\n  \/\/ },\n  plugins: [\n    new ModuleFederationPlugin({\n      name: &#039;shell&#039;, \/\/ &lt;- Update to shell\n      filename: &#039;remoteEntry.js&#039;,\n      remotes, \/\/ &lt;- Use our object\n      \/\/ remotes: {\n      \/\/   about: &quot;about@http:\/\/localhost:8081\/remoteEntry.js&quot;,\n      \/\/   list: &quot;list@http:\/\/localhost:8082\/remoteEntry.js&quot;,\n      \/\/ },\n      \/\/ ... everything else is the same\n  ],<\/code><\/pre>\n\n\n\n<p>This means for local development we will use the localhost URLs like before, and if we build for Capacitor we will use the relative URLs and Federated Capacitor will do the magic! Now we just need to build all of our apps and sync the code into our native apps:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-shell\">npm run build \nnpx cap sync\nnpx cap open ios<\/code><\/pre>\n\n\n\n<p>Once done, you can run the app on a simulator and you should see the same app as before &#8211; but now it&#8217;s not just a website but a native superapp!<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"1015\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-1.png\" alt=\"\" class=\"wp-image-5589 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-1.png 522w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-1-154x300.png 154w\" data-sizes=\"auto, (max-width: 522px) 100vw, 522px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 522px; --smush-placeholder-aspect-ratio: 522\/1015;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"1015\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-1.png\" alt=\"\" class=\"wp-image-5589\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-1.png 522w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/image-1-154x300.png 154w\" sizes=\"auto, (max-width: 522px) 100vw, 522px\" \/><\/noscript><\/figure>\n\n\n\n<p><em>Note: I went through this process 4 times and encountered problems with every try, so if you are stuck, clean your dist folders, run builds and sync again and use <\/em><a href=\"https:\/\/ionic.io\/blog\/debugging-tips-for-your-ionic-app\"><em>remote debugging to check for any specific error messages<\/em><\/a><em> of your native app!<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Live Updates with Appflow<\/h2>\n\n\n\n<p>We&#8217;ve covered a lot of ground already, but here&#8217;s one more thing that we can do with our superapp: live updates! If you combine this approach with <a href=\"https:\/\/ionic.io\/docs\/portals\/for-capacitor\/live-updates\">live updates from Ionic AppFlow<\/a>, you can update your native app without going through the App Store or Play Store.<\/p>\n\n\n\n<p>And not just your whole app, but also the individual micro frontends! This means that different teams can work on different parts of one app and ship updates independently of each other.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Parting Thoughts<\/h2>\n\n\n\n<p>In this tutorial, we learned how to build a native s<a href=\"https:\/\/ionic.io\/portals\">uperapp<\/a> with micro frontend architecture and the help of Federated Capacitor.<\/p>\n\n\n\n<p>We started by creating three projects with Module Federation and then combined them into one web app. On top we installed Capacitor and made it a real native app with Federated Capacitor!<br><\/p>\n\n\n\n<p>While this is a very simple example, it shows the power of micro frontends and how we can use them to build native apps with Capacitor, especially with multiple teams working on different parts of one app.<\/p>\n\n\n\n<p>If you enjoyed this tutorial, also check out how you can use Capacitor to build native <a href=\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-ios-app\">iOS<\/a> and <a href=\"https:\/\/ionic.io\/blog\/building-and-releasing-your-capacitor-android-app\">Android<\/a> apps with the web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building a native superapp is easier than ever thanks to Micro Frontends and Federated Capacitor. <\/p>\n","protected":false},"author":11,"featured_media":5584,"comment_status":"open","ping_status":"open","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":[1,124],"tags":[151,272,260],"class_list":["post-5577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-tutorials","tag-capacitor","tag-federated-capacitor","tag-superapps"],"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>Building a Native Superapp with Micro Frontends and Federated Capacitor - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Building a native superapp is easier than ever thanks to Micro Frontends and Federated Capacitor. Learn more today!\" \/>\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\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Native Superapp with Micro Frontends and Federated Capacitor\" \/>\n<meta property=\"og:description\" content=\"Building a native superapp is easier than ever thanks to Micro Frontends and Federated Capacitor. Learn more today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-31T14:56:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-31T14:56:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Simon Grimm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@schlimmson\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Grimm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor\"},\"author\":{\"name\":\"Simon Grimm\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6\"},\"headline\":\"Building a Native Superapp with Micro Frontends and Federated Capacitor\",\"datePublished\":\"2023-08-31T14:56:56+00:00\",\"dateModified\":\"2023-08-31T14:56:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor\"},\"wordCount\":1496,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png\",\"keywords\":[\"Capacitor\",\"Federated Capacitor\",\"superapps\"],\"articleSection\":[\"All\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor\",\"url\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor\",\"name\":\"Building a Native Superapp with Micro Frontends and Federated Capacitor - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png\",\"datePublished\":\"2023-08-31T14:56:56+00:00\",\"dateModified\":\"2023-08-31T14:56:58+00:00\",\"description\":\"Building a native superapp is easier than ever thanks to Micro Frontends and Federated Capacitor. Learn more today!\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Native Superapp with Micro Frontends and Federated 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\/24d44b251756bd6488dcb741eec0bef6\",\"name\":\"Simon Grimm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg\",\"caption\":\"Simon Grimm\"},\"sameAs\":[\"https:\/\/x.com\/schlimmson\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/schlimmson\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a Native Superapp with Micro Frontends and Federated Capacitor - Ionic Blog","description":"Building a native superapp is easier than ever thanks to Micro Frontends and Federated Capacitor. Learn more today!","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\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor","og_locale":"en_US","og_type":"article","og_title":"Building a Native Superapp with Micro Frontends and Federated Capacitor","og_description":"Building a native superapp is easier than ever thanks to Micro Frontends and Federated Capacitor. Learn more today!","og_url":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor","og_site_name":"Ionic Blog","article_published_time":"2023-08-31T14:56:56+00:00","article_modified_time":"2023-08-31T14:56:58+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png","type":"image\/png"}],"author":"Simon Grimm","twitter_card":"summary_large_image","twitter_creator":"@schlimmson","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Simon Grimm","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor"},"author":{"name":"Simon Grimm","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/24d44b251756bd6488dcb741eec0bef6"},"headline":"Building a Native Superapp with Micro Frontends and Federated Capacitor","datePublished":"2023-08-31T14:56:56+00:00","dateModified":"2023-08-31T14:56:58+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor"},"wordCount":1496,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png","keywords":["Capacitor","Federated Capacitor","superapps"],"articleSection":["All","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor","url":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor","name":"Building a Native Superapp with Micro Frontends and Federated Capacitor - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png","datePublished":"2023-08-31T14:56:56+00:00","dateModified":"2023-08-31T14:56:58+00:00","description":"Building a native superapp is easier than ever thanks to Micro Frontends and Federated Capacitor. Learn more today!","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/building-a-native-superapp-with-micro-frontends-and-federated-capacitor#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Building a Native Superapp with Micro Frontends and Federated 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\/24d44b251756bd6488dcb741eec0bef6","name":"Simon Grimm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/08\/simon-150x150.jpg","caption":"Simon Grimm"},"sameAs":["https:\/\/x.com\/schlimmson"],"url":"https:\/\/ionic.io\/blog\/author\/schlimmson"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/superapp-fedcap-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5577","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=5577"}],"version-history":[{"count":5,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5577\/revisions"}],"predecessor-version":[{"id":5594,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5577\/revisions\/5594"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5584"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}